Miguel Angel Simon Sierra
cf7c1d7609
Scaffolded projects' npm run check now invokes the single check command instead of chaining lint, validate, and inspect (three Chrome boots become one). The CLI skill, its correctness reference, the entry skill's capability map, README/docs catalog rows, the Mintlify CLI page (new check section, deprecation banner on inspect), template CLAUDE/AGENTS (byte-identical), root CLAUDE/AGENTS, and every creation-workflow skill that taught the old sequence all point at check. snapshot keeps its standalone sections; validate/inspect stay documented as deprecated aliases with their check equivalents.
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
hyperframes 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.