@jaimevalasek/aioson 1.5.1 → 1.6.0

package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md

@@ -0,0 +1,221 @@
+# Crossover Protocol — design-hybrid-forge
+
+Load when running Phase 2 (Identity Synthesis) and Phase 3 (Crossover Spec).
+
+This is the methodological core of the forge. Follow it in order. Do not skip to generation.
+
+---
+
+## Phase 2 — Identity Synthesis
+
+Before writing a single file, answer all six questions. If you cannot answer them, you are not ready to generate.
+
+### 2.1 Name the creative tension
+
+Write one sentence naming what the two skills pull against each other.
+
+Example:
+> "cognitive-core-ui pulls toward dense operational precision and solid surfaces; glassmorphism-ui pulls toward fluid depth through transparency. The hybrid resolves this by making the command structure live inside a glass aurora — precision without opacity."
+
+If the sentence feels like a compromise ("both are dark and professional"), the pair is too similar. Pick a different pair or articulate a sharper tension.
+
+### 2.2 Decide the substrate winner
+
+The background system of the hybrid belongs to exactly ONE parent. Never split this 50/50.
+
+Ask: which parent's background model is more distinctive and harder to achieve without the other?
+- If parent A uses a gradient substrate (glassmorphism, premium-command) and parent B uses solid backgrounds → gradient substrate wins.
+- If both use solid backgrounds → the one with the stronger depth model wins.
+- If both use gradient substrates → this pair may be too similar (check anti-pairs).
+
+Document the substrate winner and the exact CSS value.
+
+### 2.3 Decide the structure winner
+
+The layout architecture and information density rules belong to exactly ONE parent.
+
+Ask: which parent has a more opinionated information structure?
+- mono rails → cognitive-core wins
+- editorial sections → bold-editorial wins
+- raw grid → neo-brutalist wins
+- balanced/neutral → the other parent's structure can fill in
+
+Document the structure winner and what it contributes concretely (layout, rhythm, navigation pattern, density scale).
+
+### 2.4 Design the accent fusion
+
+The hybrid's accent must be genuinely new. Rules:
+- NOT parent A's accent color
+- NOT parent B's accent color
+- Usually a gradient pair where each endpoint references one parent
+- Sometimes a completely new color at the midpoint between the two parent accents
+- The gradient pair is the hybrid's strongest visual signature
+
+Document the primary accent, secondary accent, gradient, and at least one glow/shadow value derived from it.
+
+**Method — midpoint derivation:**
+1. Get parent A's accent in HSL
+2. Get parent B's accent in HSL
+3. The hybrid's primary can be the H/S/L midpoint, or a deliberate shift toward the more distinctive one
+4. The gradient goes from primary → secondary (A-derived → B-derived)
+
+**Example (cognitive-core × glassmorphism):**
+- cognitive-core accent: `#22D3EE` (teal, H=190)
+- glassmorphism accent: `#7C3AED` (violet, H=263)
+- midpoint H ≈ 226 (blue) — but this is bland
+- chosen: shift toward teal → `#00C8E8` (electric teal) + keep violet as gradient endpoint
+- result: `linear-gradient(135deg, #00C8E8, #7C3AED)` — teal-electric × violet
+
+### 2.5 Name the hybrid
+
+Requirements:
+- 2–3 word compound noun or adjective + noun
+- Must NOT be a concatenation of parent names (not "glass-core" or "warm-brutalist")
+- Must evoke the resolved tension — what the interface *feels like*, not what it's made of
+- Should be memorable and suggest a specific vibe
+
+**Naming patterns:**
+| Pattern | Example |
+|---|---|
+| Material + Role | `aurora-command`, `crystal-forge`, `void-craft` |
+| Texture + Purpose | `warm-terminal`, `raw-glass`, `cold-editorial` |
+| Atmosphere + Function | `dusk-ops`, `ember-dashboard`, `frost-bureau` |
+| Poetic compound | `eclipse-ui`, `obsidian-core`, `solar-canvas` |
+
+After naming: confirm it is not in `naming-registry.md`. If taken, iterate.
+
+### 2.6 Write the three pillars
+
+Every AIOSON design skill defines its identity through three pillars. Write them for the hybrid now, before generating any file.
+
+Each pillar is a short paragraph (3–5 sentences) describing one non-negotiable visual principle. The three must be distinct and together tell the full story of the hybrid.
+
+Structure:
+```
+1. [Substrate + surface model] — how depth is created
+2. [Structure + rhythm model] — how information is organized
+3. [Accent + signature model] — what the eye remembers
+```
+
+If you can't write three distinct, non-overlapping pillars, the hybrid doesn't have a clear enough identity. Revise the crossover spec before generating.
+
+### 2.7 Optional modifier ownership
+
+If the user selected modifier skills, assign each one a narrow lane.
+
+Allowed modifier lanes:
+- accent refinement
+- motion language
+- landing-page / website composition
+- one small component family
+
+Forbidden modifier lanes:
+- substrate / background model
+- layout structure
+- density default
+- navigation architecture
+
+If you cannot describe the modifier contribution in one short sentence, drop the modifier.
+
+---
+
+## Phase 3 — Crossover Spec
+
+A crossover spec is a table mapping every design dimension to its source.
+
+### 3.1 Dimension map
+
+Fill in this table for the chosen pair:
+
+| Dimension | Source | Value / Rule |
+|---|---|---|
+| Background model | A or B | e.g. "gradient substrate from glassmorphism" |
+| Surface treatment | A or B or NEW | e.g. "dark-tinted glass from hybrid" |
+| Layout system | A or B | e.g. "command shell from cognitive-core" |
+| Navigation pattern | A or B | e.g. "topbar + sidebar from cognitive-core" |
+| Typography | A or B or NEW | e.g. "Inter + JetBrains Mono from cognitive-core" |
+| Heading scale | A or B | e.g. "bold headings from cognitive-core" |
+| Accent primary | NEW | e.g. "#00C8E8 teal-electric" |
+| Accent secondary | NEW | e.g. "#7C3AED violet" |
+| Accent gradient | NEW | e.g. "linear-gradient(135deg, #00C8E8, #7C3AED)" |
+| Depth model | A, B, or NEW | e.g. "blur-based layers from glassmorphism" |
+| Border style | A or B or NEW | e.g. "luminous rgba white from glassmorphism" |
+| Shadow style | NEW | e.g. "teal-electric tinted shadows" |
+| Density default | A or B | e.g. "compact from cognitive-core" |
+| Border radius | A or B | e.g. "generous (16px+) from glassmorphism" |
+| Mono labels | A or B or none | e.g. "section rails only from cognitive-core" |
+| New signature | NEW | e.g. "dark glass panels revealing aurora gradient" |
+
+### 3.2 New elements (things neither parent has)
+
+List at least 3 elements that are genuinely new — not in parent A, not in parent B.
+
+These are the hybrid's creative contribution:
+- A new surface type, a new interaction pattern, a new composition rule
+- Something that only makes sense because BOTH parents are in the mix
+
+Example from aurora-command-ui:
+1. **Dark-tinted glass** — glassmorphism's glass is white-transparent; cognitive-core's surfaces are solid dark. The hybrid invents dark-tinted glass (`rgba(10,14,26,0.65)`) that is neither.
+2. **Gradient stat numbers** — cognitive-core has plain white stat numbers; glassmorphism puts gradients on hero text. The hybrid puts the teal→violet gradient on operational stat numbers specifically.
+3. **Aurora glow shadows** — cognitive-core uses black shadows; glassmorphism uses violet-tinted shadows. The hybrid uses teal-electric shadows, which only makes sense because the teal accent is "operational signal" (from cognitive-core) applied to a glass system (from glassmorphism).
+
+### 3.3 Conflict resolution
+
+When both parents claim the same dimension, use this priority order:
+1. **Substrate parent wins background** — no exceptions
+2. **Structure parent wins layout and density** — no exceptions
+3. **For everything else**: whichever parent has the more distinctive/unusual approach wins. The blend wins only if it creates a new element that didn't exist before.
+4. **Modifiers never override the 2 rules above.** If a modifier conflicts with a primary parent on substrate or structure, the modifier loses automatically.
+
+### 3.4 Anti-blend rules
+
+Never do these:
+- Average the two accent colors and use the average → the hybrid looks washed out
+- Use both parent layout systems simultaneously → the interface looks confused
+- Apply parent A's texture at 50% and parent B's texture at 50% → neither reads clearly
+- Keep both parent backgrounds in different sections → the substrate must be unified
+- Let a modifier become a stealth third parent → the identity collapses
+
+### 3.5 Modifier map (optional)
+
+If modifiers exist, add this small table after the dimension map:
+
+| Modifier | Allowed lane | Concrete contribution |
+|---|---|---|
+| `modifier-skill` | motion | "springier reveal timings for marketing sections only" |
+
+Keep this table short. Zero to 2 rows maximum in the default flow, or zero to 3 rows only in advanced mode.
+
+---
+
+## Crossover spec output format
+
+After completing phases 2 and 3, produce this summary before writing any file:
+
+```
+HYBRID: {name}
+PARENTS: {skill_a} × {skill_b}
+MODIFIERS: {optional list or "none"}
+TENSION: {one sentence}
+
+SUBSTRATE: {parent} — {substrate value}
+STRUCTURE: {parent} — {what it contributes}
+ACCENT: primary={value}, secondary={value}, gradient={value}
+
+PILLARS:
+1. {pillar title}: {3–5 sentences}
+2. {pillar title}: {3–5 sentences}
+3. {pillar title}: {3–5 sentences}
+
+DIMENSION MAP: (filled table)
+
+MODIFIER MAP: (only if modifiers exist)
+
+NEW ELEMENTS:
+- {element 1}
+- {element 2}
+- {element 3}
+```
+
+This summary is NOT a file. It lives in the conversation and guides file generation.
+Once the user confirms: proceed to Phase 4 (file generation).

package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md

@@ -0,0 +1,88 @@
+# Naming Registry — design-hybrid-forge
+
+Load when naming a new hybrid or checking for conflicts.
+
+---
+
+## Registered hybrids
+
+| Hybrid name | Parents | Shipped | Domain |
+|---|---|---|---|
+| `aurora-command-ui` | cognitive-core-ui × glassmorphism-ui | 2026-03-29 | SOC, AI platforms, dev tools |
+
+---
+
+## Naming conventions
+
+### Rules
+
+1. The name must be a compound of 2–3 words separated by hyphens.
+2. Must end in `-ui` (consistent with native skills).
+3. Must NOT contain either parent name (not "glass-core-ui", not "warm-glass-ui").
+4. Must evoke the resolved creative tension — the hybrid's *vibe*, not its recipe.
+5. Must be original — check this registry before finalizing.
+
+### Patterns that work
+
+| Pattern | Examples |
+|---|---|
+| `{atmosphere}-{function}-ui` | `aurora-command-ui`, `dusk-ops-ui`, `frost-bureau-ui` |
+| `{material}-{role}-ui` | `crystal-forge-ui`, `void-craft-ui`, `obsidian-core-ui` |
+| `{temperature}-{structure}-ui` | `warm-terminal-ui`, `cold-editorial-ui`, `ember-grid-ui` |
+| `{light}-{discipline}-ui` | `shadow-data-ui`, `neon-ledger-ui`, `pale-signal-ui` |
+
+### Patterns to avoid
+
+- Concatenating parent names: `glass-cognitive-ui`, `brutalist-warm-ui` ✕
+- Generic terms: `modern-ui`, `premium-dark-ui`, `clean-glass-ui` ✕
+- Overclaiming: `perfect-ui`, `ultimate-command-ui` ✕
+- Too abstract with no feel: `hybrid-alpha-ui`, `variant-b-ui` ✕
+
+---
+
+## Name ideas bank (unclaimed)
+
+The following names are available for future hybrids. They are not reserved — first hybrid that ships with a matching identity claims the name.
+
+### Dark + glass tier
+- `void-glass-ui` — dark structural void with glass transparency
+- `eclipse-dashboard-ui` — dark command, glass panels, celestial depth
+- `obsidian-signal-ui` — black-glass surfaces with sharp operational precision
+- `midnight-forge-ui` — deep dark atmosphere with raw structural energy
+
+### Warm + structured tier
+- `ember-command-ui` — warm earthy palette meeting command center density
+- `clay-terminal-ui` — terracotta palette over raw grid structure
+- `warm-bureau-ui` — humanized command center, serif meets mono
+- `amber-ops-ui` — golden-warm atmosphere with operational structure
+
+### Raw + luminous tier
+- `brutalist-glass-ui` — raw borders made luminous through glass
+- `frost-grid-ui` — neo-brutalist structure with glass frost treatment
+- `chalk-signal-ui` — rough texture with precision data signals
+- `raw-aurora-ui` — structural honesty floating on a glass aurora
+
+### Editorial + depth tier
+- `cinema-data-ui` — editorial cinematic rhythm with data density
+- `manifesto-ops-ui` — bold editorial headlines + operational panels
+- `dark-editorial-glass-ui` — editorial structure with glass depth layers
+- `ink-command-ui` — editorial typography commanding operational data
+
+### Clean + luminous tier
+- `crystalline-saas-ui` — minimal glass precision for enterprise
+- `cloud-command-ui` — clean systematic structure with glass elevation
+- `pale-aurora-ui` — light glass system over soft gradient, enterprise-grade
+
+---
+
+## How to register a new hybrid
+
+Only after explicit core promotion, add a row to the "Registered hybrids" table with:
+- The exact skill name used in the directory
+- Both parent skill names (alphabetical order)
+- The date shipped (`YYYY-MM-DD`)
+- 3–4 word domain description
+
+Also remove the name from the ideas bank if it was claimed from there.
+
+Project-local hybrids do not update this registry automatically. They should keep their chosen name in `.skill-meta.json` until a curator promotes them to core.

package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md

@@ -0,0 +1,291 @@
+# Output Contract — design-hybrid-forge
+
+Load when running Phases 4 and 5 (skill generation + preview generation).
+
+Defines exactly what each file must contain and the minimum quality bar.
+
+---
+
+## File generation order
+
+Write in this order — each file informs the next:
+
+1. `SKILL.md` — identity + rules (uses crossover spec from phase 3)
+2. `references/design-tokens.md` — all CSS variables (uses accent + substrate from phase 2)
+3. `references/art-direction.md` — expression modes + signature library (uses pillars from phase 2)
+4. `references/components.md` — component library (uses tokens + art direction)
+5. `references/patterns.md` — page layouts (uses components)
+6. `references/dashboards.md` — dashboard presets (uses patterns + tokens)
+7. `references/websites.md` — landing patterns (uses components + art direction)
+8. `references/motion.md` — animations (uses tokens + components)
+9. `.skill-meta.json` — author, parentage, generator, install/distribution metadata
+10. `previews/{name}.html` — dashboard preview (uses all above)
+11. `previews/{name}-website.html` — landing preview (uses all above)
+12. `AGENTS.md` — register the installed skill section when that file exists
+
+---
+
+## File-by-file requirements
+
+### SKILL.md
+
+Required sections (must all be present):
+- Frontmatter: `name`, `description` (includes activation keywords)
+- One-paragraph system description
+- `## Package structure` (directory tree)
+- `## Activation rules` (when to load / when not to)
+- `## Responsibility boundary` (defines / does not decide)
+- `## Loading guide` (table: task → which references to load)
+- `## Visual signature — three pillars` (the three from phase 2)
+- `## Hybrid DNA` (from A / from B / new in hybrid — explicit)
+- `## Modifier DNA` (only if modifiers were used)
+- `## Variation Overlay` (only if a variation preset / overlay was selected)
+- `## Theme system` (default theme + optional, HTML data-theme snippet)
+- `## Visual DNA` (complete CSS color specs for dark + light, including hex values)
+- `## Layout structure` (ASCII diagram of the main app shell)
+- `## Signature details` (list of specific CSS rules for the signature moves)
+- `## Application rules` (7–10 binding rules)
+- `## Intent before visuals` (3 questions + bad/good examples)
+- `## Workflow discipline` (7-step checklist)
+- `## Non-negotiable quality gates` (8–12 gates)
+- `## Positioning vs parent skills` (comparison table vs both parents)
+- `## Delivery modes` (greenfield + brownfield)
+
+The file must state clearly that the hybrid is selected as one design skill and must not be blended live with other active design skills.
+
+### references/design-tokens.md
+
+Required content:
+- Typography strategy (system vs Google Fonts decision)
+- Complete `:root` block: typography tokens, spacing (4px rhythm), radius, transitions, z-index
+- `[data-theme="dark"]` block: ALL color tokens
+- `[data-theme="light"]` block: ALL color tokens
+- **Hybrid glass/surface tokens** (unique to this hybrid — the new surface system)
+- Shadow tokens (tinted with hybrid accent — never plain black)
+- Layout tokens (sidebar width, nav height, content widths)
+- Breakpoints
+- Interaction guardrails (at least 4 rules)
+- Token scope guardrails (rule 1–4 with safe/unsafe examples)
+- Admin compact density scale (if structure parent = cognitive-core or clean-saas)
+
+If modifiers were used, token changes must stay inside their allowed lane. Example: a motion modifier must not redefine layout width tokens.
+If a variation overlay exists, reflect it in tokens only where it changes expression without violating the parent-owned structure/substrate rules.
+
+Minimum: dark theme has at least 8 bg/surface tokens, 6 accent tokens, 6 semantic tokens, 4 shadow tokens.
+
+### references/art-direction.md
+
+Required content:
+- Core rule ("same system, different expressions")
+- Mandatory pre-build outputs (7 items)
+- **5 expression modes** — each with: for/feel/composition/visual cues/signature ideas
+- Signature library (table with ≥10 reusable details)
+- Anti-generic tests (≥4 tests, at least one unique to this hybrid)
+- What makes each mode distinct (table contrasting the 5 modes)
+
+If modifiers exist, call out exactly where they are allowed to appear and where they are forbidden.
+If a variation overlay exists, describe how it changes the expression modes without turning them into unrelated themes.
+
+### references/components.md
+
+Required: ≥20 named components, each with:
+- Name and purpose
+- Key CSS properties (using tokens, never hardcoded values)
+- Hover/active/focus states
+- The hybrid-specific surface treatment (glass/texture/depth)
+
+Must include: top bar, sidebar, stat card, section header, data table, badge/chip, modal, button variants (primary gradient + secondary + ghost), form input, dropdown, at least one hybrid-specific component that doesn't exist in either parent.
+
+### references/patterns.md
+
+Required: ≥6 page layout patterns, each with:
+- ASCII diagram of the layout
+- CSS skeleton (grid/flex, sizing, overflow)
+- Fallback rules
+- Use case (when to choose this pattern)
+
+Must include: main app shell, dashboard shell (≥1 operational variant), auth page, settings page.
+
+### references/dashboards.md
+
+Required:
+- General rules section (≥6 rules)
+- Chart color palette (CSS variables)
+- Chart rendering rules (one per chart type)
+- **5 dashboard presets**, each with:
+  - Expression mode
+  - Feel (concrete words)
+  - Domain vocabulary
+  - Full layout description (stat row + main panels + table/feed)
+  - Signature move
+
+### references/websites.md
+
+Required:
+- General rules section
+- Page shell CSS
+- ≥2 hero variants (at least one split layout, one centered/atmospheric)
+- ≥4 section patterns (feature grid, proof rail, pricing, testimonials/CTA)
+- Footer pattern
+- Anti-patterns list (≥5)
+
+### references/motion.md
+
+Required:
+- Timing philosophy (3–4 sentences)
+- Core easing functions (CSS custom properties)
+- ≥8 named animations, each with CSS keyframes + usage context
+- Reduced motion block (`@media (prefers-reduced-motion: reduce)`)
+- Performance rules (≥4)
+
+### .skill-meta.json
+
+Required content:
+- `source: "generated"`
+- `generation_mode: "project-local"`
+- `installedAt`
+- `author.name` when the user provided one
+- `generator.skill: "design-hybrid-forge"`
+- `generator.model` when the runtime/tool exposes it
+- `generator.tool` when known (`claude`, `codex`, etc.)
+- `parents.primary` with exactly 2 entries
+- `parents.modifiers` with 0–2 entries by default, or 0–3 only when advanced mode was enabled
+- `promotion.status` (`local`, `candidate`, `promoted`)
+- `variation_profile` when a preset/overlay was selected
+- `variation_profile.modifier_policy` when the active preset declared it
+
+Recommended shape:
+
+```json
+{
+  "source": "generated",
+  "generation_mode": "project-local",
+  "installedAt": "2026-03-30T00:00:00.000Z",
+  "author": {
+    "name": "ACME Design Team"
+  },
+  "generator": {
+    "skill": "design-hybrid-forge",
+    "tool": "codex",
+    "model": "gpt-5.x"
+  },
+  "parents": {
+    "primary": ["cognitive-core-ui", "glassmorphism-ui"],
+    "modifiers": ["bold-editorial-ui"]
+  },
+  "variation_profile": {
+    "modifier_policy": "up_to_2_modifiers",
+    "style_modes": ["cinematic-immersive"],
+    "motion_system": ["scroll-driven-scenes"],
+    "advanced_css": ["scroll-driven-animations", "view-transition-api"]
+  },
+  "promotion": {
+    "status": "local"
+  }
+}
+```
+
+### AGENTS.md registration
+
+When `AGENTS.md` exists in the project, update the "Installed skills" section so Codex can invoke the new hybrid via `@{slug}`.
+
+If `.aioson/context/design-variation-preset.md` was consumed for the generation:
+- preserve the history snapshot under `.aioson/context/history/design-variation-presets/`
+- remove or archive the active preset from `.aioson/context/` after the hybrid files are finished
+- do not treat that preset as the permanent visual configuration of the project
+
+Required row format:
+
+```markdown
+| @{slug} | `.aioson/installed-skills/{slug}/SKILL.md` | {short description} |
+```
+
+---
+
+## Preview requirements
+
+### Dashboard preview (`previews/{name}.html`)
+
+Must show:
+- The aurora/substrate background visible through glass panels
+- Command strip with live dots (if structure parent = cognitive-core)
+- Top bar with logo + tab nav + actions
+- Sidebar with section labels + nav items
+- Stat row (4 cards minimum)
+- At least one chart (can be SVG simulation)
+- At least one feed or alert panel
+- Full data table (with header + 3–5 rows)
+- All glass surfaces with `::before` reflection
+- Hybrid accent gradient on at least 3 visible elements
+- AIOSON badge (fixed, top-right)
+- Must render correctly with no external dependencies beyond Google Fonts
+
+### Landing page preview (`previews/{name}-website.html`)
+
+Must show:
+- Full-page substrate background (fixed, aurora gradient or equivalent)
+- Glass navigation bar (fixed, scroll-opaque behavior via CSS class)
+- Hero section (split or centered — not a plain two-column with no visual punch)
+- At least one decorative atmosphere element (orb, gradient blob, etc.)
+- Proof rail / social proof strip
+- Feature cards section (≥6 cards, 3-column grid)
+- Pricing section (3 tiers, featured card visually distinct with gradient border)
+- Footer with glass treatment
+- Hybrid accent gradient on hero heading or CTA
+- AIOSON badge
+
+### Technical requirements (both previews)
+
+- Single `.html` file (no external CSS or JS files)
+- Google Fonts loaded via `<link>` (Inter + JetBrains Mono)
+- All CSS in `<style>` tag in `<head>`
+- All design tokens as CSS custom properties in `:root`
+- Glass elements use `@supports (backdrop-filter: blur(1px))` fallback or document that they don't need it
+- No JavaScript required for visual display (JS only for optional interactions)
+- Renders at 1440px wide (the preview standard)
+
+---
+
+## Optional promotion requirements
+
+Only for explicit core-promotion mode:
+- prepare a gallery card for `docs/design-previews/index.html`
+- prepare the hybrid for `.aioson/skills/design/{name}/`
+- update naming/registry files only in the AIOSON core repo
+
+### Gallery card requirements
+
+When adding to `index.html` in core-promotion mode:
+
+```html
+<!-- Hybrid card structure -->
+<div class="skill-card">
+  <div class="preview-thumb thumb-{name}">
+    <span class="preview-label">{3-word vibe description}</span>
+  </div>
+  <div class="card-body">
+    <div class="card-header">
+      <span class="card-name accent-{name}">{Display Name}</span>
+      <span class="hybrid-badge">✦ Hybrid</span>    <!-- REQUIRED for hybrids -->
+    </div>
+    <p class="card-description">
+      {Parent A} × {Parent B}. {2–3 sentence description of the hybrid identity.}
+    </p>
+    <div class="card-meta">
+      <!-- 4 use case pills -->
+    </div>
+    <div class="card-links">
+      <a href="{name}.html">Dashboard</a>
+      <a href="{name}-website.html">Landing page</a>
+    </div>
+  </div>
+</div>
+```
+
+Thumbnail CSS must:
+- Use the hybrid's substrate as background
+- Include a `::before` pseudo-element showing the glass surface treatment
+- Include an atmospheric `::after` showing the accent glow
+- Be visually distinct from both parent thumbnails in the gallery
+
+Update the skill count in `hero-meta` and `footer`.