create-yss-spec 2.1.8 → 2.1.9

package/template/.trae/skills/web-design-engineer/references/critique-guide.md

@@ -1,226 +0,0 @@
-# Critique Mode — Detailed Reference
-
-Read this when running Step 7 of the workflow (user asked for review, or self-check before delivery). The main `SKILL.md` already covers the **5 dimensions and output format**. This file provides **scoring rubrics, per-output-type weighting, and the common-issue catalog**.
-
-**Critique the design, not the designer.** Be specific, actionable, and grounded in design language — not vague taste claims.
-
----
-
-## The Five Dimensions — Detailed Rubrics
-
-### 1. Philosophy Alignment
-
-How well does every detail trace back to the chosen design direction (Pentagram-style information architecture, Kenya Hara-style minimalism, etc.)?
-
-| Score | Standard |
-|---|---|
-| 9–10 | Every detail embodies the chosen philosophy; nothing reads as "borrowed from elsewhere" |
-| 7–8 | Direction is correct, signature traits land, 1–2 minor drift moments |
-| 5–6 | Intent visible, but mixed-in foreign elements dilute purity (e.g., "minimalism" with 6 cards per row) |
-| 3–4 | Surface mimicry only; the underlying values aren't understood |
-| 1–2 | No discernible relationship to any stated direction |
-
-**What to look for**:
-- Are signature moves of the chosen designer/studio actually present?
-- Do color, type, layout, motion all agree on the same philosophy?
-- Any "self-contradicting" elements? (Picked Kenya Hara then crammed the page full → contradiction)
-
-### 2. Visual Hierarchy
-
-Does the eye flow where the designer intends?
-
-| Score | Standard |
-|---|---|
-| 9–10 | Eye flows naturally along the intended path; zero friction reading the information |
-| 7–8 | Primary/secondary clear; 1–2 spots where hierarchy is muddy |
-| 5–6 | Title vs. body distinguishable, but middle layers (subtitles, captions) collapse together |
-| 3–4 | Information sits flat with no clear entry point |
-| 1–2 | Chaotic — viewer doesn't know where to look first |
-
-**What to look for**:
-- Title vs. body size ratio ≥ 2.5× (ideally 4–6× for hero)?
-- Color / weight / size building 3–4 clear levels?
-- Whitespace actively guiding the eye?
-- **Squint test**: squint at the screen — is the hierarchy still legible?
-
-### 3. Craft Quality
-
-Pixel-level execution: alignment, spacing, color discipline.
-
-| Score | Standard |
-|---|---|
-| 9–10 | Pixel-perfect; alignment, spacing, color all flawless |
-| 7–8 | Refined overall; 1–2 minor alignment or spacing issues |
-| 5–6 | Basically aligned, but spacing is inconsistent and color use is unsystematic |
-| 3–4 | Obvious alignment errors, chaotic spacing, too many colors |
-| 1–2 | Sloppy — looks like a draft |
-
-**What to look for**:
-- Consistent spacing system (8pt grid: 8 / 16 / 24 / 32 / 48 / 64)?
-- Same-class elements use identical spacing?
-- Color count controlled (typically ≤ 4 — primary + accent + neutral scale + 1 emphasis)?
-- Font families ≤ 2 (1 display + 1 body)?
-- Edges align precisely?
-
-### 4. Functionality
-
-Does each element earn its place?
-
-| Score | Standard |
-|---|---|
-| 9–10 | Every element serves a goal; zero redundancy |
-| 7–8 | Function-led overall, with minor decoration that could be cut |
-| 5–6 | Usable, but obvious decorative elements compete for attention |
-| 3–4 | Form > function; users have to work to find information |
-| 1–2 | Decoration drowns the content's ability to communicate |
-
-**What to look for**:
-- The deletion test: "If I delete this element, does the design get worse?" If no → delete
-- Is the CTA / key information in the most prominent position?
-- Anything added "because it looked good"?
-- Is the information density appropriate for the medium? (PPT sparse; PDF can be denser; landing page conversion-focused)
-
-### 5. Originality
-
-Avoids clichés while staying coherent within the philosophy.
-
-| Score | Standard |
-|---|---|
-| 9–10 | Refreshing; finds a unique expression *within* the chosen philosophy |
-| 7–8 | Has its own ideas; not template-by-numbers |
-| 5–6 | Average; reads as a template execution |
-| 3–4 | Heavy use of clichés (gradient orbs for "AI", chat bubbles for "conversation") |
-| 1–2 | Pure template / stock-asset assembly |
-
-**What to look for**:
-- Has it avoided the AI-slop list (purple gradients, emoji icons, left-border accent cards, Inter as display)?
-- Is there at least one "unexpected but right" decision?
-- Any element that screams "made by AI"?
-
----
-
-## Per-Output-Type Weighting
-
-Different outputs need different priorities. When scoring, weight these dimensions higher for each context:
-
-| Output type | Most important | Secondary | Can relax |
-|---|---|---|---|
-| Landing page / marketing site | Functionality, Visual hierarchy | Originality | — (must be all-around) |
-| Dashboard / data product | Functionality, Craft quality | Visual hierarchy | Originality (clarity wins) |
-| HTML slide deck | Visual hierarchy, Functionality | Craft | Originality (legibility wins) |
-| Mobile app prototype | Functionality, Craft | Visual hierarchy | Philosophy alignment (usability wins) |
-| Brand launch animation / hero film | Originality, Visual hierarchy | Philosophy | Functionality (it's the moment, not the form) |
-| Editorial / portfolio | Originality, Philosophy | Visual hierarchy | Functionality (vibe matters most) |
-| Documentation site | Functionality, Visual hierarchy | Craft | Originality (find-the-answer wins) |
-| Interactive prototype for user testing | Functionality, Visual hierarchy | Craft | Originality (testing the flow, not the look) |
-
----
-
-## Common Issues — Top 10 Catalog
-
-Use these as a checklist when running a critique. Each entry has the issue, why it matters, and the fix.
-
-### 1. AI-tech cliché
-**Issue**: Gradient orbs, digital rain, blue circuit boards, robot faces
-**Why it's a problem**: Audience is exhausted by these — your product becomes indistinguishable
-**Fix**: Use abstract metaphors instead of literal symbols (e.g., a "conversation" metaphor instead of a chat bubble icon)
-
-### 2. Insufficient type-size hierarchy
-**Issue**: Title and body are too similar in size (< 2.5×)
-**Why**: Users can't find key information quickly
-**Fix**: Title at least 3× body (16px body → 48–64px title; for hero, 6× is normal)
-
-### 3. Too many colors
-**Issue**: 5+ colors in use without a clear primary/secondary structure
-**Why**: Visual chaos; weak brand identity
-**Fix**: Limit to 1 primary + 1 secondary + 1 accent + grayscale; everything else has to justify itself
-
-### 4. Inconsistent spacing
-**Issue**: Element spacing chosen ad-hoc with no system
-**Why**: Reads as unprofessional; visual rhythm broken
-**Fix**: Adopt an 8pt grid (only use spacing values from {8, 16, 24, 32, 48, 64, 96})
-
-### 5. Insufficient whitespace
-**Issue**: Every region is filled with content
-**Why**: Cognitive overload reduces information transfer; dense ≠ informative
-**Fix**: Whitespace should be at least 40% of total area (60%+ for minimalist)
-
-### 6. Too many fonts
-**Issue**: 3+ font families in use
-**Why**: Visual noise; weakens unity
-**Fix**: At most 2 (1 display + 1 body); use weight and size variation for richness
-
-### 7. Inconsistent alignment
-**Issue**: Mixed left-, center-, and right-aligned blocks
-**Why**: Breaks visual order
-**Fix**: Pick one alignment (typically left) and apply globally; centered alignment only for hero / pull-quote moments
-
-### 8. Decoration eclipses content
-**Issue**: Background patterns / gradients / shadows steal focus from primary content
-**Why**: Inverts the priority — users came for information, not for decoration
-**Fix**: Apply the deletion test: "if I remove this decoration, does the design get worse?" If no → remove
-
-### 9. Cyber-neon overuse
-**Issue**: Dark navy `#0D1117` + neon-glow accents
-**Why**: This is the GitHub-dark / "AI dev tool" cliché — every clone looks the same
-**Fix**: Pick a more distinctive palette; if dark mode is mandatory, choose a non-default base (deep warm gray, near-black with hint of color)
-
-### 10. Information density mismatched to medium
-**Issue**: A wall of text on a slide; 10 elements crammed into a social cover
-**Why**: Different media have different optimal density
-**Fix**:
-- Slides: 1 core idea per page
-- Cover image: 1 visual focal point
-- Infographic: layered (overview → detail)
-- PDF / docs: can be dense, but needs clear navigation
-
----
-
-## Output Template (copy this when delivering a critique)
-
-```markdown
-## Design Critique
-
-**Overall: X.X / 10** [Excellent (8+) / Good (6–7.9) / Needs work (4–5.9) / Failing (<4)]
-
-**By dimension**:
-- Philosophy alignment: X / 10 — [one-sentence reason]
-- Visual hierarchy: X / 10 — [one-sentence reason]
-- Craft quality: X / 10 — [one-sentence reason]
-- Functionality: X / 10 — [one-sentence reason]
-- Originality: X / 10 — [one-sentence reason]
-
-### Keep
-- [Specific things done well, in design language — not "the colors are nice", say "the muted terracotta against warm off-white reads as confident and editorial"]
-
-### Fix (sorted by severity)
-
-**1. [Issue name]** — ⚠️ Critical / ⚡ Important / 💡 Polish
-- Current: [what it looks like now]
-- Why: [why it's a problem, anchored in a principle above]
-- Fix: [concrete change with specific values — "increase title size from 32px to 56px", not "make titles bigger"]
-
-**2. [Issue name]** — ⚠️ / ⚡ / 💡
-…
-
-### Quick Wins (top 3 if you only have 5 minutes)
-- [ ] [Highest-impact change that takes the least time]
-- [ ] [Second]
-- [ ] [Third]
-```
-
----
-
-## Critique Anti-Patterns
-
-❌ **Vague taste claims**: "the colors are off" → bad. "The accent saturation is too high — at oklch(0.65 0.25 25) it competes with the primary; reduce to 0.18 chroma to subordinate it" → good.
-
-❌ **Praise without specifics**: "looks great!" provides zero learning. Always say *what* is great and *why*.
-
-❌ **Mixing severity**: putting a critical hierarchy bug next to a polish-level color tweak in the same list. Always sort by ⚠️ → ⚡ → 💡.
-
-❌ **More than 7 fix items**: cognitive overload. If there are more, group them — "five spacing inconsistencies" as one item, not five.
-
-❌ **Critiquing without grounding**: every "Fix" should reference a principle (hierarchy, craft, philosophy, etc.) so the user understands the *why*, not just the *what*.
-
-❌ **Critiquing the designer instead of the design**: "you didn't think this through" is unhelpful and not the agent's role. "This element doesn't earn its place — consider removing" is the right framing.

package/template/.trae/skills/web-design-engineer/references/design-directions.md

@@ -1,188 +0,0 @@
-# Design Direction Advisor — Extended Reference
-
-Read this when the request is vague ("make something nice", "I don't know what style I want") and no design context exists. The main `SKILL.md` already covers the **mechanism** (3 differentiated directions, named designer references, hard rule against same-school picks). This file provides the **school taxonomy** — six high-level philosophical lenses, each with named anchors and the sample copy you use to recommend it.
-
-> **Terminology lock**: this file deals in **schools** (six high-level lenses) and **anchors** (named studios / brands / designers per school). The companion folder `style-recipes/` contains 25 **recipe** files — one file per anchor — with concrete, ready-to-paste configurations. When a user picks a school here, hand them off to the recipe files in that school for concrete palette / typography / spacing values. Load only the recipe files you actually need; the catalog index is at `style-recipes/INDEX.md`.
-
----
-
-## How to Use This File
-
-1. Read the user's request and the four positioning questions (narrative role / viewing distance / visual temperature / capacity)
-2. Pick **3 schools from different rows** below that genuinely fit the user's context
-3. Recommend each with: named designer/studio + 2–3 lines of "why this fits you" + 3–4 signature visual cues + (optional) one famous touchstone work
-4. Wait for the user to pick one (or remix two)
-5. **After the user picks a school → read 2–3 recipe files from `style-recipes/` in that school** (e.g., picked *Information Architecture* → read `style-recipes/pentagram.md` + `style-recipes/bloomberg-terminal.md` + `style-recipes/tufte-dataink.md`). The recipe files carry the concrete values; this file does not duplicate them.
-6. The chosen recipe becomes the design context — write it into `brand-spec.md` and proceed to the main workflow
-
----
-
-## The Six Schools (1 of 3 must come from each different row)
-
-### 1. Information Architecture
-
-**Vibe**: Rational, data-driven, restrained, hierarchy-led
-**Best for**: Safe / professional / B2B / data products / institutional
-**Why it works**: Treats the page as a *system* of typographic and grid relationships. The "design" disappears so the information speaks.
-
-| Anchor | What to borrow |
-|---|---|
-| **Pentagram** (Paula Scher, Michael Bierut) | Bold typography as image; identity through type relationships; sparing color use |
-| **Edward Tufte** | Maximum data-ink ratio; small multiples; smallest sufficient difference |
-| **Massimo Vignelli** | Helvetica-style restraint; strict grid; 6 typefaces is enough for a lifetime |
-| **Bloomberg Terminal** | Mission-critical density; amber-on-near-black; monospaced data |
-| **NYT / Broadsheet editorial** | Multi-deck hierarchy; serif headlines; place-rich photography |
-
-**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`pentagram`](./style-recipes/pentagram.md) · [`vignelli-swiss-helvetica`](./style-recipes/vignelli-swiss-helvetica.md) · [`bloomberg-terminal`](./style-recipes/bloomberg-terminal.md) · [`tufte-dataink`](./style-recipes/tufte-dataink.md) · [`nyt-the-daily`](./style-recipes/nyt-the-daily.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
-
-**Sample copy when recommending**:
-> "Pentagram-style information architecture — your dashboard becomes a system of typographic relationships rather than a UI. Headlines do the heavy visual lifting; everything else recedes. Best when you want institutional credibility and your data is the hero."
-
----
-
-### 2. Editorial / Minimalist
-
-**Vibe**: Whitespace, refined typography, quiet luxury, considered
-**Best for**: Premium / high-end / quiet / lifestyle / prestige B2C
-**Why it works**: Treats whitespace as the primary design material. The reader/viewer gets room to breathe; restraint reads as confidence.
-
-| Anchor | What to borrow |
-|---|---|
-| **Kenya Hara (MUJI)** | Whiteness as a value; *ex-formation*; emptiness as fullness |
-| **Apple HIG / Marketing** | Generous negative space; hero product on white; one-thought-per-screen |
-| **Dieter Rams (Braun)** | "Less but better"; honest materials; functional decoration is a contradiction |
-| **Aesop** | Cream/sage palette; serif copy as conversation; product as protagonist |
-| **Monocle** | Magazine-grade kicker / headline / dek hierarchy; international considered |
-
-**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`apple-hig`](./style-recipes/apple-hig.md) · [`muji-kenya-hara`](./style-recipes/muji-kenya-hara.md) · [`aesop`](./style-recipes/aesop.md) · [`dieter-rams-braun`](./style-recipes/dieter-rams-braun.md) · [`monocle-magazine`](./style-recipes/monocle-magazine.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
-
-**Sample copy when recommending**:
-> "Kenya Hara-style editorial minimalism — the page is mostly whitespace, with one serif headline carrying emotional weight and the product anchored in a single hero shot. Best when premium positioning matters more than feature density."
-
----
-
-### 3. Motion / Experimental
-
-**Vibe**: Bold, generative, sensory, kinetic, technical
-**Best for**: Distinctive / launch films / brand moments / awwwards-style / tech storytelling
-**Why it works**: Movement and surprise are the brand. Static screenshots can't capture the experience.
-
-| Anchor | What to borrow |
-|---|---|
-| **Field.io** | Generative type and form; data-driven motion; the page is a system that *makes* itself |
-| **Active Theory** | WebGL hero moments; physics-driven interactions; cinematic transitions |
-| **Resn** | Storytelling through scroll; payoff for exploration; surprise is the reward |
-
-**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`field-io`](./style-recipes/field-io.md) · [`active-theory`](./style-recipes/active-theory.md) · [`resn-storytelling`](./style-recipes/resn-storytelling.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
-
-> Note: Vercel / Linear marketing pages use motion *as restraint*, not as the show — they live in the **Modern Tool / Builder SaaS** school below, not here. Reach for this school only when motion is genuinely the brand.
-
-**Sample copy when recommending**:
-> "Field.io-style motion-led identity — the page generates itself in front of the visitor through choreographed scroll-driven sequences. Best when the launch *moment* matters and your audience will share clips. Note: this is the most labor-intensive of the three; budget accordingly."
-
----
-
-### 4. Brutalist / Raw
-
-**Vibe**: Anti-design, honest, unpolished, confrontational
-**Best for**: Differentiated / confident / counter-culture / publishing / artist platforms
-**Why it works**: Ugly-on-purpose reads as authentic in a sea of polished AI defaults. The lack of consensus aesthetic *is* the aesthetic.
-
-| Anchor | What to borrow |
-|---|---|
-| **Are.na** | Raw HTML feel; system fonts on purpose; content > chrome |
-| **Bloomberg Businessweek covers** (Richard Turley era) | Typographic violence; magazine grid abused; copy as image |
-| **Balenciaga** (post-2017) | Default browser styling weaponized; hero text in Helvetica at absurd scale |
-| **Craigslist (yes, really)** | Information density without apology; everything is a link |
-
-**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`are-na`](./style-recipes/are-na.md) · [`bloomberg-businessweek-turley`](./style-recipes/bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./style-recipes/balenciaga-post-2017.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
-
-**Sample copy when recommending**:
-> "Are.na/Bloomberg-style brutalism — system fonts, harsh type contrast, no rounded corners, no shadows. Confrontational on purpose. Best when you're a strong contrarian voice and want to repel the crowd that wants 'modern SaaS.' Warning: half-measures here look broken, not bold."
-
----
-
-### 5. Warm Humanist
-
-**Vibe**: Approachable, organic, hand-touched, friendly without being childish
-**Best for**: Lifestyle / education / approachable B2C / community products / health
-**Why it works**: Conveys that real humans made this for real humans. Counters the "robot wrote my landing page" perception.
-
-| Anchor | What to borrow |
-|---|---|
-| **Mailchimp** (early Freddie era) | Hand-drawn marks; warm illustration; personality in microcopy |
-| **Stripe Press** | Editorial serif + warm palette + tactile object photography |
-| **Studio Dumbar** | Identity through movement and personality, not through restraint |
-| **Headspace / Calm** | Soft pastels, rounded everything, breathing-pace motion |
-
-**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`mailchimp-freddie`](./style-recipes/mailchimp-freddie.md) · [`stripe-press`](./style-recipes/stripe-press.md) · [`headspace-meditation`](./style-recipes/headspace-meditation.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
-
-> Note: Notion (pre-AI era) borrows from this school's friendly tone but lives in the **Modern Tool / Builder SaaS** school below — it's a tool first, warmth second.
-
-**Sample copy when recommending**:
-> "Stripe Press / early Mailchimp warmth — humanist serifs, cream palette, illustrations that feel hand-touched. Best when you want trust and approachability over institutional polish. Tone is 'friend who happens to be expert,' not 'expert addressing client.'"
-
----
-
-### 6. Modern Tool / Builder SaaS
-
-**Vibe**: Quiet luxury for tools, hairline detail, warm dark + monospace accents
-**Best for**: Developer tools, B2B SaaS, AI tools, infrastructure / platform products, productivity apps
-**Why it works**: Confident restraint reads as "made by people who use tools," not "made by marketers." Hairline borders, monospace shortcut chips, and a single accent color signal craft-led culture without shouting. This is the most under-served school in AI-default output — every model wants to reach for the purple-pink-blue gradient instead.
-
-| Anchor | What to borrow |
-|---|---|
-| **Linear** | Hairline 1px borders, warm dark ground, selective purple accent < 5% of pixels, keyboard-first chips |
-| **Vercel** (recent) | Black + white precision broken by *one* feathered gradient mesh; deploy-log realism in the hero |
-| **Raycast** | Glassy command-palette as hero; per-extension color dots used as small accents |
-| **Notion** (pre-AI era) | Friendly serif headlines + emoji-as-icon on cream surfaces; structure first, warmth second |
-
-**Concrete starting points** (each is a single file in `style-recipes/` — read one): [`linear`](./style-recipes/linear.md) · [`vercel-mesh`](./style-recipes/vercel-mesh.md) · [`raycast`](./style-recipes/raycast.md) · [`notion-pre-ai`](./style-recipes/notion-pre-ai.md) — each carries the palette, typography, spacing, and signature moves to paste straight into Step 3.
-
-**Sample copy when recommending**:
-> "Linear-style modern-tool aesthetic — warm dark ground, hairline 1px borders, a single purple accent used on less than 5% of pixels, monospace shortcut chips. Best when your audience is technical and 'serious but designed' matters more than 'fun and accessible.' This is the recipe that defends most directly against AI-default Inter + blue button + 16px-radius output."
-
----
-
-## When the User Picks (or Remixes)
-
-Common user responses:
-
-- **"I'll go with #2."** → Direction confirmed. Write it into `brand-spec.md`. Proceed to Step 2 with this as design context.
-- **"I like A's color but C's layout."** → Confirm the remix in writing ("So: minimalist editorial palette + motion-led layout choreography. Right?"), then proceed.
-- **"None of these feel right — show me more."** → Ask one targeted question to narrow ("Are you closer to formal/institutional or playful/expressive?"), then offer 3 fresh directions from rows you didn't show before.
-- **"I don't know, you pick."** → Pick the safest one (usually Editorial / Minimalist), state your reasoning, and propose a 5-minute v0 to validate before committing.
-
----
-
-## AI-Prompt Templates (when generating imagery to support a direction)
-
-Format: `[philosophy DNA] + [content description] + [technical params]`
-
-✅ **Good** (specific characteristics):
-> "Kenya Hara-influenced minimalism with 80% whitespace, single muted terracotta (#C04A1A) accent, GT Sectra serif headline, single product hero on warm off-white (#F2EFE8) ground, soft top-down lighting, 3:2 aspect"
-
-❌ **Bad** (style names without DNA):
-> "minimalist style, premium feel, high quality"
-
-Always include:
-- Color HEX (not "warm" / "cool")
-- Aspect ratio and dimensions
-- Composition rules (rule-of-thirds, centered, asymmetric)
-- What to *avoid* (e.g., "no purple gradient, no emoji, no rounded cards")
-
-> Each recipe file in `style-recipes/` ships a pre-written **AI prompt seed** tuned to that recipe's DNA — start from the one you're using rather than writing prompts from scratch.
-
----
-
-## Anti-Patterns in Direction Recommendation
-
-❌ **Recommending 3 picks from the same row** — the user can't tell them apart; the entire point of "differentiated directions" collapses
-
-❌ **Recommending "minimalism" / "modern" / "clean"** as the direction name — these are not directions, they are AI-default words. Always anchor on a named designer/studio.
-
-❌ **Recommending without any "why this fits you"** — the user wanted *guidance*, not a multiple-choice quiz. Each option must explain its fit to their context (audience, purpose, budget, brand maturity).
-
-❌ **Showing 5+ directions** — choice paralysis. 3 is the sweet spot. If the first 3 all miss, ask one narrowing question and offer 3 fresh ones.
-
-❌ **Asking the user to score each direction 1–10** — that's offloading the recommendation back to them. Make a recommendation; the user will agree or push back.

package/template/.trae/skills/web-design-engineer/references/style-recipes/INDEX.md

@@ -1,145 +0,0 @@
-# Style Recipes — Catalog Index
-
-A catalog of 25 named, anchored design recipes — each one tied to a real brand / studio / designer and **stored as its own file in this directory**. Read this INDEX to discover what's available and how to choose; then read **one recipe file** to get the concrete values for Step 3.
-
-```
-references/style-recipes/
-├── INDEX.md                       ← you are here
-├── apple-hig.md
-├── muji-kenya-hara.md
-├── aesop.md
-├── ... (25 recipe files total)
-```
-
-This catalog is the **anchored library**; `../design-directions.md` is the **school taxonomy** for vague-request conversations. The two work together:
-
-| Route | Tool | When |
-|---|---|---|
-| User has no idea — needs guidance | `../design-directions.md` (6-school 3-pick conversation) | "Make me something nice" / "I don't know what style I want" |
-| User has an anchor in mind | Read **one** file here directly | "Make it Linear-style" / "Stripe Press feeling" / "Are.na vibe" |
-| Direction Advisor narrowed to a school but user wants concreteness | Read this INDEX for the school's recipes → then read the 2–3 specific recipe files | Mid-conversation handoff |
-
----
-
-## When to Read Recipe Files
-
-**Read a single recipe file** when:
-
-1. **The user names an anchor by brand, studio, or designer** — "make a Linear-style landing page", "Aesop-feeling product page", "MUJI quietness", "Pentagram-grade type system". Read **only that anchor's file** (`linear.md`, `aesop.md`, etc.) — never the whole catalog.
-2. **The Direction Advisor narrowed to a school** — read this INDEX to see which recipes live in that school, then read 2–3 specific files to present the user concrete choices.
-3. **You're in Step 3 and need a known-good palette / typography / spacing combo** — pick the closest recipe by school or best-for table below, then read that single file and adapt.
-
-Do **not** load every recipe file up front. The entire catalog is ~1400 lines if loaded together; loading one recipe is ~50 lines. **Loading the whole catalog when you only need one recipe is the exact anti-pattern this split is designed to prevent.**
-
-Do **not** read recipe files when:
-- The user provided their own brand assets / Figma / codebase — extract from those instead (Asset > Spec).
-- The task is dictated by an existing UI you're extending — match the visual vocabulary already there, don't impose a recipe.
-- The user gave you a screenshot of a specific reference page — that screenshot *is* the recipe; extract directly.
-
----
-
-## File Format Conventions (every recipe file follows this anatomy)
-
-- **Title line** — `# <anchor-id> — <Human-readable name>`
-- **Anchor & school** — which real-world reference and which Direction-Advisor school it belongs to
-- **Vibe & best-for** — 1-line vibe summary plus the scenarios it actually serves
-- **Touchstone** — at least one named real product / object / publication to look at (search and verify before relying on memory)
-- **Palette** — hex values, named by role (ink / surface / accent / ground). Always restricted; never a 12-stop ramp.
-- **Typography** — real font names with weight numbers and size guidance. No "Inter / Roboto" fallbacks unless the anchor itself uses them.
-- **Spacing system** — concrete value ladder
-- **Radius / Shadow / Motion character** — described in **design language**, not code
-- **Signature moves** — 3–5 specific, opinionated, copy-able design decisions that make this recipe *recognisable*. This is the design DNA.
-- **Avoid** — anti-patterns inside this recipe (i.e., things that would silently turn it into AI slop)
-- **AI prompt seed** — when generating supporting imagery, what to ask for to stay in DNA
-- **Don't use when** — the boundary; situations where this recipe will misfire
-- **Footer** — peer recipes in the same school + a link back to this INDEX
-
-**These files contain no code.** Hex codes, font names, and spacing ladders are *design tokens described in words*, not code. The agent translates them to CSS / JSX in Step 3+ using the project's stack.
-
----
-
-## Index 1 — By School
-
-| School | Recipes |
-|---|---|
-| **Editorial / Minimalist** | [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md) |
-| **Information Architecture** | [`pentagram`](./pentagram.md) · [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`tufte-dataink`](./tufte-dataink.md) · [`nyt-the-daily`](./nyt-the-daily.md) |
-| **Modern Tool / Builder SaaS** | [`linear`](./linear.md) · [`vercel-mesh`](./vercel-mesh.md) · [`raycast`](./raycast.md) · [`notion-pre-ai`](./notion-pre-ai.md) |
-| **Motion / Experimental** | [`field-io`](./field-io.md) · [`active-theory`](./active-theory.md) · [`resn-storytelling`](./resn-storytelling.md) |
-| **Brutalist / Raw** | [`are-na`](./are-na.md) · [`bloomberg-businessweek-turley`](./bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md) |
-| **Warm Humanist** | [`mailchimp-freddie`](./mailchimp-freddie.md) · [`stripe-press`](./stripe-press.md) · [`headspace-meditation`](./headspace-meditation.md) |
-| **Specialty / Genre** (not surfaced via Advisor) | [`y2k-retrofuturism`](./y2k-retrofuturism.md) · [`mid-century-modern`](./mid-century-modern.md) |
-
-The first 6 schools mirror the Direction Advisor's 6 schools (in `../design-directions.md`) — so when the Advisor picks one of those, you know which recipe files to surface. The 7th school (Specialty / Genre) is **only reachable through direct anchor naming** — users wanting Y2K or Mid-Century always arrive with the anchor in hand, never through Advisor.
-
-## Index 2 — By Best-For
-
-| Scenario | First-choice recipes |
-|---|---|
-| B2B SaaS / developer tools | [`linear`](./linear.md) · [`vercel-mesh`](./vercel-mesh.md) · [`raycast`](./raycast.md) · [`pentagram`](./pentagram.md) |
-| Premium consumer / lifestyle | [`aesop`](./aesop.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`stripe-press`](./stripe-press.md) · [`monocle-magazine`](./monocle-magazine.md) |
-| Data product / dashboard / finance | [`bloomberg-terminal`](./bloomberg-terminal.md) · [`tufte-dataink`](./tufte-dataink.md) · [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) |
-| Editorial / publishing / longform | [`nyt-the-daily`](./nyt-the-daily.md) · [`monocle-magazine`](./monocle-magazine.md) · [`stripe-press`](./stripe-press.md) · [`mailchimp-freddie`](./mailchimp-freddie.md) |
-| Launch moment / brand film / awwwards | [`field-io`](./field-io.md) · [`active-theory`](./active-theory.md) · [`resn-storytelling`](./resn-storytelling.md) · [`vercel-mesh`](./vercel-mesh.md) |
-| Differentiated / counter-culture / artist | [`are-na`](./are-na.md) · [`bloomberg-businessweek-turley`](./bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md) |
-| Approachable B2C / community / health | [`mailchimp-freddie`](./mailchimp-freddie.md) · [`headspace-meditation`](./headspace-meditation.md) · [`notion-pre-ai`](./notion-pre-ai.md) |
-| Retro / theme / decade-coded | [`y2k-retrofuturism`](./y2k-retrofuturism.md) · [`mid-century-modern`](./mid-century-modern.md) |
-
-## Index 3 — By Mode (light / dark / either)
-
-| Mode | Recipes |
-|---|---|
-| Light-first | [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md) · [`pentagram`](./pentagram.md) · [`nyt-the-daily`](./nyt-the-daily.md) · [`stripe-press`](./stripe-press.md) · [`headspace-meditation`](./headspace-meditation.md) · [`mailchimp-freddie`](./mailchimp-freddie.md) · [`mid-century-modern`](./mid-century-modern.md) |
-| Dark-first | [`linear`](./linear.md) · [`vercel-mesh`](./vercel-mesh.md) · [`raycast`](./raycast.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`field-io`](./field-io.md) · [`active-theory`](./active-theory.md) · [`resn-storytelling`](./resn-storytelling.md) · [`y2k-retrofuturism`](./y2k-retrofuturism.md) |
-| Works either way | [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) · [`tufte-dataink`](./tufte-dataink.md) · [`notion-pre-ai`](./notion-pre-ai.md) · [`are-na`](./are-na.md) · [`bloomberg-businessweek-turley`](./bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md) |
-
----
-
-## Cross-Cutting Anti-Patterns (apply to all 25 recipes)
-
-These apply across every recipe in this catalog. Violating them collapses the recipe back into AI-default slop. **Read these even before reading an individual recipe file** — they're not duplicated in each file.
-
-### ❌ Don't combine two recipes mid-page
-
-Pick **one** recipe and instantiate it fully. Adding "Linear with Aesop accents" or "Pentagram with a Y2K hero" usually reads as confused rather than original. Two-recipe remixes work only when the user explicitly asks and you can articulate *why* the marriage is coherent (e.g., "Aesop palette on Pentagram grid for an apothecary catalog with editorial bones").
-
-### ❌ Don't half-commit to brutalism / Y2K / mid-century
-
-The Specialty / Genre and Brutalist / Raw recipes need full commitment. Half-Y2K reads as "broken modern site". Half-brutalism reads as "unfinished design". Either go all-in or pick a different recipe.
-
-### ❌ Don't default to Inter / Roboto / Arial / system-ui as display
-
-If your chosen recipe specifies a font, use that font (or a real substitute *named in the recipe*). Defaulting to Inter erases the recipe's typographic identity, which is usually 30–40% of its signature.
-
-### ❌ Don't import every color in the palette
-
-Each recipe lists a restricted palette intentionally. If a recipe gives you 4 colors, don't add a 5th to "balance things out". The restriction *is* the recipe.
-
-### ❌ Don't add your own AI-default touches "to make it pop"
-
-If the recipe says "no shadow," don't add a subtle shadow. If it says "no gradient," don't add a gradient mesh. If it says "no emoji," don't add one. Every AI-default addition you make reduces the recipe's distinctiveness toward the mean.
-
-### ❌ Don't fake the photography style with CSS
-
-Recipes like Aesop, Stripe Press, MUJI, Apple HIG, Mailchimp, and Headspace rely on a specific photography or illustration style. If you can't source / generate that imagery, **say so to the user** — don't substitute CSS shapes. A recipe with a real hero photograph at 60% quality lands better than the same recipe with a CSS substitute at 0% recognition value.
-
-### ❌ Don't invent new recipes silently
-
-If you find yourself drifting outside the listed recipes, **tell the user**: "None of the 25 recipes fits — here's what I propose instead." A new recipe deserves its own anchor, its own concrete values, and its own signature moves articulated. Drifting silently produces the AI-default that this whole catalog is built to prevent.
-
-### ❌ Don't read the whole catalog when you need one recipe
-
-Load only the recipe files you actually need. If the user said "Linear-style", read [`linear.md`](./linear.md) — not all 25. The 1-file-at-a-time pattern is what makes this catalog efficient; loading everything up front defeats progressive disclosure.
-
----
-
-## When None of the 25 Fits
-
-Options in this order:
-
-1. **Re-read the user's request** — sometimes the right recipe is obvious in hindsight (a "data-led research tool" is almost always [`tufte-dataink`](./tufte-dataink.md) or [`bloomberg-terminal`](./bloomberg-terminal.md), even when the user didn't name those)
-2. **Combine two recipes deliberately**, with explicit framing — see the warning above
-3. **Hand off to `../design-directions.md`** — propose 3 differentiated schools and let the user pick
-4. **Articulate a new recipe** — name an anchor, list concrete values, get user sign-off, then proceed
-
-Always make the recipe choice explicit in your Step 3 design-system declaration so the user can confirm before code starts.

package/template/.trae/skills/web-design-engineer/references/style-recipes/active-theory.md

@@ -1,49 +0,0 @@
-# active-theory — Active Theory (Cinematic WebGL)
-
-- **School**: Motion / Experimental
-- **Vibe**: Cinematic web experiences, WebGL heroes, physical-feeling interaction
-- **Best for**: Brand launch sites, game / entertainment products, "experience marketing" pieces
-- **Touchstone**: activetheory.net, NASA / Apple WWDC dev portals they've made, Doritos / movie tie-in launches
-
-**Palette**
-- Often a single dramatic hue from the project's content — black + one signature color from the brand or film
-- High contrast — deep black + bright accent
-- Tinted neutrals — never plain gray; gray-with-cast (cool blue cast for sci-fi, warm amber for cinematic)
-
-**Typography**
-- Display: a strong grotesque or a custom display face built for the campaign — Druk, Editorial New, ABC Diatype Mono
-- Body type secondary — most content rides over imagery; less reading, more witnessing
-- All-caps display common, with very tight or very open tracking depending on tone
-
-**Spacing**: cinematic — content sits centered or in unexpected corners against a full-bleed canvas
-
-**Radius**: 0
-
-**Shadow**: from WebGL lighting, not CSS
-
-**Motion**: feature-film-grade. Camera moves through a 3D space. Physics-driven debris / particles. The page is a stage.
-
-**Signature moves**
-- A full-screen WebGL hero scene that the user moves through (scroll = camera path)
-- Real-time physics or particle systems responding to cursor / device tilt
-- Carefully art-directed transitions between scenes (not generic fades)
-- Sound design integrated (subtle ambient audio that ducks during text passages)
-- A single moment of maximum impact — the recipe builds toward one payoff frame
-
-**Avoid**
-- Many small WebGL moments (one big set-piece is the recipe, not five small ones)
-- Trying to ship a content-heavy site this way (cinematic recipes work for marketing moments, not docs)
-- Reaching for off-the-shelf Three.js demos (this recipe demands hand-crafted scenes — generic WebGL reads as cheap)
-
-**AI prompt seed**
-> Cinematic VFX still, single dramatic moment from a sci-fi launch film, key light from one direction, deep shadows, single brand-accent hue floating in the scene, particle debris in air, 2.39:1 aspect.
-
-**Don't use when**
-- Performance / accessibility constraints rule out heavy WebGL
-- The product is utilitarian (this recipe is for moments, not for daily use)
-- The build budget is sub-3-weeks
-
----
-
-> **Same school — Motion / Experimental**: [`field-io`](./field-io.md) · [`resn-storytelling`](./resn-storytelling.md)  
-> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)