oh-my-opencode 4.9.2 → 4.11.0

package/dist/skills/frontend/references/design/shopify.md

@@ -0,0 +1,350 @@
+# Design System Inspired by Shopify
+
+## 1. Visual Theme & Atmosphere
+
+Shopify.com is a dark-first digital theatre — a website that stages its commerce platform like a cinematic premiere. The entire experience unfolds against an abyss of near-black surfaces that carry the faintest whisper of deep forest green (`#02090A`, `#061A1C`, `#102620`), creating a nocturnal atmosphere that feels less like a SaaS marketing page and more like an exclusive product reveal at a tech keynote. This darkness isn't cold or corporate — it's the warm, enveloping dark of a luxury experience, like sitting in the front row of a darkened auditorium.
+
+The typography is the undeniable star. NeueHaasGrotesk — a refined Helvetica descendant — appears at monumental scale (96px) with impossibly light weight (330-400), creating headlines that feel etched in light rather than printed in ink. The `ss03` OpenType feature gives letterforms a distinctive character that separates Shopify's type from generic Helvetica usage. Below the display layer, Inter Variable handles body text with surgical precision, using equally unusual variable weights (420, 450, 550) that live in the spaces between traditional weight stops. This precision signals a company that sweats every detail.
+
+Color is used with extreme restraint. The primary accent is Shopify Neon Green (`#36F4A4`) — an electric mint that appears exclusively on focus rings and accent highlights, pulsing like a bioluminescent signal against the dark canvas. Softer green tints (Aloe `#C1FBD4`, Pistachio `#D4F9E0`) provide atmospheric washes. White is the only text color that matters on dark surfaces, while a zinc-based neutral scale (`#A1A1AA` through `#3F3F46`) handles the hierarchy of quiet information. The result is a design that makes commerce technology feel like it belongs in a science-fiction future.
+
+**Key Characteristics:**
+- Dark-first design with deep forest-teal undertones (not pure black)
+- Ultra-light display typography (weight 330) at monumental scale (96px) creating an ethereal presence
+- Neon Green (`#36F4A4`) as the singular high-energy accent against darkness
+- Full-pill buttons (9999px radius) as the primary interactive shape
+- Layered, multi-stage box shadows creating photographic depth
+- Product screenshots embedded in dark UI contexts, matching the surrounding darkness
+- Zinc-based neutral scale for text hierarchy — balanced between warm and cool
+
+## 2. Color Palette & Roles
+
+### Primary
+
+- **Shopify White** (`#FFFFFF`): Primary text on dark surfaces, button fills, high-contrast elements
+- **Shopify Black** (`#000000`): Body background, button text on white, maximum contrast base (--color-shade-100)
+
+### Secondary & Accent
+
+- **Neon Green** (`#36F4A4`): The signature accent — focus rings, interactive highlights, active state indicators. Electric and bioluminescent
+- **Aloe** (`#C1FBD4`): Soft green wash for decorative backgrounds, atmospheric cards (--color-aloe-10)
+- **Pistachio** (`#D4F9E0`): Lightest green tint for subtle surface differentiation (--color-pistachio-10)
+
+### Surface & Background
+
+- **Void** (`#000000`): Root page background — true black for maximum depth
+- **Deep Teal** (`#02090A`): Card surfaces, content containers — near-black with green undertone
+- **Dark Forest** (`#061A1C`): Section backgrounds with visible green character
+- **Forest** (`#102620`): Elevated dark surfaces, header backgrounds — the warmest dark shade
+- **Dark Card Border** (`#1E2C31`): Card borders on dark surfaces, subtle boundary definition
+
+### Neutrals & Text (Zinc Scale)
+
+- **Shade-30** (`#D4D4D8`): Lightest neutral, barely-there borders on dark (--color-shade-30)
+- **Muted Text** (`#A1A1AA`): Secondary text, metadata, descriptions — the quiet voice
+- **Shade-50** (`#71717A`): Tertiary text, timestamps, least important info (--color-shade-50)
+- **Shade-60** (`#52525B`): Disabled text, decorative neutrals (--color-shade-60)
+- **Shade-70** (`#3F3F46`): Subtle dividers, barely-visible UI boundaries (--color-shade-70)
+- **Light Border** (`#E4E4E7`): Borders on light surfaces (rare — only in light-mode modals)
+
+### Semantic & Accent
+
+- **Link Muted** (`#9797A2`): Muted link text with underline decoration
+- **Link Sage** (`#9DABAD`): Teal-tinted muted links
+- **Link Lavender** (`#BDBDCA`): Lighter link variant
+- **Link Mint** (`#99B3AD`): Green-tinted link variant for themed sections
+
+### Gradient System
+
+- **Dark Teal Wash**: Radial gradient from `#102620` center to `#02090A` edge — used behind product showcases
+- **Green Atmospheric**: Subtle green-tinted ambient gradients behind hero sections, creating depth without solid colors
+- **Spotlight**: Focused bright area fading to black — creates keynote-style presentation lighting
+
+## 3. Typography Rules
+
+### Font Family
+
+**Display:** NeueHaasGrotesk (refined Helvetica descendant, variable font)
+- Fallbacks: Helvetica, Arial, sans-serif
+- OpenType features: `ss03` (stylistic set 3 — distinctive letterform alternates)
+- Available weights: 330, 360, 400, 500, 750 (variable)
+- Used for all headings, hero text, and large display elements
+
+**Body:** Inter-Variable
+- Fallbacks: Helvetica, Arial, sans-serif
+- OpenType features: `ss03`
+- Available weights: 400, 420, 450, 500, 550 (variable)
+- Used for body text, links, buttons, UI elements
+
+**Mono:** ui-monospace
+- Fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New
+- Used for code snippets, data labels, technical content
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk, hero headlines, "ss03" |
+| Display XL Bold | 90.74px | 750 | 1.00 | 4.54px | NeueHaasGrotesk, emphasis display |
+| Display XL Tracked | 96px | 400 | 1.00 | 2.4px | NeueHaasGrotesk, spaced display |
+| Display Light | 96px | 330 | 0.96 | — | NeueHaasGrotesk, ethereal display |
+| Heading 1 | 70px | 330 | 1.00 | — | NeueHaasGrotesk, section titles |
+| Heading 2 | 55px | 330 | 1.16 | — | NeueHaasGrotesk, subsections |
+| Heading 3 | 48px | 330 | 1.14 | — | NeueHaasGrotesk, feature titles |
+| Heading 4 | 32px | 360 | 1.14 | 0.32px | NeueHaasGrotesk, card headings |
+| Heading 5 | 28px | 500 | 1.28 | 0.42px | NeueHaasGrotesk, small headings |
+| Heading 6 | 24px | 400 | 1.14 | 0.36px | NeueHaasGrotesk, minor headings |
+| Body Large | 20px | 500 | 1.40 | 0.3px | NeueHaasGrotesk / Inter, lead paragraphs |
+| Body | 18px | 400 | 1.56 | — | Inter-Variable, standard body |
+| Body Medium | 18px | 550 | 1.56 | — | Inter-Variable, emphasized body |
+| Body Small | 16px | 400 | 1.50 | — | Inter / NeueHaasGrotesk, compact body |
+| Body Small Medium | 16px | 420 | 1.50 | — | Inter-Variable, slightly emphasized |
+| Button | 16px | 400 | 1.50 | — | NeueHaasGrotesk, CTA text |
+| Nav Link | 18px | 500 | 1.25 | 0.72px | NeueHaasGrotesk, navigation items |
+| Caption | 14px | 500 | 1.49 | 0.28px | NeueHaasGrotesk / Inter, metadata |
+| Caption Medium | 14px | 550 | 1.49 | 0.28px | Inter-Variable, emphasized caption |
+| Overline | 15.36px | 400 | 1.50 | 1.54px | NeueHaasGrotesk, wide-tracked labels |
+| Micro | 13px | 500 | 1.50 | -0.13px | Inter, tight-tracked small text |
+| Label | 12px | 400 | 1.20 | 0.72px | Inter, uppercase labels |
+| Code | 16px | 400 | 1.50 | — | ui-monospace, uppercase, code blocks |
+| Code Small | 12px | 400 | 1.33 | — | ui-monospace, uppercase, inline code |
+
+### Principles
+
+Shopify's typography is a masterclass in variable font precision. The display layer lives almost exclusively at weights 330-400 — featherweight text that appears to hover above the dark background like projected light. This is the opposite of the bold, heavy approach most SaaS sites take: where others shout, Shopify whispers at scale. The 96px headlines at weight 330 create a paradox of enormous size and delicate stroke that feels both monumental and fragile. The `ss03` OpenType feature activates a stylistic set that gives specific characters (likely 'a', 'g', and certain numerals) a more refined appearance, distinguishing Shopify's typography from standard Helvetica Neue usage. Inter Variable handles the body layer with surgical precision, using weights like 420 and 550 that exist between the traditional stops — every piece of text has exactly the visual weight it needs.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (White Fill)**
+- Background: White (`#FFFFFF`)
+- Text: Black (`#000000`)
+- Border: 2px solid transparent
+- Border radius: full pill (9999px)
+- Padding: 12px 26px 12px 16px (asymmetric — more right padding for visual balance)
+- Hover: slight opacity reduction or background shift
+- Focus: 2px `#36F4A4` (Neon Green) outline ring
+- Transition: all 200ms ease
+
+**Secondary (Ghost/Outlined)**
+- Background: transparent
+- Text: White (`#FFFFFF`)
+- Border: 2px solid White (`#FFFFFF`)
+- Border radius: full pill (9999px)
+- Padding: 12px 26px 12px 16px
+- Hover: fills to white bg with black text
+- Focus: 2px `#36F4A4` outline
+
+**Badge/Tag (Neutral Filled)**
+- Background: `rgba(255, 255, 255, 0.2)` (frosted glass)
+- Text: White (`#FFFFFF`)
+- Border: none
+- Border radius: subtly rounded (4px)
+- Padding: 12px 16px
+- Font: 16px regular
+
+### Cards & Containers
+
+- Background: Deep Teal (`#02090A`) on dark pages
+- Border: 1px solid `#1E2C31` (Dark Card Border) — barely visible boundary
+- Border radius: 8px for standard cards, 12px for featured cards, 20px 20px 0 0 for top-rounded cards
+- Shadow: Multi-layered system:
+  - Resting: `rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px` + `rgba(255,255,255,0.03) 0px 1px 0px inset`
+  - The inset white highlight creates a subtle top-edge glow
+- Hover: shadow expands, card may slightly brighten
+- Transition: box-shadow 300ms ease, transform 200ms ease
+
+### Inputs & Forms
+
+- Background: transparent or Dark Forest (`#061A1C`)
+- Text: White (`#FFFFFF`)
+- Border: 1px solid `#3F3F46` (Shade-70)
+- Border radius: 8px
+- Padding: 12px 16px
+- Focus: 2px solid `#36F4A4` (Neon Green focus ring)
+- Placeholder: Shade-50 (`#71717A`)
+- Transition: border-color 200ms ease
+
+### Navigation
+
+- Background: transparent (overlaid on dark hero), becomes Forest (`#102620`) on scroll
+- Height: ~64px
+- Left: Shopify wordmark logo (SVG, white on dark)
+- Center/Right: nav links in 18px/500 NeueHaasGrotesk, white, letter-spacing 0.72px
+- CTA: White pill button "Start for free" (right)
+- Secondary CTA: Ghost button with white border
+- Hover: links shift to Muted Text (`#A1A1AA`) or gain underline
+- Mobile: hamburger menu, full-screen dark overlay
+- Transition: background 300ms ease on scroll
+
+### Image Treatment
+
+- Product screenshots: embedded in dark UI contexts, matching the surrounding darkness
+- Admin interface previews: shown on dark backgrounds with subtle card borders
+- Aspect ratios: varied — hero images are wide (16:9-ish), feature shots are flexible
+- All images sit flush within dark containers — no bright borders or frames
+- Lazy loading with dark placeholder surfaces
+
+### Trust Indicators
+
+- Statistics displayed prominently: "15+" (years), "150M+" (buyers)
+- Numbers at display scale in NeueHaasGrotesk
+- Partner/developer ecosystem callout sections
+- Dark-themed testimonials integrated into the page flow
+
+## 5. Layout Principles
+
+### Spacing System
+
+Base unit: 8px
+
+| Token | Value | Use |
+|-------|-------|-----|
+| space-1 | 4px | Tight inline gaps |
+| space-2 | 8px | Base unit, icon gaps |
+| space-3 | 12px | Card padding, tight margins |
+| space-4 | 16px | Standard element padding |
+| space-5 | 24px | Card gaps, section padding |
+| space-6 | 28px | Medium section spacing |
+| space-7 | 32px | Section breaks |
+| space-8 | 36px | Large padding |
+| space-9 | 40px | Major section padding |
+| space-10 | 64px | Hero section padding, large gaps |
+
+### Grid & Container
+
+- Max container width: ~1280px (centered)
+- Hero: full-width, edge-to-edge dark background with centered text
+- Feature sections: 2-column layouts with text and product screenshots
+- Stats sections: horizontal layout with large numbers
+- Horizontal padding: 64px desktop, 32px tablet, 16px mobile
+- Grid gap: 24-32px between major content blocks
+
+### Whitespace Philosophy
+
+Shopify's whitespace strategy is theatrical. Sections are separated by vast expanses of dark space — 80px to 120px of pure black breathing room — that create the pacing of a presentation, not a webpage. Each content block is its own "slide" in a keynote-style scroll. Within sections, spacing is tighter and more deliberate, creating focal density against the expansive void. The contrast between macro-level emptiness and micro-level precision is what gives the site its cinematic cadence.
+
+### Border Radius Scale
+
+| Value | Context |
+|-------|---------|
+| 4px | Tags, badges, micro-elements |
+| 8px | Standard cards, inputs, video containers |
+| 12px | Featured cards, image containers, buttons (non-pill) |
+| 20px | Top-rounded cards (20px 20px 0 0), modal headers |
+| 340px | Large rounded decorative elements |
+| 9999px | Pill buttons, pill badges, nav elements |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Base | No shadow, dark surface | Default page background |
+| Subtle | `rgba(0,0,0,0.1) 0px 0px 0px 1px` + inset white glow | Resting cards |
+| Medium | Multi-layer: 1px ring + 2px + 4px + 8px shadow stack | Elevated cards, featured sections |
+| High | `rgba(0,0,0,0.25) 0px 25px 50px -12px` | Modals, dropdowns, overlays |
+| Focus | `0px 0px 0px 2px #36F4A4` | Keyboard focus ring (Neon Green) |
+
+Shopify's shadow system is unusually sophisticated. Rather than single-value shadows, cards use a stacked, multi-layer approach: a 1px ring for boundary definition, 2px/4px/8px progressive blurs for natural light falloff, and a delicate inset white glow (`rgba(255,255,255,0.03)`) that simulates a top-lit glass surface. On dark backgrounds, shadows darken from already-dark surfaces, so the shadows function more as "ambient occlusion" than traditional elevation — the card appears to sink slightly into the surface rather than float above it.
+
+### Decorative Depth
+
+- **Dark teal gradients**: Ambient radial washes behind hero sections and product showcases
+- **Spotlight effects**: Bright centered areas fading to black, creating keynote-style theatrical lighting
+- **Edge glow**: Subtle light colored edges on dark cards via inset box-shadow
+- **Green atmospheric halos**: Faint green tints in background gradients, echoing the brand accent
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Use the dark teal-black surface hierarchy (Void → Deep Teal → Dark Forest → Forest) for depth
+- Keep display typography at weight 330-400 — the ethereal lightness is the design's signature
+- Use Neon Green (`#36F4A4`) exclusively for focus states and critical accent highlights
+- Apply 9999px radius to all primary CTA buttons — the full pill is non-negotiable
+- Use the multi-layered shadow system for card elevation — single shadows look flat
+- Maintain the `ss03` OpenType feature across all text — it's part of the typographic identity
+- Use Inter Variable for body text and NeueHaasGrotesk for headings — never mix their roles
+- Create theatrical spacing between sections (80px+) for cinematic pacing
+
+### Don't
+
+- Don't use pure black (#000000) for text on dark backgrounds — use white (#FFFFFF) only
+- Don't introduce warm colors (orange, red, yellow) — the palette is strictly cool (greens, teals, neutrals)
+- Don't use font weights above 500 for NeueHaasGrotesk body text — heavy weights break the ethereal feel
+- Don't apply green accents to large surfaces — Neon Green is for small, precise highlights only
+- Don't use sharp corners (0px radius) on interactive elements — everything rounds
+- Don't add bright backgrounds — the dark theme is fundamental, not optional
+- Don't use single-layer box shadows — the stacked approach is the system
+- Don't set line-height above 1.56 for body text — Shopify's text is relatively compact
+- Don't mix NeueHaasGrotesk and Inter at the same size/role — their weight scales differ
+- Don't use letter-spacing below 0 for headings — Shopify headings track neutral or positive
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, hamburger nav, display text scales to 48px, 16px padding |
+| Tablet | 640-1024px | 2-column grids begin, display text at 70px, 32px padding |
+| Desktop | 1024-1440px | Full layout, expanded nav, 96px display, 64px padding |
+| Large Desktop | >1440px | Max-width container centered, increased section spacing |
+
+### Touch Targets
+
+- Minimum touch target: 44x44px (WCAG AAA)
+- Pill buttons: 48px height minimum with generous horizontal padding
+- Nav links: 44px touch area
+- Card surfaces: full card is tappable where linked
+
+### Collapsing Strategy
+
+- **Navigation**: Full horizontal links → hamburger menu below 1024px; logo and CTA button remain visible
+- **Hero section**: 96px display → 70px at tablet → 48px on mobile; maintains single-column center alignment
+- **Feature sections**: 2-column text+image → stacked single column below 768px
+- **Stats**: Horizontal row → stacked vertical on mobile
+- **Section padding**: 64px → 40px → 24px → 16px as viewport narrows
+- **Cards**: Grid → stack, maintaining full-width on mobile
+
+### Image Behavior
+
+- Product screenshots: responsive within dark containers, maintain aspect ratio
+- Hero images: full-width on all breakpoints, lazy loaded with dark placeholders
+- Admin UI previews: scale proportionally, may crop on mobile
+- All images use CDN (`cdn.shopify.com`) with responsive srcset
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+
+- Primary CTA: Shopify White (`#FFFFFF`)
+- Page background: Void Black (`#000000`)
+- Card surface: Deep Teal (`#02090A`)
+- Section bg: Dark Forest (`#061A1C`)
+- Elevated bg: Forest (`#102620`)
+- Accent: Neon Green (`#36F4A4`)
+- Body text: White (`#FFFFFF`)
+- Muted text: Muted (`#A1A1AA`)
+- Border dark: Dark Card Border (`#1E2C31`)
+
+### Example Component Prompts
+
+- "Create a hero section on true black (#000000) background with a 96px/330 NeueHaasGrotesk headline in white, a 20px/500 subtitle in #A1A1AA, and two pill buttons: white filled (9999px radius) and ghost with 2px white border"
+- "Design a feature card on Deep Teal (#02090A) with 1px #1E2C31 border, 12px radius, multi-layer shadow (1px ring + 2px/4px/8px blur at 10% black), containing a 32px/360 white heading and 18px/400 #A1A1AA body text"
+- "Build a stats section on Dark Forest (#061A1C) with 96px/750 white numbers (NeueHaasGrotesk), 16px/400 #A1A1AA descriptive labels, and generous 64px spacing between stat blocks"
+- "Create a sticky nav with transparent background (becomes #102620 on scroll), white Shopify logo left, 18px/500 white nav links with 0.72px letter-spacing, and a white pill 'Start for free' button right"
+- "Design a tag/badge with rgba(255,255,255,0.2) frosted glass background, 4px radius, 12px 16px padding, white 16px text — floating over a dark card surface"
+
+### Iteration Guide
+
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time
+2. Reference specific color names and hex codes from this document
+3. Remember: this is a DARK-FIRST design — light surfaces are the exception, not the rule
+4. Display text should always feel feather-light (weight 330-400) — if it looks heavy, reduce the weight
+5. Neon Green (#36F4A4) is precious — use sparingly for focus and accent only
+6. The dark surface hierarchy (black → deep teal → dark forest → forest) creates subtle depth
+7. Shadows are multi-layered — a single `box-shadow` value won't capture the Shopify card feel
+8. `ss03` OpenType feature must be active on all text for typographic consistency

package/dist/skills/frontend/references/design/soft-skill.md

@@ -0,0 +1,98 @@
+---
+name: high-end-visual-design
+description: Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
+---
+
+# Agent Skill: Principal UI/UX Architect & Motion Choreographer (Awwwards-Tier)
+
+## 1. Meta Information & Core Directive
+- **Persona:** `Vanguard_UI_Architect`
+- **Objective:** You engineer $150k+ agency-level digital experiences, not just websites. Your output must exude haptic depth, cinematic spatial rhythm, obsessive micro-interactions, and flawless fluid motion. 
+- **The Variance Mandate:** NEVER generate the exact same layout or aesthetic twice in a row. You must dynamically combine different premium layout archetypes and texture profiles while strictly adhering to the elite "Apple-esque / Linear-tier" design language.
+
+## 2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS)
+If your generated code includes ANY of the following, the design instantly fails:
+- **Banned Fonts:** Inter, Roboto, Arial, Open Sans, Helvetica. (Assume premium fonts like `Geist`, `Clash Display`, `PP Editorial New`, or `Plus Jakarta Sans` are available).
+- **Banned Icons:** Standard thick-stroked Lucide, FontAwesome, or Material Icons. Use only ultra-light, precise lines (e.g., Phosphor Light, Remix Line).
+- **Banned Borders & Shadows:** Generic 1px solid gray borders. Harsh, dark drop shadows (`shadow-md`, `rgba(0,0,0,0.3)`). 
+- **Banned Layouts:** Edge-to-edge sticky navbars glued to the top. Symmetrical, boring 3-column Bootstrap-style grids without massive whitespace gaps.
+- **Banned Motion:** Standard `linear` or `ease-in-out` transitions. Instant state changes without interpolation.
+
+## 3. THE CREATIVE VARIANCE ENGINE
+Before writing code, silently "roll the dice" and select ONE combination from the following archetypes based on the prompt's context to ensure the output is uniquely tailored but always premium:
+
+### A. Vibe & Texture Archetypes (Pick 1)
+1. **Ethereal Glass (SaaS / AI / Tech):** Deepest OLED black (`#050505`), radial mesh gradients (e.g., subtle glowing purple/emerald orbs) in the background. Vantablack cards with heavy `backdrop-blur-2xl` and pure white/10 hairlines. Wide geometric Grotesk typography.
+2. **Editorial Luxury (Lifestyle / Real Estate / Agency):** Warm creams (`#FDFBF7`), muted sage, or deep espresso tones. High-contrast Variable Serif fonts for massive headings. Subtle CSS noise/film-grain overlay (`opacity-[0.03]`) for a physical paper feel.
+3. **Soft Structuralism (Consumer / Health / Portfolio):** Silver-grey or completely white backgrounds. Massive bold Grotesk typography. Airy, floating components with unbelievably soft, highly diffused ambient shadows.
+
+### B. Layout Archetypes (Pick 1)
+1. **The Asymmetrical Bento:** A masonry-like CSS Grid of varying card sizes (e.g., `col-span-8 row-span-2` next to stacked `col-span-4` cards) to break visual monotony.
+   - **Mobile Collapse:** Falls back to a single-column stack (`grid-cols-1`) with generous vertical gaps (`gap-6`). All `col-span` overrides reset to `col-span-1`.
+2. **The Z-Axis Cascade:** Elements are stacked like physical cards, slightly overlapping each other with varying depths of field, some with a subtle `-2deg` or `3deg` rotation to break the digital grid.
+   - **Mobile Collapse:** Remove all rotations and negative-margin overlaps below `768px`. Stack vertically with standard spacing. Overlapping elements cause touch-target conflicts on mobile.
+3. **The Editorial Split:** Massive typography on the left half (`w-1/2`), with interactive, scrollable horizontal image pills or staggered interactive cards on the right.
+   - **Mobile Collapse:** Converts to a full-width vertical stack (`w-full`). Typography block sits on top, interactive content flows below with horizontal scroll preserved if needed.
+
+**Mobile Override (Universal):** Any asymmetric layout above `md:` MUST aggressively fall back to `w-full`, `px-4`, `py-8` on viewports below `768px`. Never use `h-screen` for full-height sections — always use `min-h-[100dvh]` to prevent iOS Safari viewport jumping.
+
+## 4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY)
+
+### A. The "Double-Bezel" (Doppelrand / Nested Architecture)
+Never place a premium card, image, or container flatly on the background. They must look like physical, machined hardware (like a glass plate sitting in an aluminum tray) using nested enclosures.
+- **Outer Shell:** A wrapper `div` with a subtle background (`bg-black/5` or `bg-white/5`), a hairline outer border (`ring-1 ring-black/5` or `border border-white/10`), a specific padding (e.g., `p-1.5` or `p-2`), and a large outer radius (`rounded-[2rem]`).
+- **Inner Core:** The actual content container inside the shell. It has its own distinct background color, its own inner highlight (`shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]`), and a mathematically calculated smaller radius (e.g., `rounded-[calc(2rem-0.375rem)]`) for concentric curves.
+
+### B. Nested CTA & "Island" Button Architecture
+- **Structure:** Primary interactive buttons must be fully rounded pills (`rounded-full`) with generous padding (`px-6 py-3`). 
+- **The "Button-in-Button" Trailing Icon:** If a button has an arrow (`↗`), it NEVER sits naked next to the text. It must be nested inside its own distinct circular wrapper (e.g., `w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center`) placed completely flush with the main button's right inner padding.
+
+### C. Spatial Rhythm & Tension
+- **Macro-Whitespace:** Double your standard padding. Use `py-24` to `py-40` for sections. Allow the design to breathe heavily.
+- **Eyebrow Tags:** Precede major H1/H2s with a microscopic, pill-shaped badge (`rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium`).
+
+## 5. MOTION CHOREOGRAPHY (FLUID DYNAMICS)
+Never use default transitions. All motion must simulate real-world mass and spring physics. Use custom cubic-beziers (e.g., `transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]`).
+
+### A. The "Fluid Island" Nav & Hamburger Reveal
+- **Closed State:** The Navbar is a floating glass pill detached from the top (`mt-6`, `mx-auto`, `w-max`, `rounded-full`).
+- **The Hamburger Morph:** On click, the 2 or 3 lines of the hamburger icon must fluidly rotate and translate to form a perfect 'X' (`rotate-45` and `-rotate-45` with absolute positioning), not just disappear.
+- **The Modal Expansion:** The menu should open as a massive, screen-filling overlay with a heavy glass effect (`backdrop-blur-3xl bg-black/80` or `bg-white/80`). 
+- **Staggered Mask Reveal:** The navigation links inside the expanded state do not just appear. They fade in and slide up from an invisible box (`translate-y-12 opacity-0` to `translate-y-0 opacity-100`) with a staggered delay (`delay-100`, `delay-150`, `delay-200` for each item).
+
+### B. Magnetic Button Hover Physics
+- Use the `group` utility. On hover, do not just change the background color.
+- Scale the entire button down slightly (`active:scale-[0.98]`) to simulate physical pressing.
+- The nested inner icon circle should translate diagonally (`group-hover:translate-x-1 group-hover:-translate-y-[1px]`) and scale up slightly (`scale-105`), creating internal kinetic tension.
+
+### C. Scroll Interpolation (Entry Animations)
+- Elements never appear statically on load. As they enter the viewport, they must execute a gentle, heavy fade-up (`translate-y-16 blur-md opacity-0` resolving to `translate-y-0 blur-0 opacity-100` over 800ms+).
+- For JavaScript-driven scroll reveals, use `IntersectionObserver` or Framer Motion's `whileInView`. Never use `window.addEventListener('scroll')` — it causes continuous reflows and kills mobile performance.
+
+## 6. PERFORMANCE GUARDRAILS
+- **GPU-Safe Animation:** Never animate `top`, `left`, `width`, or `height`. Animate exclusively via `transform` and `opacity`. Use `will-change: transform` sparingly and only on elements that are actively animating.
+- **Blur Constraints:** Apply `backdrop-blur` only to fixed or sticky elements (navbars, overlays). Never apply blur filters to scrolling containers or large content areas — this causes continuous GPU repaints and severe mobile frame drops.
+- **Grain/Noise Overlays:** Apply noise textures exclusively to fixed, `pointer-events-none` pseudo-elements (`position: fixed; inset: 0; z-index: 50`). Never attach them to scrolling containers.
+- **Z-Index Discipline:** Do not use arbitrary `z-50` or `z-[9999]`. Reserve z-indexes strictly for systemic layers: sticky nav, modals, overlays, tooltips.
+
+## 7. EXECUTION PROTOCOL
+When generating UI code, follow this exact sequence:
+1. **[SILENT THOUGHT]** Roll the Variance Engine (Section 3). Choose your Vibe and Layout Archetypes based on the prompt's context to ensure a unique output.
+2. **[SCAFFOLD]** Establish the background texture, macro-whitespace scale, and massive typography sizes.
+3. **[ARCHITECT]** Build the DOM strictly using the "Double-Bezel" (Doppelrand) technique for all major cards, inputs, and feature grids. Use exaggerated squircle radii (`rounded-[2rem]`).
+4. **[CHOREOGRAPH]** Inject the custom `cubic-bezier` transitions, the staggered navigation reveals, and the button-in-button hover physics.
+5. **[OUTPUT]** Deliver flawless, pixel-perfect React/Tailwind/HTML code. Do not include basic, generic fallbacks.
+
+## 8. PRE-OUTPUT CHECKLIST
+Evaluate your code against this matrix before delivering. This is the last filter.
+- [ ] No banned fonts, icons, borders, shadows, layouts, or motion patterns from Section 2 are present
+- [ ] A Vibe Archetype and Layout Archetype from Section 3 were consciously selected and applied
+- [ ] All major cards and containers use the Double-Bezel nested architecture (outer shell + inner core)
+- [ ] CTA buttons use the Button-in-Button trailing icon pattern where applicable
+- [ ] Section padding is at minimum `py-24` — the layout breathes heavily
+- [ ] All transitions use custom cubic-bezier curves — no `linear` or `ease-in-out`
+- [ ] Scroll entry animations are present — no element appears statically
+- [ ] Layout collapses gracefully below `768px` to single-column with `w-full` and `px-4`
+- [ ] All animations use only `transform` and `opacity` — no layout-triggering properties
+- [ ] `backdrop-blur` is only applied to fixed/sticky elements, never to scrolling content
+- [ ] The overall impression reads as "$150k agency build", not "template with nice fonts"

package/dist/skills/frontend/references/design/spacex.md

@@ -0,0 +1,194 @@
+# Design System Inspired by SpaceX
+
+## 1. Visual Theme & Atmosphere
+
+SpaceX's website is a full-screen cinematic experience that treats aerospace engineering like a film — every section is a scene, every photograph is a frame, and the interface disappears entirely behind the imagery. The design is pure black (`#000000`) with photography of rockets, space, and planets occupying 100% of the viewport. Text overlays sit directly on these photographs with no background panels, cards, or containers — just type on image, bold and unapologetic.
+
+The typography system uses D-DIN, an industrial geometric typeface with DIN heritage (the German industrial standard). The defining characteristic is that virtually ALL text is uppercase with positive letter-spacing (0.96px–1.17px), creating a military/aerospace labeling system where every word feels stenciled onto a spacecraft hull. D-DIN-Bold at 48px with uppercase and 0.96px tracking for the hero creates headlines that feel like mission briefing titles. Even body text at 16px maintains the uppercase/tracked treatment at smaller scales.
+
+What makes SpaceX distinctive is its radical minimalism: no shadows, no borders (except one ghost button border at `rgba(240,240,250,0.35)`), no color (only black and a spectral near-white `#f0f0fa`), no cards, no grids. The only visual element is photography + text. The ghost button with `rgba(240,240,250,0.1)` background and 32px radius is the sole interactive element — barely visible, floating over the imagery like a heads-up display. This isn't a design system in the traditional sense — it's a photographic exhibition with a type system and a single button.
+
+**Key Characteristics:**
+- Pure black canvas with full-viewport cinematic photography — the interface is invisible
+- D-DIN / D-DIN-Bold — industrial DIN-heritage typeface
+- Universal uppercase + positive letter-spacing (0.96px–1.17px) — aerospace stencil aesthetic
+- Near-white spectral text (`#f0f0fa`) — not pure white, a slight blue-violet tint
+- Zero shadows, zero cards, zero containers — text on image only
+- Single ghost button: `rgba(240,240,250,0.1)` background with spectral border
+- Full-viewport sections — each section is a cinematic "scene"
+- No decorative elements — every pixel serves the photography
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Space Black** (`#000000`): Page background, the void of space — at 50% opacity for overlay gradient
+- **Spectral White** (`#f0f0fa`): Text color — not pure white, a slight blue-violet tint that mimics starlight
+
+### Interactive
+- **Ghost Surface** (`rgba(240, 240, 250, 0.1)`): Button background — nearly invisible, 10% opacity
+- **Ghost Border** (`rgba(240, 240, 250, 0.35)`): Button border — spectral, 35% opacity
+- **Hover White** (`var(--white-100)`): Link hover state — full spectral white
+
+### Gradient
+- **Dark Overlay** (`rgba(0, 0, 0, 0.5)`): Gradient overlay on photographs to ensure text legibility
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `D-DIN-Bold` — bold industrial geometric
+- **Body / UI**: `D-DIN`, fallbacks: `Arial, Verdana`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | D-DIN-Bold | 48px (3.00rem) | 700 | 1.00 (tight) | 0.96px | `text-transform: uppercase` |
+| Body | D-DIN | 16px (1.00rem) | 400 | 1.50–1.70 | normal | Standard reading text |
+| Nav Link Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | `text-transform: uppercase` |
+| Nav Link | D-DIN | 12px (0.75rem) | 400 | 2.00 (relaxed) | normal | `text-transform: uppercase` |
+| Caption Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | `text-transform: uppercase` |
+| Caption | D-DIN | 12px (0.75rem) | 400 | 1.00 (tight) | normal | `text-transform: uppercase` |
+| Micro | D-DIN | 10px (0.63rem) | 400 | 0.94 (tight) | 1px | `text-transform: uppercase` |
+
+### Principles
+- **Universal uppercase**: Nearly every text element uses `text-transform: uppercase`. This creates a systematic military/aerospace voice where all communication feels like official documentation.
+- **Positive letter-spacing as identity**: 0.96px on display, 1.17px on nav — the wide tracking creates the stenciled, industrial feel that connects to DIN's heritage as a German engineering standard.
+- **Two weights, strict hierarchy**: D-DIN-Bold (700) for headlines and nav emphasis, D-DIN (400) for body. No medium or semibold weights exist in the system.
+- **Tight line-heights**: 0.94–1.00 across most text — compressed, efficient, mission-critical communication.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Ghost Button**
+- Background: `rgba(240, 240, 250, 0.1)` (barely visible)
+- Text: Spectral White (`#f0f0fa`)
+- Padding: 18px
+- Radius: 32px
+- Border: `1px solid rgba(240, 240, 250, 0.35)`
+- Hover: background brightens, text to `var(--white-100)`
+- Use: The only button variant — "LEARN MORE" CTAs on photography
+
+### Cards & Containers
+- **None.** SpaceX does not use cards, panels, or containers. All content is text directly on full-viewport photographs. The absence of containers IS the design.
+
+### Inputs & Forms
+- Not present on the homepage. The site is purely presentational.
+
+### Navigation
+- Transparent overlay nav on photography
+- D-DIN 13px weight 700, uppercase, 1.17px tracking
+- Spectral white text on dark imagery
+- Logo: SpaceX wordmark at 147x19px
+- Mobile: hamburger collapse
+
+### Image Treatment
+- Full-viewport (100vh) photography sections
+- Professional aerospace photography: rockets, Mars, space
+- Dark gradient overlays (`rgba(0,0,0,0.5)`) for text legibility
+- Each section = one full-screen photograph with text overlay
+- No border radius, no frames — edge-to-edge imagery
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 3px, 5px, 12px, 15px, 18px, 20px, 24px, 30px
+- Minimal scale — spacing is not the organizing principle; photography is
+
+### Grid & Container
+- No traditional grid — each section is a full-viewport cinematic frame
+- Text is positioned absolutely or with generous padding over imagery
+- Left-aligned text blocks on photography backgrounds
+- No max-width container — content bleeds to viewport edges
+
+### Whitespace Philosophy
+- **Photography IS the whitespace**: Empty space in the design is never empty — it's filled with the dark expanse of space, the curve of a planet, or the flame of a rocket engine. Traditional whitespace concepts don't apply.
+- **Vertical pacing through viewport**: Each section is exactly one viewport tall, creating a rhythmic scroll where each "page" reveals a new scene.
+
+### Border Radius Scale
+- Sharp (4px): Small dividers, utility elements
+- Button (32px): Ghost buttons — the only rounded element
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Photography (Level 0) | Full-viewport imagery | Background layer — always present |
+| Overlay (Level 1) | `rgba(0, 0, 0, 0.5)` gradient | Text legibility layer over photography |
+| Text (Level 2) | Spectral white text, no shadow | Content layer — text floats directly on image |
+| Ghost (Level 3) | `rgba(240, 240, 250, 0.1)` surface | Barely-visible interactive layer |
+
+**Shadow Philosophy**: SpaceX uses ZERO shadows. In a design built entirely on photography, shadows are meaningless — every surface is already a photograph with natural lighting. Depth comes from the photographic content itself: the receding curvature of Earth, the diminishing trail of a rocket, the atmospheric haze around Mars.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use full-viewport photography as the primary design element — every section is a scene
+- Apply uppercase + positive letter-spacing to ALL text — the aerospace stencil voice
+- Use D-DIN exclusively — no other fonts exist in the system
+- Keep the color palette to black + spectral white (`#f0f0fa`) only
+- Use ghost buttons (`rgba(240,240,250,0.1)`) as the sole interactive element
+- Apply dark gradient overlays for text legibility on photographs
+- Let photography carry the emotional weight — the type system is functional, not expressive
+
+### Don't
+- Don't add cards, panels, or containers — text sits directly on photography
+- Don't use shadows — they have no meaning in a photographic context
+- Don't introduce colors — the palette is strictly achromatic with spectral tint
+- Don't use sentence case — everything is uppercase
+- Don't use negative letter-spacing — all tracking is positive (0.96px–1.17px)
+- Don't reduce photography to thumbnails — every image is full-viewport
+- Don't add decorative elements (icons, badges, dividers) — the design is photography + type + one button
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <600px | Stacked, reduced padding, smaller type |
+| Tablet Small | 600–960px | Adjusted layout |
+| Tablet | 960–1280px | Standard scaling |
+| Desktop | 1280–1350px | Full layout |
+| Large Desktop | 1350–1500px | Expanded |
+| Ultra-wide | >1500px | Maximum viewport |
+
+### Touch Targets
+- Ghost buttons: 18px padding provides adequate touch area
+- Navigation links: uppercase with generous letter-spacing aids readability
+
+### Collapsing Strategy
+- Photography: maintains full-viewport at all sizes, content reposition
+- Hero text: 48px → scales down proportionally
+- Navigation: horizontal → hamburger
+- Text blocks: reposition but maintain overlay-on-photography pattern
+- Full-viewport sections maintained on mobile
+
+### Image Behavior
+- Edge-to-edge photography at all viewport sizes
+- Background-size: cover with center focus
+- Dark overlay gradients adapt to content position
+- No art direction changes — same photographs, responsive positioning
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Space Black (`#000000`)
+- Text: Spectral White (`#f0f0fa`)
+- Button background: Ghost (`rgba(240, 240, 250, 0.1)`)
+- Button border: Ghost Border (`rgba(240, 240, 250, 0.35)`)
+- Overlay: `rgba(0, 0, 0, 0.5)`
+
+### Example Component Prompts
+- "Create a full-viewport hero: background-image covering 100vh, dark gradient overlay rgba(0,0,0,0.5). Headline at 48px D-DIN-Bold, uppercase, letter-spacing 0.96px, spectral white (#f0f0fa) text. Ghost CTA button: rgba(240,240,250,0.1) bg, 1px solid rgba(240,240,250,0.35) border, 32px radius, 18px padding."
+- "Design a navigation: transparent over photography. D-DIN 13px weight 700, uppercase, letter-spacing 1.17px, spectral white text. SpaceX wordmark left-aligned."
+- "Build a content section: full-viewport height, background photography with dark overlay. Left-aligned text block with 48px D-DIN-Bold uppercase heading, 16px D-DIN body text, and ghost button below."
+- "Create a micro label: D-DIN 10px, uppercase, letter-spacing 1px, spectral white, line-height 0.94."
+
+### Iteration Guide
+1. Start with photography — the image IS the design
+2. All text is uppercase with positive letter-spacing — no exceptions
+3. Only two colors: black and spectral white (#f0f0fa)
+4. Ghost buttons are the only interactive element — transparent, spectral-bordered
+5. Zero shadows, zero cards, zero decorative elements
+6. Every section is full-viewport (100vh) — cinematic pacing