Oneshot Website Skill for Cursor
Generate immersive, one-shot single-file HTML websites with embedded CSS and JS. No external images. Hostable on CodePen or Vercel. Use for writeup showcases, AI capability demos, and portfolio pieces.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/cafe3310/public-agent-skills --skill oneshot-websiteThe instruction itself
12 sections, as written by the authorOneshot Website
Generate a stunning, self-contained single-file HTML website -- fully immersive, scroll-driven, cinematic. No external images, no build step. Drop into CodePen or push to Vercel as-is.
Inspired by high-end digital brand experiences and the kind of creative coding that makes people say "this was done in one shot?"
When to invoke
Use when:
- Demonstrating an LLM's creative + technical range for writeups or articles
- Creating a stunning demo to embed in a CodePen
- Producing a portfolio piece or proof-of-concept landing page
- Showing off one-shot generation capabilities
The Generation Prompt
When this skill is invoked, generate the full HTML file using this master approach:
Write complete HTML, CSS, and JavaScript in a single self-contained file for an immersive, cinematic website about [THEME].
The site must feel like a living brand experience -- sections that breathe as you scroll, typography that has weight and presence, and atmosphere you can almost feel.
Theme Selection
If no theme is specified, choose one from the repertoire in references/themes.md that hasn't been recently used. Never default to clockwork, clocks, or time-perception themes.
Recommended defaults (rotate through these):
- Elegant restaurant storefront -- dark marble, candlelight, menu sections appearing like courses being served
- Luxury perfume house -- mist particles, scent notes drifting, amber and obsidian palette
- Antiquarian bookshop at night -- warm amber light, floating text fragments, vellum textures in CSS
- Deep sea research station -- bioluminescent creatures via canvas, pressure gauge UI, midnight blue
- Jazz club and vinyl lounge -- smoke rings via SVG, waveform visualizations, sepia and amber
Technical Constraints (NON-NEGOTIABLE)
- Single file: All HTML, CSS, JS in one
.htmlfile - No external images: Use CSS gradients, SVG inline art, Canvas API, or unicode/emoji symbols only
- No CDN dependencies for core visuals (Google Fonts via @import is acceptable)
- No frameworks: Vanilla JS only. No React, Vue, Alpine, etc.
- Static: Must work as a static file (no server-side logic)
- Self-hostable: Drop into Vercel as
index.htmlor paste into CodePen
Quality Bar
This is NOT a simple landing page. It should feel like it was commissioned by a world-class brand agency. Include:
Visual craft:
- Scroll-triggered reveals with Intersection Observer (not scroll events -- use IO for performance)
- Parallax depth on at least 2 layers (background moves slower than foreground)
- Typography that has character -- mix of serif and sans, large display type with tight tracking
- Color palette of 3-4 tones maximum, applied with intention (not rainbow)
- Subtle animated texture or grain overlay via CSS (repeating SVG noise, pseudo-element with opacity)
Interaction:
- Cursor that responds subtly (not gimmicky -- a small dot or trail at most)
- Hover states that feel intentional (transforms, not just color changes)
- At least one section with a scrolling marquee or horizontal text ticker
- Navigation that changes opacity/style on scroll
Atmosphere:
- Hero section with large, centered typographic statement
- At minimum 5 distinct sections with scroll transitions between them
- Footer with subtle details (coordinates, a fictional address, a motto in a second language)
- A moment of surprise -- one section that does something unexpected (inverted colors, a canvas animation, text that rearranges)
Polish details:
font-display: swapon any web fontswill-change: transformon animated elements- Smooth scroll behavior on
html - Mobile-responsive (flexbox/grid, no fixed px widths on containers)
prefers-reduced-motionmedia query to disable animations for accessibility
Output Format
Produce two files:
1. PROMPT.md -- the exact one-shot prompt that will be used to generate this site.
2. index.html -- the complete single-file website. Start with <!DOCTYPE html> and end with </html>. No explanation before or after the HTML.
Format of PROMPT.md:
# One-Shot Prompt
**Theme**: [theme name]
**Generated**: [date]
**Model**: [model name and version]
## Prompt
[The complete verbatim prompt that would reproduce this exact site if fed to any capable LLM fresh]
## Notes
- [Any notable techniques used]
- [Hosting: CodePen / Vercel / local]
Name fictional brands with restraint: evocative, not punny. Think: "Maison Vorieux", "Sublevel 7", "The Meridian Press", not "Tasty Bistro" or "Cool Restaurant".
Hosting
CodePen
- Create new Pen
- Paste entire contents into the HTML panel
- Enable "Full Page" view
Vercel
mkdir my-site && cd my-site
# save as index.html
vercel --prod
Local preview
open index.html # macOS
# or
python3 -m http.server 3000
Example Output Names
The generated site should have a real name. Examples by theme:
| Theme | Brand Name | Tagline |
|-------|-----------|---------|
| Restaurant | Maison Vorieux | Fine dining, honest cooking |
| Perfume | Atelier Obscur | Scent as memory |
| Bookshop | The Meridian Press | Est. 1887 |
| Deep Sea | Sublevel 7 | Research below the thermocline |
| Jazz | The Amber Room | Live music every Thursday |
| Botanical | Selva Studio | Plants for considered spaces |
| Mineral | Cabinet Brut | Specimen traders since 1952 |
| Observatory | Station Nuit | Watching since 1901 |
| Night Market | Hawker's Almanac | Every dish has a story |
Other skills for the same job
different authors, same section of the catalogue
Generate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize electronic component placements, draw breadboard diagrams, mockup 6502 builds, generate retro computer schematics, or design vintage electronics projects. Supports 555 timers, W65C02S microprocessors, 28C256 EEPROMs, W65C22 VIA chips, 7400-series logic gates, LEDs, resistors, capacitors, switches, buttons, crystals, and wires.
> Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.
Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).
| Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
| Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
How to use it
Take cafe3310/oneshot-website from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.