@damiangilgonzalez/harness 1.3.7

package/skills/ingeniero-diseno-web/references/failure-patterns.md

@@ -0,0 +1,159 @@
+# Contextual Failure Patterns
+
+Use this catalog to catch recurring AI-generated design failures. Read only the sections relevant to the artifact. These are strong defaults with explicit exceptions, not universal taste laws.
+
+## Contents
+
+- Marketing and Multi-section Pages
+- Layout and Components
+- Typography and Content
+- Imagery and Brand
+- Motion and Interaction
+- Dashboards and Product UI
+- Final Use
+
+## Marketing and Multi-section Pages
+
+### Repeated section header formula
+
+- **Default**: Do not put a tiny uppercase eyebrow above every heading.
+- **Why**: It creates a mechanically templated rhythm.
+- **Detect**: The same label + headline + paragraph stack appears in most sections.
+- **Exceptions**: Manuals, intentionally indexed editorial systems, or an established brand pattern.
+- **Repair**: Remove low-information labels; vary hierarchy using a lead sentence, image, number, quote, or direct headline.
+
+### Zigzag monotony
+
+- **Default**: Avoid three or more consecutive left/right image-text splits.
+- **Why**: Alternation alone is not composition.
+- **Detect**: Mirroring is the only difference between adjacent sections.
+- **Repair**: Introduce a full-width proof point, vertical narrative, comparison, gallery, diagram, or focused text break.
+
+### Default centered hero
+
+- **Default**: Do not choose centered headline + gradient + two CTAs without brief support.
+- **Why**: It is a statistical default, not a design decision.
+- **Exceptions**: Manifestos, launch statements, search-first utilities, and deliberately ceremonial pages.
+- **Repair**: Re-evaluate content hierarchy, asset role, audience, and viewport; choose the composition that makes those constraints clearest.
+
+### Decorative trust theater
+
+- **Default**: No fabricated metrics, testimonials, logos, security badges, or “used by” claims.
+- **Why**: False credibility is worse than an honest gap.
+- **Repair**: Use a labeled placeholder or request real proof.
+
+### CTA duplication
+
+- **Default**: Keep labels for the same intent consistent.
+- **Detect**: “Get started,” “Try free,” and “Create account” all route to the same action without a meaningful distinction.
+- **Exceptions**: Tested funnel copy or different commitment levels.
+- **Repair**: Normalize the label or clarify the distinct outcomes.
+
+## Layout and Components
+
+### Cardification
+
+- **Default**: Use containers only when grouping, selection, or elevation carries meaning.
+- **Detect**: Every paragraph, metric, and icon lives in a rounded card.
+- **Repair**: Use whitespace, alignment, dividers, typography, or one shared surface.
+
+### Bento without rhythm
+
+- **Default**: Every cell needs content and a compositional role.
+- **Detect**: Blank filler cells, uniform text-only tiles, or arbitrary spans.
+- **Repair**: Match cell count to content; create hierarchy through size, media, data, or interaction rather than empty geometry.
+
+### Shape drift
+
+- **Default**: Define a radius grammar and follow it.
+- **Detect**: Pills, sharp cards, soft cards, and circular controls appear without semantic rules.
+- **Repair**: Assign radius by component role and consolidate tokens.
+
+### Split-header filler
+
+- **Default**: Avoid a large left headline paired with a small floating right paragraph when the split communicates nothing.
+- **Repair**: Stack the content or give the second column a real visual, action, or evidence role.
+
+## Typography and Content
+
+### Generic display typography
+
+- **Default**: Do not reach automatically for Inter, Roboto, Arial, system-ui, Fraunces, or Instrument Serif as the identity-bearing display choice.
+- **Exceptions**: Existing brand/system requirements, accessibility contexts, or intentional platform neutrality.
+- **Repair**: Use the chosen recipe, supplied brand font, or a justified pairing.
+
+### Micro-label noise
+
+- **Detect**: Decorative version numbers, fake coordinates, weather, status dots, section numbers, or metadata that does not help the user.
+- **Repair**: Delete it or connect it to real state/content.
+
+### Copy-shaped decoration
+
+- **Detect**: Vague claims, fake precision, agency slogans, or captions written only to fill space.
+- **Repair**: Replace with user-provided truth, a clear placeholder, or fewer words.
+
+### Unreadable hero
+
+- **Detect**: CTA falls below the intended initial viewport, display text clips, or copy/image competition destroys hierarchy.
+- **Repair**: Recompose; do not enforce a universal word or line cap when the artifact needs a different reading experience.
+
+## Imagery and Brand
+
+### CSS as counterfeit asset
+
+- **Default**: Do not replace a recognizable product, logo, or interface with decorative CSS shapes.
+- **Repair**: Source official material, generate a clearly non-identity-critical extension, or expose an honest asset slot.
+
+### Image-label clutter
+
+- **Default**: Do not overlay pills and captions on imagery unless they identify, control, or explain it.
+- **Repair**: Move necessary metadata into a stable caption or remove it.
+
+### Generated-world drift
+
+- **Detect**: Multi-image output changes palette, material, lighting, typography character, device treatment, or brand symbols.
+- **Repair**: Reuse a visual bible and regenerate the divergent frame rather than patching it with unrelated decoration.
+
+## Motion and Interaction
+
+### Motion for spectacle only
+
+- **Default**: Every animation needs a hierarchy, feedback, causality, or narrative purpose.
+- **Detect**: Removing the animation changes no understanding or feedback.
+- **Repair**: Remove it, lower the Motion dial, or tie it to meaningful state.
+
+### Scroll-state rendering
+
+- **Default**: Do not update broad React state on every scroll or pointer frame.
+- **Repair**: Use CSS, motion values, IntersectionObserver, or an animation library appropriate to the stack.
+
+### Repeated spectacle
+
+- **Default**: Avoid multiple marquees, pinned chapters, magnetic controls, or competing ambient loops on one surface.
+- **Repair**: Select one signature moment and make other transitions quieter.
+
+### Missing reduced-motion path
+
+- **Default**: Motion beyond simple state feedback must collapse cleanly under reduced motion.
+- **Repair**: Preserve content order and interaction completion without relying on animation.
+
+## Dashboards and Product UI
+
+### Marketing styling on operational UI
+
+- **Detect**: Giant headlines, excessive whitespace, cinematic cards, and low-density gestures impede scanning.
+- **Repair**: Raise density, stabilize the grid, clarify state, and prioritize task completion.
+
+### Decorative data visualization
+
+- **Detect**: Gradients, 3D, shadows, or animation obscure comparison and scale.
+- **Repair**: Improve data-ink ratio, labels, semantic color, and accessible alternatives.
+
+### Happy-path-only components
+
+- **Detect**: Only populated success states exist.
+- **Repair**: Add relevant loading, empty, error, permission, disabled, and overflow states.
+
+## Final Use
+
+Report only consequential failures. Do not dump the whole catalog into the user-facing response. Fix safe in-scope problems directly; surface exceptions and tradeoffs when they affect intent.

package/skills/ingeniero-diseno-web/references/redesign-protocol.md

@@ -0,0 +1,123 @@
+# Existing UI and Redesign Protocol
+
+Read this reference before modifying an existing visual product.
+
+## Contents
+
+1. Classify the Mode
+2. Audit Before Editing
+3. Protected Contracts
+4. Modernization Order
+5. Dial Guidance
+6. Before-and-After Plan
+7. Verification
+
+## 1. Classify the Mode
+
+### Extension
+
+Add or change a bounded element inside the current system. Match the existing vocabulary. Do not “improve” unrelated surfaces.
+
+### Redesign · Preserve
+
+Modernize while retaining identity, information architecture, content voice, and behavioral contracts. Prefer targeted evolution.
+
+### Redesign · Overhaul
+
+Introduce a new visual language while retaining the agreed product, content, and technical contracts. Overhaul is not permission to rewrite everything.
+
+If preserve versus overhaul would materially change the result and the request is ambiguous, ask one focused question.
+
+## 2. Audit Before Editing
+
+Record the current state in project notes or a concise redesign brief.
+
+### Visual system
+
+- Color roles and actual usage ratios
+- Type families, scale, weights, and line lengths
+- Spacing rhythm and container widths
+- Radius, border, shadow, and elevation rules
+- Icons, illustration, photography, and image treatment
+- Motion durations, easing, triggers, and feedback style
+
+### Product and content
+
+- Page tree, navigation, key journeys, and conversion paths
+- Existing content blocks and their purpose
+- Brand voice, legal copy, localization, and real data
+- Loading, empty, error, disabled, and permission states
+
+### Technical contracts
+
+- Routes, slugs, anchors, and deep links
+- Form field names, order, validation, and autofill expectations
+- Analytics events, data attributes, test selectors, and experiment hooks
+- Component APIs and downstream consumers
+- Accessibility semantics, keyboard behavior, focus order, and announcements
+- SEO metadata, canonical URLs, structured data, and social cards
+
+### Quality debt
+
+Separate observations into:
+
+- **Preserve**: recognizable or contract-critical strengths
+- **Improve**: weak hierarchy, spacing, contrast, responsiveness, or craft
+- **Remove**: unsupported clutter, broken patterns, dead interactions, or fabricated content
+
+## 3. Protected Contracts
+
+Never change these silently:
+
+- Route structure, slugs, anchor IDs, or primary navigation labels
+- Brand logo, wordmark, or identity-critical assets
+- Form field names/order or submission behavior
+- Legal, consent, privacy, pricing, or compliance copy
+- Analytics events, selectors, and experiment identifiers
+- Existing accessibility wins
+- Public component APIs or persistent-state keys
+- User-provided content and real data
+
+Ask for authorization when the requested outcome genuinely requires a protected-contract change.
+
+## 4. Modernization Order
+
+Apply the lowest-risk lever that solves the problem, then reassess:
+
+1. Correct functional and accessibility failures.
+2. Repair hierarchy and typography.
+3. Normalize spacing, alignment, and responsive behavior.
+4. Consolidate tokens and remove rogue styling.
+5. Improve states and interaction feedback.
+6. Add justified motion.
+7. Recompose hero or key sections.
+8. Replace full blocks only when they cannot be repaired.
+
+In Preserve mode, stop once the brief is satisfied. Do not turn incremental work into a portfolio redesign.
+
+## 5. Dial Guidance
+
+- **Extension**: match all existing dials; set Brand Fidelity to 10.
+- **Preserve**: keep density and assets stable; change variance/motion by at most one point unless requested.
+- **Overhaul**: derive new variance/motion from the brief, but retain a content-density map so information is not lost.
+
+## 6. Before-and-After Plan
+
+For non-trivial redesigns, state:
+
+```text
+Mode:
+Preserve:
+Improve:
+Remove:
+Protected contracts:
+Design Read + dials:
+Highest-risk change:
+Rollback / fallback:
+```
+
+This is a decision record, not a long design essay.
+
+## 7. Verification
+
+The default pre-delivery self-check confirms the requested scope and protected contracts by inspection. Run executable browser acceptance only when the user explicitly asks for it; then use `browser-acceptance.md` and include regression checks for the preserved journeys.

package/skills/ingeniero-diseno-web/references/style-recipes/INDEX.md

@@ -0,0 +1,145 @@
+# 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/skills/ingeniero-diseno-web/references/style-recipes/active-theory.md

@@ -0,0 +1,49 @@
+# 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)

package/skills/ingeniero-diseno-web/references/style-recipes/aesop.md

@@ -0,0 +1,52 @@
+# aesop — Aesop Skincare
+
+- **School**: Editorial / Minimalist
+- **Vibe**: Apothecary refinement, sage and ink, serif copy as conversation
+- **Best for**: Premium consumer goods (skincare, candles, eyewear), restaurants with literary aspirations, hospitality
+- **Touchstone**: aesop.com, Aesop store windows, the brown amber bottle
+
+**Palette**
+- Ground: `#E8E4D9` (warm chamois) — sometimes `#F2EFE5`
+- Ink: `#1B1B1B` (true near-black for copy)
+- Sage muted: `#7A8470`
+- Amber bottle accent: `#7A4623` (used very sparingly, e.g., a single rule or seal mark)
+- Cream surface: `#F0EDE4`
+
+**Typography**
+- Display & body: a single transitional serif at every size — Suisse Works, Lyon Text, or GT Sectra (weight 400, italic available). Aesop pairs serif for body copy with a single sans for UI labels (Söhne or Helvetica Now).
+- Body size: 16–18px; line-height ~1.65
+- Labels in small caps (10–11px, letter-spaced 0.12em)
+
+**Spacing**: 8 / 16 / 24 / 40 / 72 / 120
+
+**Radius**: 0 throughout, including form fields. Aesop is square-edged.
+
+**Shadow**: none.
+
+**Motion**: subtle fades, slow drawer slide-ins (~450ms ease-out). Never spring-bounce.
+
+**Signature moves**
+- Body copy reads like product writing in a literary magazine — long, well-cadenced sentences, justified text, no marketing punchiness
+- Product is photographed on a warm chamois surface with a single sage prop (leaf, marble dish, linen) and a long shadow
+- Small-caps section labels (`INGREDIENTS` / `RITUAL`) above each block
+- All-text navigation in the masthead, letter-spaced
+- Asymmetric layouts: image left, generous right-margin block of copy; never centered-everything
+
+**Avoid**
+- Bold weights anywhere — Aesop is all regular and italic
+- Color other than sage / amber / ink — no blues, no purples, no UI-blue accents
+- Pop-up modals (Aesop's UI politely waits)
+- Lifestyle stock photography of smiling models — props and product only
+
+**AI prompt seed**
+> Amber-glass apothecary bottle on warm chamois #E8E4D9 textured paper, single linen napkin and dried sage sprig, raking afternoon window light, deep soft shadow at lower right, 4:5, editorial product photography, color grading warm with slight green cast.
+
+**Don't use when**
+- The product is software or digital-first — Aesop's tactile object photography defines half the recipe; you can't fake it with CSS
+- The audience expects price-comparison utility — Aesop never shows pricing prominently
+- The voice needs to be funny or casual — Aesop is sincere and slow
+
+---
+
+> **Same school — Editorial / Minimalist**: [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/apple-hig.md

@@ -0,0 +1,52 @@
+# apple-hig — Apple Human Interface
+
+- **School**: Editorial / Minimalist
+- **Vibe**: Generous space, hero product on white, one thought per screen
+- **Best for**: Premium hardware, premium software, "this product deserves a stage" feel
+- **Touchstone**: apple.com product pages, Apple keynote slides, HIG documentation
+
+**Palette**
+- Ground: `#FFFFFF` (paper-pure white) or `#000000` (deep black, hero film moments only)
+- Ink: `#1D1D1F` (Apple's not-quite-black)
+- Soft surface: `#F5F5F7`
+- Muted text: `#86868B`
+- Accent (sparingly): system-blue `#0071E3`
+
+**Typography**
+- Display: SF Pro Display (weight 600 for headlines, 400 for sub-display) — fall back to Inter Tight only when SF Pro is unreachable
+- Body: SF Pro Text at 17px, line-height ~1.47
+- Captions: SF Pro at 12–14px, weight 400, color `#86868B`
+
+**Spacing**: 4 / 8 / 16 / 24 / 40 / 64 / 96 / 160. Section breaks are large (160px+ vertical). Headlines breathe.
+
+**Radius**: 12 (small components) / 18 (cards) / 22 (large panels). Apple is rarely sharp-cornered, never gummy-bear rounded.
+
+**Shadow**: barely visible. `0 1px 2px rgba(0,0,0,0.04)` at most. Elevation through whitespace and color contrast, not shadow.
+
+**Motion**: cubic-bezier expo-out; durations 350–650ms for layout moves, 150–250ms for hover. Never bouncy. Often a slow Ken Burns on hero imagery.
+
+**Signature moves**
+- One product photograph centered on whitespace, occupying ~40% of the hero
+- Hero headline in big display weight, body line below in muted gray (`#86868B`), single CTA in system-blue text-link form (no chunky button on hero — that comes later)
+- Section anatomy: tiny eyebrow label → big headline → one paragraph → one product shot → repeat. No tabs, no cards, no bento.
+- Hairline `#D2D2D7` dividers between sections, never anything heavier
+- Numbers are display-weight characters (e.g., a stat reads `12.9″`, with the `″` set in a smaller weight)
+
+**Avoid**
+- Any gradient mesh, glow, or "tech atmosphere" — Apple's gradients are almost always subtle silver-to-charcoal on a product surface, not background decoration
+- Stacking multiple CTAs in the hero
+- Card grids of features (Apple uses long vertical sections, one idea each)
+- Emoji of any kind on marketing pages
+
+**AI prompt seed** (for hero imagery)
+> Studio-lit product photograph, single object centered on pure-white #FFFFFF ground, soft top-down diffused light, subtle floor reflection, 16:9, no text, no people, no shadow drama, color grading neutral.
+
+**Don't use when**
+- The product is software-only and doesn't have a "hero object" to photograph — you'll end up with a blank stage
+- The brand wants to feel scrappy / startup / accessible — Apple HIG reads as expensive and serious
+- Audience is anti-tech-corporate — it'll feel "stale Apple cosplay"
+
+---
+
+> **Same school — Editorial / Minimalist**: [`muji-kenya-hara`](./muji-kenya-hara.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/are-na.md

@@ -0,0 +1,55 @@
+# are-na — Are.na (Honest Web)
+
+- **School**: Brutalist / Raw
+- **Vibe**: System fonts on purpose, content > chrome, the web of the late 90s but considered
+- **Best for**: Indie tools, creative platforms, "research-flavored" products, artist communities
+- **Touchstone**: are.na, the Are.na annual
+
+**Palette**
+- Ground: `#FFFFFF`
+- Ink: `#000000`
+- Are.na blue link: `#0000EE` (the classic browser-default blue, used unironically)
+- Visited link: `#551A8B` (also classic browser-default)
+- Hairline: `#CCCCCC`
+- Optional: warm cream surface `#F4F1E8` for cards
+
+**Typography**
+- Display & body: system serif (Times / Georgia) and / or system sans (the OS's default sans) on purpose
+- No custom font loading — the recipe leans on letting the browser pick
+- Body at 14–16px, line-height ~1.45
+- Italic and underlined links (also browser-default)
+
+**Spacing**: 4 / 8 / 16 / 24 / 32. Tight. Content-dense.
+
+**Radius**: 0
+
+**Shadow**: none
+
+**Motion**: none, or instant
+
+**Signature moves**
+- Underlined blue links, visited purple — left as browser default
+- Headings are just larger versions of body type, no special font
+- Tables, lists, and prose all flow without ornament
+- Footers are tiny, plain, link-rich (the early-web "all links" footer)
+- Cards (if used) are flat rectangles with a 1px gray border and no shadow
+
+**Avoid**
+- Custom fonts of any kind
+- Color other than the blue / purple link colors and the ink + ground
+- Hover animations, transitions of any kind
+- Modals, tooltips, micro-interactions
+- Any sense of "polish"
+
+**AI prompt seed**
+> Found-photograph collage on plain white paper, mixed sources, no Photoshop polish, slight imperfection, hand-cut feel, 4:3.
+
+**Don't use when**
+- The brand needs to feel "premium" — Are.na's recipe explicitly rejects premium signaling
+- The audience expects modern SaaS UX cues — they may bounce, reading the page as broken
+- Half-measures will be tempted — commit fully or pick another recipe; partial Are.na looks broken, not curated
+
+---
+
+> **Same school — Brutalist / Raw**: [`bloomberg-businessweek-turley`](./bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)