oneshot-website

Files (3)

• SKILL.md
• oneshot-website.md
• themes.md

SKILL.md (first lines)

# Oneshot 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):
1. Elegant restaurant storefront -- dark marble, candlelight, menu sections appearing like courses being served
2. Luxury perfume house -- mist particles, scent notes drifting, amber and obsidian palette
3. Antiquarian bookshop at night -- warm amber light, floating text fragments, vellum textures in CSS
4. Deep sea research station -- bioluminescent creatures via canvas, pressure gauge UI, midnight blue
5. 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 `.html` file
- **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.html` or 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: swap` on any web fonts
- `will-change: transform` on animated elements
- Smooth scroll behavior on `html`
- Mobile-responsive (flexbox/grid, no fixed px widths on containers)
- `prefers-reduced-motion` media 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`:

```markdown
# 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
1. Create new Pen
2. Paste entire contents into the HTML panel
3. Enable "Full Page" view

### Vercel
```bash
mkdir my-site && cd my-site
# save as index.html
vercel --prod
```

From cafe3310/public-agent-skills, Apache-2.0.

More from cafe3310/public-agent-skills