ai-developer-skill-os 9.3.1 → 10.1.0

package/.agents/skills/qk-ui-builder/references/macrostructures/11-catalogue.md

@@ -1,49 +0,0 @@
-# 11 — Catalogue
-
-**Fingerprint:** product listings, e-commerce grid, filterable cards, scannable.
-
-## Structure
-
-```
-+---------------------------+
-|   Search + Filters        |
-+------+--------------------+
-| Facet|  [card][card]      |
-| Nav  |  [card][card]      |
-|      |  [card][card]      |
-|      |                    |
-+------+--------------------+
-|   Pagination / Load more  |
-+---------------------------+
-```
-
-## Rules
-
-- Grid: 3–4 columns desktop, 2 tablet, 1 mobile
-- Card: image, title, price, rating, quick-add
-- Facets: sticky filter sidebar, collapsible on mobile
-- Pagination: numbered or infinite scroll, state preserved
-- Sorting: visible control (price, popularity)
-
-## Typography
-
-- Heading: display for page title
-- Price: tabular-nums, medium weight
-- Title: 14px body, truncated to 2 lines
-
-## Spacing
-
-- Grid gap: `--space-4` (16px)
-- Card padding: `--space-3` (12px)
-- Filter width: 240px
-
-## Anti-Patterns
-
-- ❌ Cards with inconsistent heights breaking grid
-- ❌ Hidden or unclear pricing
-- ❌ Filters that require page reload
-
-## Theme Affinity
-
-- ✅ Carnival, Cobalt
-- ❌ Hum (needs more product pop)

package/.agents/skills/qk-ui-builder/references/macrostructures/12-letter.md

@@ -1,49 +0,0 @@
-# 12 — Letter
-
-**Fingerprint:** personal, newsletters, 1-on-1 communication, single readable column.
-
-## Structure
-
-```
-+---------------------------+
-|   Salutation (Dear ...)   |
-+---------------------------+
-|   Body paragraphs         |
-|   (personal, signed)      |
-|                           |
-|   Signature               |
-+---------------------------+
-|   PS / footnotes          |
-+---------------------------+
-```
-
-## Rules
-
-- Single column, intimate width (max 60ch)
-- Tone: first-person, conversational
-- Salutation and signature frame the content
-- Optional PS line for emphasis
-- Minimal decoration; focus on the words
-
-## Typography
-
-- Heading: display or editorial for subject
-- Body: body font, 17px, comfortable line-height
-- Signature: italic or handwritten-style if theme allows
-
-## Spacing
-
-- Body padding: `--space-8` (32px)
-- Paragraph gap: `--space-4` (16px)
-- Signature margin-top: `--space-6` (24px)
-
-## Anti-Patterns
-
-- ❌ Corporate marketing tone
-- ❌ Multi-column newsletter chaos
-- ❌ Missing personal sign-off
-
-## Theme Affinity
-
-- ✅ Hum, Lumen
-- ⚠️ Carnival (tone may clash)

package/.agents/skills/qk-ui-builder/references/macrostructures/13-index-first.md

@@ -1,49 +0,0 @@
-# 13 — Index-First
-
-**Fingerprint:** wiki-style, knowledge base, docs hub, alphabetical/topic index upfront.
-
-## Structure
-
-```
-+---------------------------+
-|   Search + A-Z / Topics   |
-+------+--------------------+
-| Index|  Entry content     |
-| list |  (when selected)   |
-| A B  |                    |
-| C D  |  headings, links   |
-+------+--------------------+
-|   Breadcrumb             |
-+---------------------------+
-```
-
-## Rules
-
-- Index: alphabetical or categorical list, always visible
-- Search: primary entry point, live filter
-- Entries: cross-linked, consistent heading structure
-- Breadcrumb: shows location in hierarchy
-- Last-updated timestamp per entry
-
-## Typography
-
-- Heading: display for hub title
-- Index items: 14px, hover underline
-- Entry body: body font, 16px
-
-## Spacing
-
-- Index width: 220px
-- Entry padding: `--space-6` (24px)
-- Item gap: `--space-2` (8px)
-
-## Anti-Patterns
-
-- ❌ Deep nesting with no index
-- ❌ Orphan pages without back-links
-- ❌ Stale "last updated" dates
-
-## Theme Affinity
-
-- ✅ Lumen, Cobalt
-- ❌ Carnival (too playful for reference)

package/.agents/skills/qk-ui-builder/references/macrostructures/14-narrative-workflow.md

@@ -1,48 +0,0 @@
-# 14 — Narrative Workflow
-
-**Fingerprint:** vertical scroll, step-by-step progression, progress indicator, one primary action per screen.
-
-## Structure
-
-```
-+---------------------+
-|     Progress Bar    |
-+---------------------+
-|                     |
-|   Step Content      |
-|   (text + media)    |
-|   [Primary Action]  |
-+---------------------+
-|   Skip / Back       |
-+---------------------+
-```
-
-## Rules
-
-- Max 1 primary action per step
-- Progress bar always visible
-- Steps must have clear entry/exit criteria
-- Support keyboard navigation (Enter = next, Backspace = back)
-
-## Typography
-
-- Heading: display style, 1 per step
-- Body: body font, max-width 65ch
-- Helper text: muted color, 14px
-
-## Spacing
-
-- Step padding: `--space-8` (32px)
-- Action margin-top: `--space-6` (24px)
-- Progress bar height: 4px
-
-## Anti-Patterns
-
-- ❌ Multiple CTAs per step
-- ❌ Progress bar that doesn't reflect actual state
-- ❌ Steps that require going back to change data
-
-## Theme Affinity
-
-- ✅ Hum, Cobalt
-- ⚠️ Carnival (can work but needs restraint)

package/.agents/skills/qk-ui-builder/references/macrostructures/15-split-studio.md

@@ -1,48 +0,0 @@
-# 15 — Split Studio
-
-**Fingerprint:** before/after, comparison layouts, side-by-side, A/B showcase.
-
-## Structure
-
-```
-+---------------------------+
-|   Title + toggle (vs)     |
-+-------------+-------------+
-|   BEFORE    |   AFTER     |
-|   (media)   |   (media)   |
-|   caption   |   caption   |
-+-------------+-------------+
-|   Diff / notes row        |
-+---------------------------+
-```
-
-## Rules
-
-- Two equal panes, clear "vs" divider or toggle
-- Sync scroll when comparing scrollable content
-- Optional slider for wipe comparison
-- Captions: label each side unambiguously
-- Notes: explain the difference below
-
-## Typography
-
-- Heading: display for comparison title
-- Pane labels: uppercase, 13px muted
-- Notes: body font, 15px
-
-## Spacing
-
-- Pane gap: `--space-2` (8px) or divider line
-- Pane padding: `--space-4` (16px)
-- Notes margin-top: `--space-6` (24px)
-
-## Anti-Patterns
-
-- ❌ Asymmetric panes implying bias
-- ❌ No labels on before/after
-- ❌ Wipe slider that lags input
-
-## Theme Affinity
-
-- ✅ Cobalt, Lumen
-- ⚠️ Carnival (keep divider clean)

package/.agents/skills/qk-ui-builder/references/macrostructures/16-feature-stack.md

@@ -1,51 +0,0 @@
-# 16 — Feature Stack
-
-**Fingerprint:** stacked feature highlights, SaaS product pages, alternating sections.
-
-## Structure
-
-```
-+---------------------------+
-|   Hero (value prop)       |
-+------+--------------------+
-| img  |  Feature 1         |
-|      |  (title + desc)    |
-+------+--------------------+
-|  Feature 2  | img         |
-+------+--------------------+
-|   ... repeated N times    |
-+---------------------------+
-|   Final CTA               |
-+---------------------------+
-```
-
-## Rules
-
-- Alternating image/text rows, consistent rhythm
-- Each feature: one headline, 1–2 sentence desc, optional icon
-- Max 5–6 features before fatigue
-- Sticky or scroll-reveal for emphasis
-- Final CTA after the stack
-
-## Typography
-
-- Heading: display for hero and feature titles
-- Desc: body font, 16px, max-width 50ch
-- Icon labels: 13px muted
-
-## Spacing
-
-- Row padding: `--space-10` (40px)
-- Row gap: `--space-8` (32px)
-- Media min-height: 320px
-
-## Anti-Patterns
-
-- ❌ More than 6 stacked features
-- ❌ Inconsistent alternation direction
-- ❌ Features without a clear benefit
-
-## Theme Affinity
-
-- ✅ Cobalt, Hum
-- ⚠️ Carnival (restraint needed)

package/.agents/skills/qk-ui-builder/references/macrostructures/17-type-specimen.md

@@ -1,48 +0,0 @@
-# 17 — Type Specimen
-
-**Fingerprint:** typography showcase, design system docs, font scales on display.
-
-## Structure
-
-```
-+---------------------------+
-|   Typeface name + meta    |
-+------+--------------------+
-| Spec |  Glyph / alphabet  |
-| nav  |  Aa Bb Cc ...       |
-|      |  Weight row         |
-+------+--------------------+
-|   Scale / line-height     |
-+---------------------------+
-```
-
-## Rules
-
-- Show full character set and key glyphs
-- Display each weight (light → black) with label
-- Type scale: list sizes with px/rem and usage
-- Sample text: pangram + real paragraph
-- Nav: jump to typeface sections
-
-## Typography
-
-- Specimen: the typeface itself, all sizes
-- Labels: mono, 12px muted for metadata
-- Sample: body font fallback noted
-
-## Spacing
-
-- Specimen padding: `--space-8` (32px)
-- Weight row gap: `--space-4` (16px)
-- Nav width: 200px
-
-## Anti-Patterns
-
-- ❌ Showing only one weight
-- ❌ No scale reference
-- ❌ Illegible specimen background
-
-## Theme Affinity
-
-- ✅ Lumen, Cobalt
-- ❌ Hum (too quiet for showcase)

package/.agents/skills/qk-ui-builder/references/macrostructures/18-portfolio-grid.md

@@ -1,48 +0,0 @@
-# 18 — Portfolio Grid
-
-**Fingerprint:** creative portfolio, masonry grid, varied tile sizes, visual-first.
-
-## Structure
-
-```
-+---------------------------+
-|   Name + filter (tags)    |
-+---------------------------+
-| [big][sm][sm]             |
-| [sm  ][med  ]             |
-| [med ][sm][big]           |
-+---------------------------+
-|   Hover = reveal meta     |
-+---------------------------+
-```
-
-## Rules
-
-- Masonry or bento-style varied tile sizes
-- Hover/focus: reveal title, category, year
-- Filter: by tag/category, animates layout
-- Click: opens project detail
-- No fixed equal rows; embrace asymmetry
-
-## Typography
-
-- Heading: display for name/title
-- Tile meta: 13px muted, revealed on hover
-- Tags: 12px uppercase labels
-
-## Spacing
-
-- Grid gap: `--space-3` (12px)
-- Tile min-height: 200px
-- Filter margin-bottom: `--space-6` (24px)
-
-## Anti-Patterns
-
-- ❌ Rigid equal grid hiding creativity
-- ❌ No hover state on tiles
-- ❌ Missing project metadata
-
-## Theme Affinity
-
-- ✅ Carnival, Hum
-- ❌ Cobalt (too rigid)

package/.agents/skills/qk-ui-builder/references/macrostructures/19-map-diagram.md

@@ -1,50 +0,0 @@
-# 19 — Map / Diagram
-
-**Fingerprint:** architecture diagrams, org charts, flows, node-and-edge layouts.
-
-## Structure
-
-```
-+---------------------------+
-|   Legend + zoom controls  |
-+---------------------------+
-|                           |
-|   [ node ] -- [ node ]    |
-|        \     /            |
-|        [ node ]           |
-|                           |
-+---------------------------+
-|   Side panel (node info)  |
-+---------------------------+
-```
-
-## Rules
-
-- Nodes: clear shapes with labels, consistent styling
-- Edges: directional arrows, avoid crossing when possible
-- Legend: explains node/edge types
-- Zoom/pan: required for complex diagrams
-- Side panel: details on node select
-
-## Typography
-
-- Heading: display for diagram title
-- Node label: 13px medium, legible on node bg
-- Legend: 12px muted
-
-## Spacing
-
-- Node padding: `--space-3` (12px)
-- Edge spacing: auto-layout with min gap
-- Panel width: 280px
-
-## Anti-Patterns
-
-- ❌ Overlapping nodes/edges
-- ❌ Unlabeled connections
-- ❌ No zoom on large diagrams
-
-## Theme Affinity
-
-- ✅ Lumen, Cobalt
-- ❌ Carnival (distracts from structure)

package/.agents/skills/qk-ui-builder/references/macrostructures/20-ecosystem-index.md

@@ -1,48 +0,0 @@
-# 20 — Ecosystem Index
-
-**Fingerprint:** integrations, partners, plugins directory, logo grid with search.
-
-## Structure
-
-```
-+---------------------------+
-|   Search + category tabs  |
-+------+--------------------+
-| Cat  |  [logo][logo]      |
-| nav  |  [logo][logo]      |
-|      |  [logo][logo]      |
-+------+--------------------+
-|   Featured / popular      |
-+---------------------------+
-```
-
-## Rules
-
-- Logo grid: uniform tile size, grayscale → color on hover
-- Categories: tab or sidebar filter
-- Search: matches name and tags
-- Featured row: highlights top integrations
-- Each tile links to detail/install
-
-## Typography
-
-- Heading: display for directory title
-- Tile name: 13px medium under logo
-- Category: 14px, active state bold
-
-## Spacing
-
-- Grid gap: `--space-4` (16px)
-- Tile padding: `--space-4` (16px)
-- Cat nav width: 200px
-
-## Anti-Patterns
-
-- ❌ Logos at inconsistent sizes
-- ❌ No search on large directories
-- ❌ Missing category organization
-
-## Theme Affinity
-
-- ✅ Cobalt, Lumen
-- ⚠️ Carnival (logos need neutral bg)

package/.agents/skills/qk-ui-builder/references/macrostructures/21-component-playground.md

@@ -1,45 +0,0 @@
-# 21 — Component Playground
-
-**Fingerprint:** tabbed or sidebar navigation, live preview, code snippet, copy button.
-
-## Structure
-
-```
-+---------+------------------+
-| Nav     |   Preview        |
-| (tabs)  |   (live render)  |
-|         |                  |
-+---------+------------------+
-| Code Snippet          [Copy] |
-+-----------------------------+
-```
-
-## Rules
-
-- Nav: vertical tabs or horizontal pills
-- Preview: sandboxed iframe or isolated render
-- Code: syntax highlighted, copy button
-- Tabs: at least 3 examples per component
-
-## Typography
-
-- Heading: display style
-- Code: mono, 13px
-- Body: body font, 14px
-
-## Spacing
-
-- Nav width: 200px
-- Preview padding: `--space-6`
-- Code padding: `--space-4`
-
-## Anti-Patterns
-
-- ❌ Preview that doesn't update on tab switch
-- ❌ Code snippets without syntax highlighting
-- ❌ Missing copy button
-
-## Theme Affinity
-
-- ✅ Lumen, Cobalt
-- ❌ Hum, Carnival (too decorative)

package/.agents/skills/qk-ui-builder/references/macrostructures.md

@@ -1,38 +0,0 @@
-# Macrostructure Index
-
-Load this index first, then load ONLY the chosen macrostructure file.
-
-| ID | Name | Best For |
-|----|------|----------|
-| 01 | Bento Grid | Feature dashboards, app shells |
-| 02 | Long Document | Docs, blogs, legal |
-| 03 | Marquee Hero | Marketing, campaigns |
-| 04 | Stat-Led | Analytics, metrics |
-| 05 | Workbench | Tools, editors, IDEs |
-| 06 | Conversational FAQ | Support, onboarding |
-| 07 | Manifesto | Brand, about, careers |
-| 08 | Photographic | Portfolios, travel |
-| 09 | Quote-Led | Testimonials, editorial |
-| 10 | Specimen | Design systems, pattern libraries |
-| 11 | Catalogue | E-commerce, listings |
-| 12 | Letter | Newsletters, personal |
-| 13 | Index-First | Wikis, knowledge bases |
-| 14 | Narrative Workflow | Onboarding, wizards |
-| 15 | Split Studio | Comparison, before/after |
-| 16 | Feature Stack | Product pages, SaaS |
-| 17 | Type Specimen | Typography showcases |
-| 18 | Portfolio Grid | Creative portfolios |
-| 19 | Map/Diagram | Architecture, org charts |
-| 20 | Ecosystem Index | Integrations, partners |
-| 21 | Component Playground | UI libraries, docs |
-
-## Load Rule
-
-1. Read this index only
-2. Pick ONE macrostructure based on brief
-3. Load ONLY `references/macrostructures/XX-<name>.md`
-4. Never load all 21 files
-
-## Diversification Rule
-
-No two consecutive builds in the same project may share the same macrostructure.

package/.agents/skills/qk-ui-builder/references/motion.md

@@ -1,95 +0,0 @@
-# Motion
-
-Foundational rules for animation. Motion must feel intentional, fast, and accessible — never decorative bounce or layout-shifting transitions.
-
-## Duration Scale
-
-Use only these durations. Do not invent values like 250ms or 420ms.
-
-```
-100ms   micro (hover, toggle, color)
-150ms   quick state change
-200ms   default UI transition
-300ms   panel / menu enter-exit
-500ms   large surface / page-level
-```
-
-```css
-:root {
-  --dur-1: 100ms;
-  --dur-2: 150ms;
-  --dur-3: 200ms;
-  --dur-4: 300ms;
-  --dur-5: 500ms;
-}
-```
-
-## Easing
-
-Match easing to the direction of motion:
-
-| Phase | Easing |
-| --- | --- |
-| Enter (appear) | `ease-out` |
-| Exit (disappear) | `ease-in` |
-| Continuous transition | `ease-in-out` |
-
-```css
-.card { transition: transform var(--dur-3) ease-out, opacity var(--dur-3) ease-out; }
-.menu-close { transition: opacity var(--dur-2) ease-in; }
-.theme-switch { transition: background-color var(--dur-4) ease-in-out; }
-```
-
-## Ban List
-
-- **No bounce / overshoot easing.** Never use `cubic-bezier(0.68, -0.55, 0.265, 1.55)` or any springy curve for UI elements. It reads as unprofessional and slows perceived performance.
-
-```css
-/* BANNED */
-transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-```
-
-- **No infinite decorative animations** (marquee, pulsing glow) unless the user explicitly asks.
-- **No `transition: all`** — name the specific properties.
-
-## prefers-reduced-motion
-
-Respect the user's OS setting. Under `reduce`, disable transforms/opacity animations and drop durations to **0ms**.
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-```
-
-Apply this once globally; do not re-introduce motion for individual elements.
-
-## No Animating Layout Properties
-
-Never animate `width`, `height`, `padding`, `margin`, or `top/left`. These trigger layout/paint reflows and jank. Animate only **transform** and **opacity** (compositor-only).
-
-```css
-/* Good: animate transform/opacity only */
-.modal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-3) ease-out, transform var(--dur-3) ease-out; }
-.modal.open { opacity: 1; transform: translateY(0); }
-
-/* Bad: animates layout */
-.panel { transition: height 300ms ease; }   /* reflows, janky */
-```
-
-For elements that change size (expand/collapse), use `transform: scaleY()` or animate `grid-template-rows: 0fr → 1fr` instead of height.
-
-## Practical Checklist
-
-- [ ] Durations only from the 5-step scale.
-- [ ] ease-out enter / ease-in exit / ease-in-out transition.
-- [ ] No bounce bezier, no `transition: all`, no infinite decoration.
-- [ ] `prefers-reduced-motion` zeroes all motion.
-- [ ] Only `transform` / `opacity` are animated.