ai-developer-skill-os 9.3.1 → 10.2.0

package/.agents/skills/qk-ui-builder/references/themes/editorial.md

@@ -1,52 +0,0 @@
-# Theme: Editorial
-
-**Genre:** editorial  
-**Use case:** magazines, news, blogs
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | light (85–100% lightness) |
-| Display style | roman-serif |
-| Accent hue | warm (20–50°) |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(40, 15%, 97%);
-  --color-surface: hsl(40, 15%, 100%);
-  --color-text: hsl(40, 15%, 10%);
-  --color-text-muted: hsl(40, 5%, 40%);
-  --color-accent: hsl(30, 60%, 50%);
-  --color-accent-hover: hsl(30, 60%, 42%);
-  --font-display: 'Merriweather', 'Georgia', serif;
-  --font-body: 'Merriweather', 'Georgia', serif;
-  --radius-sm: 4px;
-  --radius-md: 4px;
-  --shadow-sm: 0 1px 2px hsl(40, 15%, 90%);
-  --shadow-md: 0 4px 12px hsl(40, 15%, 90%);
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Long Document
-- ✅ Quote-Led
-- ✅ Letter
-- ❌ Bento Grid (too tech)
-- ❌ Workbench (too dashboard)
-
-## Anti-Patterns (Editorial-specific)
-
-- ❌ Card-based layouts
-- ❌ Icon grids
-- ❌ Sans-serif headings
-- ❌ Dashboard-style navigation
-
-## Voice
-
-- Headlines with strong verbs: "Revealed", "Analysis", "Opinion"
-- Byline prominence
-- Timestamps and read-time indicators

package/.agents/skills/qk-ui-builder/references/themes/garden.md

@@ -1,52 +0,0 @@
-# Theme: Garden
-
-**Genre:** atmospheric  
-**Use case:** organic, eco, sustainability
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | light (85–100% lightness) |
-| Display style | classical-serif |
-| Accent hue | leaf-green (90–150°) |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(90, 20%, 97%);
-  --color-surface: hsl(90, 20%, 100%);
-  --color-text: hsl(90, 15%, 12%);
-  --color-text-muted: hsl(90, 10%, 40%);
-  --color-accent: hsl(120, 35%, 40%);
-  --color-accent-hover: hsl(120, 35%, 32%);
-  --font-display: 'Lora', 'Times New Roman', serif;
-  --font-body: 'Lora', 'Times New Roman', serif;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --shadow-sm: 0 1px 2px hsl(90, 15%, 90%);
-  --shadow-md: 0 4px 12px hsl(90, 15%, 90%);
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Photographic
-- ✅ Long Document
-- ✅ Quote-Led
-- ❌ Stat-Led (too abstract)
-- ❌ Workbench (too technical)
-
-## Anti-Patterns (Garden-specific)
-
-- ❌ Neon or electric colors
-- ❌ Geometric sans-serif headings
-- ❌ Dark mode only experiences
-- ❌ Sharp industrial corners
-
-## Voice
-
-- Organic metaphors: "Grow", "Rooted", "Bloom"
-- Conversational, warm tone
-- Long-form storytelling

package/.agents/skills/qk-ui-builder/references/themes/hum.md

@@ -1,52 +0,0 @@
-# Theme: Hum
-
-**Genre:** atmospheric  
-**Use case:** Wellness, food, lifestyle, crafts
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | dark (<30% lightness) |
-| Display style | classical-serif |
-| Accent hue | warm (10–60°) |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(220, 15%, 10%);
-  --color-surface: hsl(220, 15%, 14%);
-  --color-text: hsl(220, 10%, 90%);
-  --color-text-muted: hsl(220, 10%, 65%);
-  --color-accent: hsl(35, 60%, 55%);
-  --color-accent-hover: hsl(35, 60%, 60%);
-  --font-display: 'Playfair Display', serif;
-  --font-body: 'Source Serif 4', serif;
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --shadow-sm: 0 1px 2px hsl(0, 0%, 0%);
-  --shadow-md: 0 4px 12px hsl(0, 0%, 0%);
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Narrative Workflow
-- ✅ Photographic
-- ✅ Quote-Led
-- ❌ Component Playground (too technical)
-- ❌ Index-First (too utilitarian)
-
-## Anti-Patterns (Hum-specific)
-
-- ❌ Pure black on pure white
-- ❌ Geometric sans-serif for headings
-- ❌ Bright neon accents
-- ❌ Card-in-card layouts
-
-## Voice
-
-- Warm, inviting, sensory words
-- Present tense, active voice
-- Avoid jargon

package/.agents/skills/qk-ui-builder/references/themes/lumen.md

@@ -1,52 +0,0 @@
-# Theme: Lumen
-
-**Genre:** tech  
-**Use case:** AI tools, developer products, dashboards
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | dark (<30% lightness) |
-| Display style | mono |
-| Accent hue | cool (200–300°) |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(220, 20%, 8%);
-  --color-surface: hsl(220, 20%, 12%);
-  --color-text: hsl(220, 10%, 88%);
-  --color-text-muted: hsl(220, 10%, 55%);
-  --color-accent: hsl(200, 100%, 60%);
-  --color-accent-hover: hsl(200, 100%, 65%);
-  --font-display: 'JetBrains Mono', monospace;
-  --font-body: 'Inter', sans-serif;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --shadow-sm: 0 1px 2px hsl(0, 0%, 0%);
-  --shadow-md: 0 4px 12px hsl(0, 0%, 0%);
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Workbench
-- ✅ Component Playground
-- ✅ Stat-Led
-- ❌ Manifesto (too editorial)
-- ❌ Letter (too personal)
-
-## Anti-Patterns (Lumen-specific)
-
-- ❌ Serif fonts
-- ❌ Warm color accents
-- ❌ Excessive border-radius (> 8px)
-- ❌ Large hero images
-
-## Voice
-
-- Concise, technical but accessible
-- Action-oriented: "Deploy", "Connect", "Query"
-- Code snippets welcome

package/.agents/skills/qk-ui-builder/references/themes/midnight.md

@@ -1,52 +0,0 @@
-# Theme: Midnight
-
-**Genre:** atmospheric  
-**Use case:** luxury, premium products
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | dark (0–30% lightness) |
-| Display style | classical-serif |
-| Accent hue | cool (180–260°) |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(220, 20%, 6%);
-  --color-surface: hsl(220, 20%, 10%);
-  --color-text: hsl(220, 10%, 92%);
-  --color-text-muted: hsl(220, 5%, 55%);
-  --color-accent: hsl(220, 40%, 65%);
-  --color-accent-hover: hsl(220, 40%, 58%);
-  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
-  --font-body: 'Crimson Text', Georgia, serif;
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --shadow-sm: 0 1px 2px hsl(220, 20%, 2%);
-  --shadow-md: 0 4px 12px hsl(220, 20%, 2%);
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Photographic
-- ✅ Quote-Led
-- ✅ Narrative Workflow
-- ❌ Stat-Led (too data-dense)
-- ❌ Component Playground (too utilitarian)
-
-## Anti-Patterns (Midnight-specific)
-
-- ❌ Bright saturated colors
-- ❌ Geometric sans-serif fonts
-- ❌ Card-in-card nesting
-- ❌ Grid-based feature lists
-
-## Voice
-
-- Evocative adjectives: "Timeless", "Curated", "Exceptional"
-- Short declarative sentences
-- No bullet points in hero sections

package/.agents/skills/qk-ui-builder/references/themes/modern-minimal.md

@@ -1,52 +0,0 @@
-# Theme: Modern Minimal
-
-**Genre:** modern-minimal  
-**Use case:** SaaS, startups, portfolios
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | mid (30–85% lightness) |
-| Display style | geometric-sans |
-| Accent hue | neutral |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(220, 15%, 98%);
-  --color-surface: hsl(220, 15%, 100%);
-  --color-text: hsl(220, 20%, 12%);
-  --color-text-muted: hsl(220, 10%, 50%);
-  --color-accent: hsl(220, 15%, 45%);
-  --color-accent-hover: hsl(220, 15%, 38%);
-  --font-display: 'Inter', 'Helvetica Neue', sans-serif;
-  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --shadow-sm: 0 1px 2px hsl(220, 15%, 90%);
-  --shadow-md: 0 4px 12px hsl(220, 15%, 90%);
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Workbench
-- ✅ Stat-Led
-- ✅ Index-First
-- ❌ Marquee Hero (too noisy)
-- ❌ Manifesto (too expressive)
-
-## Anti-Patterns (Modern Minimal-specific)
-
-- ❌ Decorative illustrations
-- ❌ Gradient buttons or backgrounds
-- ❌ More than 2 font families
-- ❌ Heavy drop shadows
-
-## Voice
-
-- Single-word actions: "Sign in", "Pricing", "Docs"
-- No decorative copy
-- Metrics and social proof prominent

package/.agents/skills/qk-ui-builder/references/themes/playful.md

@@ -1,52 +0,0 @@
-# Theme: Playful
-
-**Genre:** playful  
-**Use case:** games, kids, entertainment
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | light (85–100% lightness) |
-| Display style | rounded-sans |
-| Accent hue | warm (30–60°) |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(45, 60%, 97%);
-  --color-surface: hsl(45, 60%, 100%);
-  --color-text: hsl(45, 50%, 12%);
-  --color-text-muted: hsl(45, 20%, 45%);
-  --color-accent: hsl(35, 85%, 55%);
-  --color-accent-hover: hsl(35, 85%, 48%);
-  --font-display: 'Nunito', 'Varela Round', sans-serif;
-  --font-body: 'Nunito', 'Varela Round', sans-serif;
-  --radius-sm: 12px;
-  --radius-md: 16px;
-  --shadow-sm: 0 2px 4px hsl(45, 60%, 85%);
-  --shadow-md: 0 6px 16px hsl(45, 60%, 85%);
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Bento Grid
-- ✅ Marquee Hero
-- ✅ Feature Stack
-- ❌ Long Document (too text-heavy)
-- ❌ Quote-Led (too serious)
-
-## Anti-Patterns (Playful-specific)
-
-- ❌ Serious or corporate tones
-- ❌ Monochrome palettes
-- ❌ Minimal whitespace (dense layouts)
-- ❌ Sharp corners or rigid grids
-
-## Voice
-
-- Exclamation marks and emoji allowed
-- Action verbs: "Play", "Join", "Explore"
-- Friendly, inclusive language

package/.agents/skills/qk-ui-builder/references/themes/specimen.md

@@ -1,52 +0,0 @@
-# Theme: Specimen
-
-**Genre:** editorial  
-**Use case:** design systems, documentation
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | mid (30–85% lightness) |
-| Display style | high-contrast-serif |
-| Accent hue | neutral |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(40, 10%, 96%);
-  --color-surface: hsl(40, 10%, 100%);
-  --color-text: hsl(40, 15%, 8%);
-  --color-text-muted: hsl(40, 5%, 45%);
-  --color-accent: hsl(40, 5%, 45%);
-  --color-accent-hover: hsl(40, 5%, 38%);
-  --font-display: 'Playfair Display', Georgia, serif;
-  --font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif;
-  --radius-sm: 4px;
-  --radius-md: 4px;
-  --shadow-sm: 0 1px 2px hsl(40, 15%, 90%);
-  --shadow-md: 0 4px 12px hsl(40, 15%, 90%);
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Type Specimen
-- ✅ Index-First
-- ✅ Component Playground
-- ❌ Marquee Hero (too playful)
-- ❌ Bento Grid (too casual)
-
-## Anti-Patterns (Specimen-specific)
-
-- ❌ Playful illustrations or mascots
-- ❌ Warm saturated accents (orange, coral)
-- ❌ Rounded corners > 4px
-- ❌ Gradient hero backgrounds
-
-## Voice
-
-- Typographic precision: "Style guide", "Type scale", "Spacing rhythm"
-- Noun-first labels: "Design tokens", "Component states"
-- Neutral, authoritative tone

package/.agents/skills/qk-ui-builder/references/themes/terminal.md

@@ -1,52 +0,0 @@
-# Theme: Terminal
-
-**Genre:** tech  
-**Use case:** CLI tools, developer tools, terminals
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | dark (0–30% lightness) |
-| Display style | mono |
-| Accent hue | phosphor green (120–150°) |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(220, 15%, 4%);
-  --color-surface: hsl(220, 15%, 8%);
-  --color-text: hsl(120, 30%, 75%);
-  --color-text-muted: hsl(120, 10%, 45%);
-  --color-accent: hsl(120, 60%, 55%);
-  --color-accent-hover: hsl(120, 60%, 48%);
-  --font-display: 'JetBrains Mono', 'Fira Code', monospace;
-  --font-body: 'JetBrains Mono', 'Fira Code', monospace;
-  --radius-sm: 0px;
-  --radius-md: 0px;
-  --shadow-sm: none;
-  --shadow-md: none;
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Workbench
-- ✅ Component Playground
-- ✅ Stat-Led
-- ❌ Manifesto (too expressive)
-- ❌ Photographic (too visual)
-
-## Anti-Patterns (Terminal-specific)
-
-- ❌ Serif or display fonts
-- ❌ Warm accent hues
-- ❌ Decorative shadows or borders
-- ❌ Smooth transitions/animations
-
-## Voice
-
-- Command-line syntax: `$ npm install`, `> init()`
-- Terse, imperative: "Run", "Deploy", "Configure"
-- Status codes and badges

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

@@ -1,129 +0,0 @@
-# Typography
-
-Foundational rules for font selection, type scale, and textual hierarchy. These rules exist to guarantee readable, professional, and consistent type across every generated UI.
-
-## The 2+1 Rule
-
-Use **at most 2 font families + 1 monospace** per project. Exceeding this causes visual noise and slows load time.
-
-- **Display / Heading family** (1): used for titles, hero text.
-- **Body / UI family** (1): used for paragraphs, labels, controls.
-- **Monospace** (1, optional): used for code, IDs, numeric tables, logs.
-
-```css
-:root {
-  --font-display: "Playfair Display", Georgia, serif;
-  --font-body: "Inter", system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, monospace;
-}
-```
-
-If you only need one family, the body family can double as the display family. Do not introduce a third decorative family.
-
-## Font Catalog
-
-Pick from this approved catalog. Prefer fonts that share the same optical quality and load reliably via Google Fonts or system fallbacks.
-
-| Family | Role | Notes |
-| --- | --- | --- |
-| Inter | Body / UI | Neutral, legible at small sizes. Default choice. |
-| Source Serif 4 | Display / Body | Serif companion to Inter; good for reading-heavy UI. |
-| Playfair Display | Display | High-contrast serif for hero/editorial headings. |
-| JetBrains Mono | Mono | Developer-friendly monospace. |
-| Poppins | Display / UI | Geometric, friendly; use sparingly. |
-| Roboto / Roboto Flex | Body / UI | Safe system-adjacent alternative. |
-| IBM Plex Sans / Mono | Body / Mono | Corporate, consistent pairing. |
-
-Pairing examples that work:
-- **Inter + Playfair Display + JetBrains Mono** (editorial + code)
-- **Inter + Source Serif 4 + JetBrains Mono** (clean + reading)
-- **Poppins + Inter + JetBrains Mono** (friendly branding)
-
-## Type Scale
-
-Use only these sizes. Do not invent intermediate sizes.
-
-```
-12px   caption / meta
-14px   small text / secondary
-16px   body (base)
-18px   lead / intro paragraph
-24px   h3 / section title
-32px   h2 / page title
-48px   h1 / hero
-64px   display / marketing hero
-```
-
-```css
-:root {
-  --text-xs: 0.75rem;   /* 12px */
-  --text-sm: 0.875rem;  /* 14px */
-  --text-base: 1rem;    /* 16px */
-  --text-lg: 1.125rem;  /* 18px */
-  --text-xl: 1.5rem;    /* 24px */
-  --text-2xl: 2rem;     /* 32px */
-  --text-3xl: 3rem;     /* 48px */
-  --text-4xl: 4rem;     /* 64px */
-}
-```
-
-## Line Height
-
-| Content | Line height |
-| --- | --- |
-| Body text | **1.5** |
-| Headings (h1–h3) | **1.2** |
-| Tight display (64px) | 1.1 |
-
-```css
-p, li, label { line-height: 1.5; }
-h1, h2, h3 { line-height: 1.2; }
-```
-
-## Hierarchy
-
-Establish hierarchy with **size + weight + color**, not decoration.
-
-```css
-h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; }
-h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; }
-h3 { font-family: var(--font-body);    font-size: var(--text-xl);  font-weight: 600; }
-body { font-family: var(--font-body);   font-size: var(--text-base); font-weight: 400; }
-.meta { font-size: var(--text-sm); color: var(--color-text-muted); }
-```
-
-Keep weight range tight: 400 (body), 500/600 (emphasis), 700 (headings). Avoid 900 unless for a single display word.
-
-## Prose Measure
-
-Constrain reading width for paragraphs to **45–75 characters** (`ch`).
-
-```css
-.prose {
-  max-width: 65ch;
-  font-size: var(--text-base);
-  line-height: 1.5;
-}
-```
-
-For multi-column or card text, keep each text block within this measure. Never let body copy stretch across a full 1200px container.
-
-## Ban List
-
-Do **not** use these as an identity or UI font:
-
-- Comic Sans
-- Papyrus
-- Bradley Hand
-- Any `cursive` generic family used as a primary brand font
-- Other "novelty" fonts that undermine legibility
-
-System fallbacks (`system-ui`, `sans-serif`, `serif`, `monospace`) are allowed only as graceful degradation, never as the chosen aesthetic.
-
-## Practical Checklist
-
-- [ ] At most 2 families + 1 mono.
-- [ ] Sizes only from the 8-step scale.
-- [ ] Body line-height 1.5, headings 1.2.
-- [ ] Prose capped at 65ch.
-- [ ] No banned novelty fonts.