@jaimevalasek/aioson 1.7.2 → 1.9.0

package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md

@@ -1,125 +1,125 @@
-# Variation Library — design-hybrid-forge
-
-Load when the user wants the hybrid to feel more unique, extravagant, classic, animated, CSS-forward, or otherwise less "default SaaS".
-
-Updated from a current web scan on **March 30, 2026**. Use these directions as overlays on top of the hybrid's core DNA, never as a replacement for the 2 primary parents.
-
----
-
-## How to use this file
-
-1. Choose **1–2 style modes**
-2. Choose **0–2 layout moves**
-3. Choose **0–2 motion directions**
-4. Choose **0–2 material / texture signals**
-5. Choose **1–2 typography moves**
-6. Choose **0–3 advanced CSS techniques**
-7. Choose **2 anti-sameness guardrails**
-
-If you choose too many items from every category, the result becomes a moodboard instead of a skill.
-
----
-
-## Style modes
-
-| Mode | Use when | Core signal |
-|---|---|---|
-| **Classic editorial** | The user wants timeless, cultured, authoritative UI | Serif-forward hierarchy, measured spacing, mature rhythm |
-| **Extravagant / maximalist** | The user wants a bold, high-personality result | Layered color, dense composition, deliberate abundance |
-| **Cinematic / immersive** | The site should feel like a scene or story world | Atmospheric contrast, chapter-based sections, dramatic reveals |
-| **Playful / dopamine** | The brand benefits from joy and energy | Saturated accents, elastic details, expressive components |
-| **Neo-brutalist / anti-design** | The user wants structure with edge and friction | Hard borders, visible hierarchy, unapologetic layout honesty |
-| **Retrofuturist** | The user wants nostalgic future energy | Chrome, glow, arcade optimism, sci-fi nostalgia |
-| **Luxury modern** | The product needs premium restraint | Selective ornament, wide spacing, exact finishing |
-| **Collage / handmade** | The user wants warmth and irregularity | Mixed media rhythm, visible craft, controlled imperfection |
-
-## Layout moves
-
-| Move | What it changes |
-|---|---|
-| **Asymmetric composition** | Breaks center-aligned sameness with controlled tension |
-| **Narrative scroll scenes** | Turns long pages into chapters instead of repeated sections |
-| **Experimental navigation** | Allows map-like, layered, or unconventional entry patterns |
-| **Dense mosaic** | Uses varied card scales and collage logic for dashboards or showcases |
-| **Split-screen contrast** | Maintains tension between two persistent visual zones |
-| **Signature hero structure** | Forces a memorable opening move instead of a generic hero |
-
-## Motion directions
-
-| Direction | Best for |
-|---|---|
-| **Restrained microinteractions** | Mature B2B, precise tools, classic systems |
-| **Kinetic typography** | Editorial, launch pages, cinematic brands |
-| **Scroll-driven scenes** | Storytelling pages, showcases, immersive marketing |
-| **View transitions** | App-like navigation continuity, single-page polish |
-| **Cursor-reactive motion** | Experimental / premium interactions with pointer-rich UX |
-| **Gamified feedback** | Playful products, onboarding, consumer-facing experiences |
-
-## Material / texture signals
-
-| Signal | Effect |
-|---|---|
-| **Glass layers** | Depth through substrate and translucency |
-| **Grain / noise** | Breaks sterile smoothness and adds tactility |
-| **Paper / editorial tactility** | Print-inspired warmth and cultural depth |
-| **Chrome / metallic** | Reflective future-luxury finish |
-| **Soft tactile UI** | More touchable, product-like controls |
-| **Collage / cutout** | Handmade, layered, artsy expression |
-
-## Typography moves
-
-| Move | Why it helps |
-|---|---|
-| **Bold display type** | Establishes identity fast |
-| **Variable font axes** | Makes typography itself part of the motion/shape system |
-| **Serif revival** | Adds warmth, authority, or cultural depth |
-| **Mono rails** | Adds technical rhythm and operational precision |
-| **Compressed headlines** | Creates cinematic or editorial drama |
-| **Mixed type system** | Distinguishes roles across hero/body/meta layers |
-
-## Advanced CSS techniques
-
-Use only when they reinforce the chosen identity:
-
-- **Scroll-driven animations** — scene logic tied to progress, not generic reveal-once behavior
-- **View Transition API** — continuity between states/routes
-- **Masks / clip-path** — non-rectangular reveals, ornamental cuts, unusual framing
-- **SVG filters / noise** — texture, distortion, displacement, controlled grit
-- **Backdrop filters** — glass depth and layered translucency
-- **3D transforms** — perspective, stacked depth, immersive hero moments
-- **Sticky storytelling** — pinned chapters and staged reveals
-
-## Anti-sameness guardrails
-
-Pick at least 2 and enforce them:
-
-- No generic centered SaaS hero
-- At least one uneven rhythm move
-- At least one domain-specific ornament or motif
-- At least one unmistakable surface treatment
-- Motion must communicate meaning, not filler
-- Typography must do more than label content
-
----
-
-## Implementation rule
-
-The variation overlay modifies the hybrid's **expression**, not its **core DNA**.
-
-Priority order:
-1. Primary parents define substrate and structure
-2. Variation overlay defines expression and anti-sameness pressure
-3. Modifiers, if any, stay inside their narrow lane
-
----
-
-## Current source scan
-
-- Figma resource library on current web design directions:
-  https://www.figma.com/resource-library/web-design-trends/
-- Webflow on variable fonts as active web typography tooling:
-  https://help.webflow.com/hc/en-us/articles/33961307448979-Variable-fonts
-- web.dev on same-document view transitions entering Baseline on October 16, 2025:
-  https://web.dev/blog/same-document-view-transitions-are-now-baseline-newly-available
-- web.dev coverage of Interop 2026, including scroll-driven animations:
-  https://web.dev/blog/interop-2026?hl=en
+# Variation Library — design-hybrid-forge
+
+Load when the user wants the hybrid to feel more unique, extravagant, classic, animated, CSS-forward, or otherwise less "default SaaS".
+
+Updated from a current web scan on **March 30, 2026**. Use these directions as overlays on top of the hybrid's core DNA, never as a replacement for the 2 primary parents.
+
+---
+
+## How to use this file
+
+1. Choose **1–2 style modes**
+2. Choose **0–2 layout moves**
+3. Choose **0–2 motion directions**
+4. Choose **0–2 material / texture signals**
+5. Choose **1–2 typography moves**
+6. Choose **0–3 advanced CSS techniques**
+7. Choose **2 anti-sameness guardrails**
+
+If you choose too many items from every category, the result becomes a moodboard instead of a skill.
+
+---
+
+## Style modes
+
+| Mode | Use when | Core signal |
+|---|---|---|
+| **Classic editorial** | The user wants timeless, cultured, authoritative UI | Serif-forward hierarchy, measured spacing, mature rhythm |
+| **Extravagant / maximalist** | The user wants a bold, high-personality result | Layered color, dense composition, deliberate abundance |
+| **Cinematic / immersive** | The site should feel like a scene or story world | Atmospheric contrast, chapter-based sections, dramatic reveals |
+| **Playful / dopamine** | The brand benefits from joy and energy | Saturated accents, elastic details, expressive components |
+| **Neo-brutalist / anti-design** | The user wants structure with edge and friction | Hard borders, visible hierarchy, unapologetic layout honesty |
+| **Retrofuturist** | The user wants nostalgic future energy | Chrome, glow, arcade optimism, sci-fi nostalgia |
+| **Luxury modern** | The product needs premium restraint | Selective ornament, wide spacing, exact finishing |
+| **Collage / handmade** | The user wants warmth and irregularity | Mixed media rhythm, visible craft, controlled imperfection |
+
+## Layout moves
+
+| Move | What it changes |
+|---|---|
+| **Asymmetric composition** | Breaks center-aligned sameness with controlled tension |
+| **Narrative scroll scenes** | Turns long pages into chapters instead of repeated sections |
+| **Experimental navigation** | Allows map-like, layered, or unconventional entry patterns |
+| **Dense mosaic** | Uses varied card scales and collage logic for dashboards or showcases |
+| **Split-screen contrast** | Maintains tension between two persistent visual zones |
+| **Signature hero structure** | Forces a memorable opening move instead of a generic hero |
+
+## Motion directions
+
+| Direction | Best for |
+|---|---|
+| **Restrained microinteractions** | Mature B2B, precise tools, classic systems |
+| **Kinetic typography** | Editorial, launch pages, cinematic brands |
+| **Scroll-driven scenes** | Storytelling pages, showcases, immersive marketing |
+| **View transitions** | App-like navigation continuity, single-page polish |
+| **Cursor-reactive motion** | Experimental / premium interactions with pointer-rich UX |
+| **Gamified feedback** | Playful products, onboarding, consumer-facing experiences |
+
+## Material / texture signals
+
+| Signal | Effect |
+|---|---|
+| **Glass layers** | Depth through substrate and translucency |
+| **Grain / noise** | Breaks sterile smoothness and adds tactility |
+| **Paper / editorial tactility** | Print-inspired warmth and cultural depth |
+| **Chrome / metallic** | Reflective future-luxury finish |
+| **Soft tactile UI** | More touchable, product-like controls |
+| **Collage / cutout** | Handmade, layered, artsy expression |
+
+## Typography moves
+
+| Move | Why it helps |
+|---|---|
+| **Bold display type** | Establishes identity fast |
+| **Variable font axes** | Makes typography itself part of the motion/shape system |
+| **Serif revival** | Adds warmth, authority, or cultural depth |
+| **Mono rails** | Adds technical rhythm and operational precision |
+| **Compressed headlines** | Creates cinematic or editorial drama |
+| **Mixed type system** | Distinguishes roles across hero/body/meta layers |
+
+## Advanced CSS techniques
+
+Use only when they reinforce the chosen identity:
+
+- **Scroll-driven animations** — scene logic tied to progress, not generic reveal-once behavior
+- **View Transition API** — continuity between states/routes
+- **Masks / clip-path** — non-rectangular reveals, ornamental cuts, unusual framing
+- **SVG filters / noise** — texture, distortion, displacement, controlled grit
+- **Backdrop filters** — glass depth and layered translucency
+- **3D transforms** — perspective, stacked depth, immersive hero moments
+- **Sticky storytelling** — pinned chapters and staged reveals
+
+## Anti-sameness guardrails
+
+Pick at least 2 and enforce them:
+
+- No generic centered SaaS hero
+- At least one uneven rhythm move
+- At least one domain-specific ornament or motif
+- At least one unmistakable surface treatment
+- Motion must communicate meaning, not filler
+- Typography must do more than label content
+
+---
+
+## Implementation rule
+
+The variation overlay modifies the hybrid's **expression**, not its **core DNA**.
+
+Priority order:
+1. Primary parents define substrate and structure
+2. Variation overlay defines expression and anti-sameness pressure
+3. Modifiers, if any, stay inside their narrow lane
+
+---
+
+## Current source scan
+
+- Figma resource library on current web design directions:
+  https://www.figma.com/resource-library/web-design-trends/
+- Webflow on variable fonts as active web typography tooling:
+  https://help.webflow.com/hc/en-us/articles/33961307448979-Variable-fonts
+- web.dev on same-document view transitions entering Baseline on October 16, 2025:
+  https://web.dev/blog/same-document-view-transitions-are-now-baseline-newly-available
+- web.dev coverage of Interop 2026, including scroll-driven animations:
+  https://web.dev/blog/interop-2026?hl=en

package/template/.aioson/skills/process/secure-tdd/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: secure-tdd
+description: Process skill for adversarial TDD in security-sensitive features. Load after aioson-spec-driven when classification and attack surface justify it.
+activation: |
+  You are now running the secure-tdd process. Confirm the feature classification and attack surface, load only the stack reference you need, write adversarial tests first, then implement production code.
+---
+
+# Skill: secure-tdd
+
+> Process skill. Adversarial tests before production code.
+> Load this file first. Then load only the stack reference you need.
+
+## When to use
+
+Load this skill only after the normal feature workflow is already active.
+
+- **MEDIUM:** load when the feature has auth, ownership, money, uploads, external URLs, secrets/credentials, or sensitive storage boundaries.
+- **SMALL:** optional reduced mode for the same surfaces.
+- **MICRO:** do not auto-load.
+
+This skill complements `aioson-spec-driven`. It never replaces it.
+
+## Loading order
+
+1. Load `.aioson/skills/process/aioson-spec-driven/SKILL.md` first when the feature is spec-driven.
+2. Read the current `requirements-{slug}.md`, `spec-{slug}.md`, and `architecture.md`.
+3. Load `secure-tdd/SKILL.md`.
+4. Load only one stack reference:
+   - `references/node-express.md`
+   - `references/nextjs.md`
+5. If your stack is not covered by a full v1 reference, read `references/planned-stacks.md` for the minimal fallback.
+
+## Goal
+
+Make `@dev` write the security-sensitive tests first, before implementation, for the attack paths most likely to regress:
+
+- auth bypass
+- IDOR / ownership breaks
+- race conditions / double-submit
+- server-side validation gaps
+- upload validation gaps
+- unsafe external URL handling
+- auth enumeration / rate limiting gaps
+
+## Core rule
+
+Frontend is never the authority.
+Validation, authorization, limits, and sensitive state rules must be enforced server-side.
+
+## Adversarial loop
+
+1. Confirm the sensitive surface from requirements or the Attack Surface Map.
+2. Map the surface to the relevant controls:
+   - `SEC-SBD-01` input limits
+   - `SEC-SBD-02` upload validation
+   - `SEC-SBD-03` ownership / IDOR / auth bypass
+   - `SEC-SBD-04` race condition / atomicity
+   - `SEC-SBD-06` external URL sanitization
+   - `SEC-SBD-08` auth enumeration / rate limiting
+3. Write the minimum failing adversarial tests first.
+4. Implement only enough production code to make those tests pass.
+5. Re-run the tests immediately.
+6. Record in `spec-{slug}.md` which attack classes are now covered.
+
+`SEC-SBD-05` remains primarily tool-first via `security:scan`. Mention it in implementation decisions when relevant, but do not turn this skill into a secrets-scanning checklist.
+
+## Output contract
+
+When this skill is active, `@dev` should produce:
+
+- at least one adversarial test per relevant sensitive surface
+- a short note in `spec-{slug}.md` listing the covered attack classes
+- no new product rules beyond what requirements and architecture already define
+
+## Reduced mode for SMALL
+
+For SMALL features:
+
+- choose only the highest-risk surfaces
+- prefer 1-2 adversarial tests over a full matrix
+- do not block implementation just to expand the suite
+
+## Non-goals
+
+- do not invoke `@pentester`
+- do not emit runtime events
+- do not create CLI commands
+- do not auto-generate large prompt libraries
+- do not duplicate the baseline rule prose
+
+## References available
+
+| File | Load when |
+|---|---|
+| `references/node-express.md` | Implementing Node / Express or service-style Node boundaries |
+| `references/nextjs.md` | Implementing Next.js route handlers, server actions, or server-side validation |
+| `references/planned-stacks.md` | The target stack is Laravel, Django, Rails, FastAPI, or another non-v1 stack |