zooqueen
62bbc7766c
Every SKILL.md already declared the new name — name: frames, frames-cli, frames-core, and so on — but the directories were never moved, so the tree carried frames-* in content and hyperframes-* on disk. Everything that resolves a skill by path missed: the core-skill list, the plugin marketplace pin, and the docs the CLI reads at runtime. Eight tests failed on main because the files they open do not exist. The directories now match what the files say they are, and the guide the claude-design contract reads takes the name that contract already used.
5.0 KiB
House Style
Creative direction for compositions when no design spec (frame.md or design.md) is provided. These are starting points — override anything that doesn't serve the content. When a design spec exists, its brand values take precedence; house-style fills gaps.
Before Writing HTML
- Interpret the prompt. Generate real content. A recipe lists real ingredients. A HUD has real readouts.
- Pick a palette. Light or dark? Declare bg, fg, accent before writing code.
- Pick typefaces. Run the font discovery script in references/typography.md — or pick a font you already know that fits the theme. The script broadens your options; it's not the only source.
Lazy Defaults to Question
These patterns are AI design tells — the first thing every LLM reaches for. If you're about to use one, pause and ask: is this a deliberate choice for THIS content, or am I defaulting?
- Gradient text (
background-clip: text+ gradient) - Left-edge accent stripes on cards/callouts
- Cyan-on-dark / purple-to-blue gradients / neon accents
- Pure
#000or#fff(tint toward your accent hue instead) - Identical card grids (same-size cards repeated)
- Everything centered with equal weight (lead the eye somewhere)
- Banned fonts (see references/typography.md for full list)
If the content genuinely calls for one of these — centered layout for a solemn closing, cards for a real product UI mockup, a banned font because it's the perfect thematic match — use it. The goal is intentionality, not avoidance.
Color
- Match light/dark to content: food, wellness, kids → light. Tech, cinema, finance → dark.
- One accent hue. Same background across all scenes.
- Tint neutrals toward your accent (even subtle warmth/coolness beats dead gray).
- Contrast: enforced by
frames check(WCAG AA). Text must be readable with decoratives removed. - Declare palette up front. Don't invent colors per-element.
Background Layer
Every scene needs visual depth — persistent decorative elements that stay visible while content animates in. Without these, scenes feel empty during entrance staggering.
Ideas (mix and match, 2-5 per scene):
- Radial glows (accent-tinted, low opacity, breathing scale)
- Ghost text (theme words at 3-8% opacity, very large, slow drift)
- Accent lines (hairline rules, subtle pulse)
- Grain/noise overlay, geometric shapes, grid patterns
- Thematic decoratives (orbit rings for space, vinyl grooves for music, grid lines for data)
All decoratives should have slow ambient GSAP animation — breathing, drift, pulse. Static decoratives feel dead.
Decorative count vs motion count. The "2-5 per scene" count refers to decorative elements. If a project's design spec says "single ambient motion per scene", it means one looping motion applied to these decoratives (a shared breath/drift/pulse) — not one element total. A scene with 4 decoratives sharing one breathing motion is correct; a scene with 1 decorative is under-dressed.
Motion
See references/motion-principles.md for full rules. Quick: 0.3–0.6s, vary eases, combine transforms on entrances, overlap entries.
Typography
See references/typography.md for full rules. Quick: 700-900 headlines / 300-400 body, serif + sans (not two sans), 60px+ headlines / 20px+ body.
Palettes
Declare one background, one foreground, one accent before writing HTML.
| Category | Use for | File |
|---|---|---|
| Bold / Energetic | Product launches, social media, announcements | palettes/bold-energetic.md |
| Warm / Editorial | Storytelling, documentaries, case studies | palettes/warm-editorial.md |
| Dark / Premium | Tech, finance, luxury, cinematic | palettes/dark-premium.md |
| Clean / Corporate | Explainers, tutorials, presentations | palettes/clean-corporate.md |
| Nature / Earth | Sustainability, outdoor, organic | palettes/nature-earth.md |
| Neon / Electric | Gaming, tech, nightlife | palettes/neon-electric.md |
| Pastel / Soft | Fashion, beauty, lifestyle, wellness | palettes/pastel-soft.md |
| Jewel / Rich | Luxury, events, sophisticated | palettes/jewel-rich.md |
| Monochrome | Dramatic, typography-focused | palettes/monochrome.md |
Or derive from OKLCH — pick a hue, build bg/fg/accent at different lightnesses, tint everything toward that hue.