@jaimevalasek/aioson 1.8.0 → 1.9.0

package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md

@@ -1,208 +1,208 @@
-# Quality Gates — design-hybrid-forge
-
-Load when validating a hybrid before shipping (Phase 6).
-
-Run all gates in order. A hybrid that fails any gate is not done — return to the phase indicated.
-
----
-
-## Gate A — Identity clarity
-
-**Question:** Can you describe this hybrid in one sentence without naming its parents?
-
-Pass: The sentence names a specific vibe, specific user, specific use case.
-> "A dark glass command center where operational precision lives inside an aurora gradient — for teams running security operations or AI platforms."
-
-Fail: The sentence is vague, generic, or only makes sense by referencing the parents.
-> "It combines dark dashboard style with glass effects."
-
-**If fail:** Return to Phase 2 (crossover spec) — the identity is not clear enough.
-
----
-
-## Gate B — The third thing test
-
-**Question:** Name 3 elements in the hybrid that exist in NEITHER parent.
-
-Pass: You can name 3 specific CSS values, interaction patterns, or composition rules that are genuinely new.
-
-Fail: Every element in the hybrid can be traced back to parent A or parent B — the hybrid is a mashup, not a synthesis.
-
-**If fail:** Return to Phase 3 — identify at minimum 3 new elements before writing files.
-
----
-
-## Gate C — Accent fusion test
-
-**Question:** Is the accent gradient a genuine fusion, or is it just parent A's color + parent B's color next to each other?
-
-Run this test: Cover the gradient label. Show only the gradient swatch to someone who knows both parents. Would they say "oh, that's just A and B stacked"?
-
-Pass: The gradient produces a new color perception. The transition between the two endpoints creates a third color that is the hybrid's identity.
-
-Fail: The gradient is jarring or reads as "two separate accents." No new color emerges.
-
-**If fail:** Adjust the gradient angle, midpoint color, or one endpoint. The goal is a gradient that reads as one accent, not two.
-
----
-
-## Gate D — Substrate visibility test
-
-**Question:** Is the substrate visible through the glass/surface panels?
-
-Test procedure:
-1. Open the dashboard preview.
-2. Look at the glass stat cards. Can you see the background gradient through them?
-3. Look at the sidebar. Can you see the gradient?
-
-Pass: The aurora/gradient is clearly visible through at least 60% of glass surfaces. The interface "lives inside" the background.
-
-Fail: The glass panels are too opaque — the background looks like a solid dark or light color behind the panels, not a visible gradient.
-
-**If fail:** Reduce glass surface opacity. For dark glass: stay at or below `rgba(r,g,b,0.75)`. For white glass: stay at or below `rgba(255,255,255,0.70)`. Do not "solidify" the panels.
-
----
-
-## Gate E — Structure legibility test
-
-**Question:** Does the command/layout structure read clearly, or does the aesthetic overwhelm the hierarchy?
-
-Test procedure:
-1. Open the dashboard preview.
-2. Blur your eyes. Can you still see: top bar / sidebar / content area / section headers?
-3. Without reading text, can you identify which element is the stat number vs body copy vs section label?
-
-Pass: The layout structure is clear at a glance, even through the glass/aesthetic treatment.
-
-Fail: The blur/gradient/texture treatment makes sections bleed into each other. Hierarchy is lost.
-
-**If fail:** Increase contrast between structure-defining elements (top bar, sidebar, section headers) and content areas. The glass treatment must respect structure, not obscure it.
-
----
-
-## Gate F — Sameness test
-
-**Question:** Could this hybrid be mistaken for a default AI dashboard, a Tailwind UI starter, or a generic dark theme?
-
-Test procedure:
-1. Remove all brand names from the preview.
-2. Show it alongside 3 other dark UI screenshots.
-3. Does it have at least one immediately distinctive visual element?
-
-Pass: There is one element that could not exist in a generic dashboard — something that is clearly the result of this specific hybrid pairing.
-
-Fail: The design looks like "dark + blur" with no further identity.
-
-**If fail:** Identify the signature move and amplify it. Make it appear in at least 5 places. The signature should be the first thing you notice.
-
----
-
-## Gate G — Parent distinction test
-
-**Question:** Is the hybrid visually distinct from BOTH parents?
-
-Test procedure:
-1. Open the dashboard preview alongside `cognitive-core-ui.html` and `glassmorphism-ui.html` (or the two actual parents).
-2. Does the hybrid look like parent A? If yes — the aesthetic from parent B was not applied strongly enough.
-3. Does the hybrid look like parent B? If yes — the structure from parent A was not applied strongly enough.
-
-Pass: Looking at all three side by side, the hybrid is clearly different from both parents while sharing DNA with each.
-
-Fail: The hybrid looks like a minor variant of one parent.
-
-**If fail:** Identify which parent is dominant and push the contribution from the other parent harder. Usually this means making the new elements (Gate B) more prominent.
-
----
-
-## Gate H — Preview completeness
-
-**Question:** Do both HTML previews satisfy all requirements from `output-contract.md`?
-
-Checklist (dashboard preview):
-- [ ] Substrate background visible through glass panels
-- [ ] Command strip or equivalent live indicator (if structure parent warrants it)
-- [ ] Top bar + sidebar + stat row + chart + feed/alert + data table
-- [ ] Hybrid accent gradient on ≥3 visible elements
-- [ ] `::before` reflection on glass cards
-- [ ] AIOSON badge with hybrid accent
-
-Checklist (landing preview):
-- [ ] Full-page substrate background
-- [ ] Glass navigation bar
-- [ ] Hero section (not a generic centered CTA)
-- [ ] Atmospheric element (orb, gradient blob)
-- [ ] Proof rail + feature grid + pricing (3 tiers, featured card distinct)
-- [ ] Footer with glass treatment
-- [ ] AIOSON badge
-
-Pass: All items checked.
-Fail: Return to Phase 5 and complete the missing elements.
-
----
-
-## Gate I — Metadata integrity
-
-**Question:** Does `.skill-meta.json` accurately describe the hybrid?
-
-Checklist:
-- [ ] `source` is `generated`
-- [ ] `generation_mode` is `project-local`
-- [ ] `parents.primary` contains exactly 2 skills
-- [ ] `parents.modifiers` contains at most 2 skills by default, or at most 3 only when advanced mode was explicitly enabled
-- [ ] `author.name` is filled when the user provided it
-- [ ] `generator.skill` is `design-hybrid-forge`
-- [ ] `generator.model` is recorded when the runtime exposed it
-- [ ] `variation_profile.modifier_policy` matches the generation mode when a preset was used
-
-Pass: The metadata is present and matches the generated skill.
-Fail: Return to Phase 4 and fix the metadata before distribution.
-
----
-
-## Gate J — Three.js modifier validation (only when `threejs-spatial` is a modifier)
-
-**Question:** Does the Three.js layer enhance without dominating?
-
-Checklist:
-- [ ] WebGL support check present — graceful CSS fallback when WebGL unavailable
-- [ ] `prefers-reduced-motion: reduce` disables the canvas entirely
-- [ ] Mobile particle count ≤ 30% of desktop count
-- [ ] Canvas is `alpha: true` — CSS gradient background visible through it
-- [ ] Accent colors from primary parents flow through Three.js scene parameters (point lights, particle colors, glow)
-- [ ] Three.js scene is background/scene layer only — HTML layout and CSS components are unaffected
-- [ ] No external texture/model URLs — all assets are procedural (geometry, gradients, shaders)
-- [ ] `IntersectionObserver` or equivalent stops render loop when canvas is off-screen — uses `cancelAnimationFrame` + null guard, not `renderer.setAnimationLoop(null)` (which only controls the renderer's internal loop, not `requestAnimationFrame`)
-- [ ] `beforeunload` disposes renderer, geometries, and materials — no memory leaks on page unload
-
-Pass: Three.js enhances without violating the design skill's visual language.
-Fail: Fix the specific violation. Three.js is a modifier — it serves the hybrid, not the other way around.
-
----
-
-## Final ship checklist — project-local mode
-
-Before marking the project-local hybrid as done:
-
-- [ ] All 8 skill files written (SKILL.md + 7 references)
-- [ ] `.skill-meta.json` written
-- [ ] Both HTML previews written inside `previews/`
-- [ ] Variation overlay reflected in previews and metadata when one was selected
-- [ ] Active preset removed or archived from `.aioson/context/design-variation-preset.md` after successful generation
-- [ ] History snapshot preserved in `.aioson/context/history/design-variation-presets/`
-- [ ] `AGENTS.md` updated when it exists
-- [ ] Tool-native mirrors updated if the directories exist
-- [ ] All quality gates A through I passed
-
-When all are checked: the project-local hybrid is shipped.
-
-## Final ship checklist — core-promotion mode
-
-Only for explicit promotion back to AIOSON core:
-
-- [ ] Project-local checklist already passed
-- [ ] `.aioson/skills/design/{slug}/` prepared in the core repo
-- [ ] `docs/design-previews/index.html` updated with `✦ Hybrid` badge
-- [ ] `naming-registry.md` updated with the new hybrid entry
-- [ ] `pair-compatibility.md` updated (add pair to completed list)
-
-When all are checked: the hybrid is ready for PR / marketplace curation.
+# Quality Gates — design-hybrid-forge
+
+Load when validating a hybrid before shipping (Phase 6).
+
+Run all gates in order. A hybrid that fails any gate is not done — return to the phase indicated.
+
+---
+
+## Gate A — Identity clarity
+
+**Question:** Can you describe this hybrid in one sentence without naming its parents?
+
+Pass: The sentence names a specific vibe, specific user, specific use case.
+> "A dark glass command center where operational precision lives inside an aurora gradient — for teams running security operations or AI platforms."
+
+Fail: The sentence is vague, generic, or only makes sense by referencing the parents.
+> "It combines dark dashboard style with glass effects."
+
+**If fail:** Return to Phase 2 (crossover spec) — the identity is not clear enough.
+
+---
+
+## Gate B — The third thing test
+
+**Question:** Name 3 elements in the hybrid that exist in NEITHER parent.
+
+Pass: You can name 3 specific CSS values, interaction patterns, or composition rules that are genuinely new.
+
+Fail: Every element in the hybrid can be traced back to parent A or parent B — the hybrid is a mashup, not a synthesis.
+
+**If fail:** Return to Phase 3 — identify at minimum 3 new elements before writing files.
+
+---
+
+## Gate C — Accent fusion test
+
+**Question:** Is the accent gradient a genuine fusion, or is it just parent A's color + parent B's color next to each other?
+
+Run this test: Cover the gradient label. Show only the gradient swatch to someone who knows both parents. Would they say "oh, that's just A and B stacked"?
+
+Pass: The gradient produces a new color perception. The transition between the two endpoints creates a third color that is the hybrid's identity.
+
+Fail: The gradient is jarring or reads as "two separate accents." No new color emerges.
+
+**If fail:** Adjust the gradient angle, midpoint color, or one endpoint. The goal is a gradient that reads as one accent, not two.
+
+---
+
+## Gate D — Substrate visibility test
+
+**Question:** Is the substrate visible through the glass/surface panels?
+
+Test procedure:
+1. Open the dashboard preview.
+2. Look at the glass stat cards. Can you see the background gradient through them?
+3. Look at the sidebar. Can you see the gradient?
+
+Pass: The aurora/gradient is clearly visible through at least 60% of glass surfaces. The interface "lives inside" the background.
+
+Fail: The glass panels are too opaque — the background looks like a solid dark or light color behind the panels, not a visible gradient.
+
+**If fail:** Reduce glass surface opacity. For dark glass: stay at or below `rgba(r,g,b,0.75)`. For white glass: stay at or below `rgba(255,255,255,0.70)`. Do not "solidify" the panels.
+
+---
+
+## Gate E — Structure legibility test
+
+**Question:** Does the command/layout structure read clearly, or does the aesthetic overwhelm the hierarchy?
+
+Test procedure:
+1. Open the dashboard preview.
+2. Blur your eyes. Can you still see: top bar / sidebar / content area / section headers?
+3. Without reading text, can you identify which element is the stat number vs body copy vs section label?
+
+Pass: The layout structure is clear at a glance, even through the glass/aesthetic treatment.
+
+Fail: The blur/gradient/texture treatment makes sections bleed into each other. Hierarchy is lost.
+
+**If fail:** Increase contrast between structure-defining elements (top bar, sidebar, section headers) and content areas. The glass treatment must respect structure, not obscure it.
+
+---
+
+## Gate F — Sameness test
+
+**Question:** Could this hybrid be mistaken for a default AI dashboard, a Tailwind UI starter, or a generic dark theme?
+
+Test procedure:
+1. Remove all brand names from the preview.
+2. Show it alongside 3 other dark UI screenshots.
+3. Does it have at least one immediately distinctive visual element?
+
+Pass: There is one element that could not exist in a generic dashboard — something that is clearly the result of this specific hybrid pairing.
+
+Fail: The design looks like "dark + blur" with no further identity.
+
+**If fail:** Identify the signature move and amplify it. Make it appear in at least 5 places. The signature should be the first thing you notice.
+
+---
+
+## Gate G — Parent distinction test
+
+**Question:** Is the hybrid visually distinct from BOTH parents?
+
+Test procedure:
+1. Open the dashboard preview alongside `cognitive-core-ui.html` and `glassmorphism-ui.html` (or the two actual parents).
+2. Does the hybrid look like parent A? If yes — the aesthetic from parent B was not applied strongly enough.
+3. Does the hybrid look like parent B? If yes — the structure from parent A was not applied strongly enough.
+
+Pass: Looking at all three side by side, the hybrid is clearly different from both parents while sharing DNA with each.
+
+Fail: The hybrid looks like a minor variant of one parent.
+
+**If fail:** Identify which parent is dominant and push the contribution from the other parent harder. Usually this means making the new elements (Gate B) more prominent.
+
+---
+
+## Gate H — Preview completeness
+
+**Question:** Do both HTML previews satisfy all requirements from `output-contract.md`?
+
+Checklist (dashboard preview):
+- [ ] Substrate background visible through glass panels
+- [ ] Command strip or equivalent live indicator (if structure parent warrants it)
+- [ ] Top bar + sidebar + stat row + chart + feed/alert + data table
+- [ ] Hybrid accent gradient on ≥3 visible elements
+- [ ] `::before` reflection on glass cards
+- [ ] AIOSON badge with hybrid accent
+
+Checklist (landing preview):
+- [ ] Full-page substrate background
+- [ ] Glass navigation bar
+- [ ] Hero section (not a generic centered CTA)
+- [ ] Atmospheric element (orb, gradient blob)
+- [ ] Proof rail + feature grid + pricing (3 tiers, featured card distinct)
+- [ ] Footer with glass treatment
+- [ ] AIOSON badge
+
+Pass: All items checked.
+Fail: Return to Phase 5 and complete the missing elements.
+
+---
+
+## Gate I — Metadata integrity
+
+**Question:** Does `.skill-meta.json` accurately describe the hybrid?
+
+Checklist:
+- [ ] `source` is `generated`
+- [ ] `generation_mode` is `project-local`
+- [ ] `parents.primary` contains exactly 2 skills
+- [ ] `parents.modifiers` contains at most 2 skills by default, or at most 3 only when advanced mode was explicitly enabled
+- [ ] `author.name` is filled when the user provided it
+- [ ] `generator.skill` is `design-hybrid-forge`
+- [ ] `generator.model` is recorded when the runtime exposed it
+- [ ] `variation_profile.modifier_policy` matches the generation mode when a preset was used
+
+Pass: The metadata is present and matches the generated skill.
+Fail: Return to Phase 4 and fix the metadata before distribution.
+
+---
+
+## Gate J — Three.js modifier validation (only when `threejs-spatial` is a modifier)
+
+**Question:** Does the Three.js layer enhance without dominating?
+
+Checklist:
+- [ ] WebGL support check present — graceful CSS fallback when WebGL unavailable
+- [ ] `prefers-reduced-motion: reduce` disables the canvas entirely
+- [ ] Mobile particle count ≤ 30% of desktop count
+- [ ] Canvas is `alpha: true` — CSS gradient background visible through it
+- [ ] Accent colors from primary parents flow through Three.js scene parameters (point lights, particle colors, glow)
+- [ ] Three.js scene is background/scene layer only — HTML layout and CSS components are unaffected
+- [ ] No external texture/model URLs — all assets are procedural (geometry, gradients, shaders)
+- [ ] `IntersectionObserver` or equivalent stops render loop when canvas is off-screen — uses `cancelAnimationFrame` + null guard, not `renderer.setAnimationLoop(null)` (which only controls the renderer's internal loop, not `requestAnimationFrame`)
+- [ ] `beforeunload` disposes renderer, geometries, and materials — no memory leaks on page unload
+
+Pass: Three.js enhances without violating the design skill's visual language.
+Fail: Fix the specific violation. Three.js is a modifier — it serves the hybrid, not the other way around.
+
+---
+
+## Final ship checklist — project-local mode
+
+Before marking the project-local hybrid as done:
+
+- [ ] All 8 skill files written (SKILL.md + 7 references)
+- [ ] `.skill-meta.json` written
+- [ ] Both HTML previews written inside `previews/`
+- [ ] Variation overlay reflected in previews and metadata when one was selected
+- [ ] Active preset removed or archived from `.aioson/context/design-variation-preset.md` after successful generation
+- [ ] History snapshot preserved in `.aioson/context/history/design-variation-presets/`
+- [ ] `AGENTS.md` updated when it exists
+- [ ] Tool-native mirrors updated if the directories exist
+- [ ] All quality gates A through I passed
+
+When all are checked: the project-local hybrid is shipped.
+
+## Final ship checklist — core-promotion mode
+
+Only for explicit promotion back to AIOSON core:
+
+- [ ] Project-local checklist already passed
+- [ ] `.aioson/skills/design/{slug}/` prepared in the core repo
+- [ ] `docs/design-previews/index.html` updated with `✦ Hybrid` badge
+- [ ] `naming-registry.md` updated with the new hybrid entry
+- [ ] `pair-compatibility.md` updated (add pair to completed list)
+
+When all are checked: the hybrid is ready for PR / marketplace curation.