openclaw-node-harness 2.0.0

package/skills/storyboard/SKILL.md

@@ -0,0 +1,259 @@
+---
+name: storyboard
+description: "Use this to create a 6-frame visual storyboard showing a user's journey from problem to solution, using a classic storytelling arc to build empathy and make abstract product concepts concrete."
+type: component
+triggers:
+  - "create a storyboard for my product"
+  - "build a 6-frame user story narrative"
+  - "help me visualize the user journey as a story"
+  - "I need a storyboard to pitch a feature"
+negative_triggers:
+  - "create a user flow diagram"
+  - "write marketing copy"
+  - "build a UI mockup"
+---
+
+
+## Purpose
+Create a 6-frame visual narrative that tells the story of a user's journey from problem to solution, using the classic storytelling arc to build empathy, illustrate value, and make abstract product concepts concrete. Use this to align stakeholders, pitch features, communicate vision, or test if your solution resonates emotionally before building it.
+
+This is not a UI mockup—it's a storytelling tool that brings the human side of your product to life.
+
+## Key Concepts
+
+### The 6-Frame Storyboard Structure
+Based on classic narrative arcs, the 6-frame format follows this pattern:
+
+1. **Frame 1: Main Character** — Introduce the persona and their context
+2. **Frame 2: The Problem Emerges** — Show the challenge or obstacle they face
+3. **Frame 3: The "Oh Crap" Moment** — Escalate the problem to create urgency
+4. **Frame 4: The Solution Appears** — Introduce your product/feature
+5. **Frame 5: The "Aha" Moment** — Show the user experiencing the breakthrough
+6. **Frame 6: Life After the Solution** — Illustrate the improved state
+
+### Why This Works
+- **Emotional engagement:** Stories create empathy in ways specs can't
+- **Concrete over abstract:** Visual narrative makes vague concepts tangible
+- **Memorable:** People remember stories better than feature lists
+- **Alignment tool:** Stakeholders can react to a story and give feedback
+- **Low-fidelity:** Doesn't require polished design—sketches work great
+
+### Anti-Patterns (What This Is NOT)
+- **Not a user flow diagram:** This is emotional storytelling, not process documentation
+- **Not a feature demo:** Focus on user outcomes, not product capabilities
+- **Not marketing copy:** Authentic narrative, not hype
+
+### When to Use This
+- Pitching a new product or feature to stakeholders
+- Aligning teams on user value (product, design, engineering, execs)
+- Testing if a product idea resonates emotionally
+- Communicating vision at all-hands or investor meetings
+- Validating problem/solution fit before building
+
+### When NOT to Use This
+- For technical implementation details (use architecture diagrams instead)
+- When the user problem is trivial or well-understood
+- As a replacement for user research (storyboards illustrate insights, don't create them)
+
+---
+
+## Application
+
+Use `template.md` for the full fill-in structure.
+
+### Step 1: Gather Context
+Before creating the storyboard, ensure you have:
+- **Persona clarity:** Who is the main character? (reference `skills/proto-persona/SKILL.md`)
+- **Problem understanding:** What challenge do they face? (reference `skills/problem-statement/SKILL.md`)
+- **Solution definition:** What product/feature will help? (reference `skills/positioning-statement/SKILL.md`)
+- **Desired outcome:** What does success look like for the user?
+
+**If missing context:** Run discovery work first. Don't fabricate personas or problems.
+
+---
+
+### Step 2: Answer the 7 Storyboard Questions
+
+Ask these questions one at a time to develop the narrative:
+
+1. **Who is the main character experiencing this problem?** (Name, age, role, context)
+2. **Describe the problem or challenge the main character is facing.**
+3. **Describe the "Oh Crap" moment where the problem creates a major issue.**
+4. **How is the solution introduced to the main character?**
+5. **Describe the main character using the solution and experiencing an "Aha" moment.**
+6. **What is life like for the main character after using the solution?**
+7. **Do you have any specific visual style or rendering instructions?** (Default: fat-marker sharpie sketches, minimal and monochrome)
+
+---
+
+### Step 3: Write the 6-Frame Narrative
+
+Based on the answers above, draft the narrative:
+
+```markdown
+## Generated 6-Frame Storyline
+
+**Frame 1: Introducing the Main Character**
+- [Insert description of the main character, their setting, and context]
+- [Example: "Sarah, 35, is a freelance graphic designer juggling 10 client projects from her home office"]
+
+**Frame 2: The Problem Emerges**
+- [Describe the main character's challenge and how it affects their life]
+- [Example: "She's drowning in invoice tracking—8 hours per month chasing late payments via spreadsheets and email"]
+
+**Frame 3: The 'Oh Crap' Moment**
+- [Highlight the escalation of the problem into a major issue]
+- [Example: "A major client's payment is 2 weeks overdue. Sarah realizes she forgot to follow up because she was focused on design work. The client has now gone silent, and she's anxious about cash flow."]
+
+**Frame 4: The Solution Appears**
+- [Explain how the solution is introduced and the main character's initial reaction]
+- [Example: "Sarah discovers SmartInvoice, a tool that automatically sends payment reminders at optimal times. She's skeptical—will it sound too pushy?—but decides to try it."]
+
+**Frame 5: The 'Aha' Moment**
+- [Show the main character using the solution and experiencing a breakthrough]
+- [Example: "Two days later, Sarah receives a notification: 'Client XYZ just paid!' The AI-timed reminder worked—no awkward follow-up call needed. She feels relieved and in control."]
+
+**Frame 6: Life After the Solution**
+- [Describe the resolution and how life improves after overcoming the problem]
+- [Example: "Sarah now spends 30 minutes per month on invoicing instead of 8 hours. She's reclaimed her evenings, spending time with family instead of chasing payments. Her cash flow is predictable, and her anxiety is gone."]
+
+**Optional Visual Elements**
+- [If no visual style specified: "Use fat-marker, sharpie-style sketches—minimal, monochrome, hand-drawn feel"]
+- [If visual elements provided: "Include user-provided images, GIFs, or icons"]
+```
+
+---
+
+### Step 4: Visualize Each Frame
+
+For each frame, create or describe the visual:
+
+**Frame 1: Main Character**
+- **Visual:** Sarah at her desk, surrounded by sticky notes, laptop open, coffee cup
+- **Mood:** Busy, slightly stressed
+- **Tools:** DALL·E, MidJourney, hand-drawn sketches
+
+**Frame 2: The Problem Emerges**
+- **Visual:** Sarah staring at a spreadsheet labeled "Overdue Invoices," multiple browser tabs open
+- **Mood:** Overwhelmed
+- **Details:** Clock showing 10pm, to-do list getting longer
+
+**Frame 3: The 'Oh Crap' Moment**
+- **Visual:** Sarah's phone showing "Day 14: Payment Overdue from Client XYZ" notification. Her face shows worry.
+- **Mood:** Anxious, urgent
+- **Details:** Calendar showing upcoming rent due date
+
+**Frame 4: The Solution Appears**
+- **Visual:** Sarah's laptop showing the SmartInvoice landing page with headline "Stop Chasing Payments"
+- **Mood:** Curious, hopeful
+- **Details:** Testimonial quote: "Saved me 5 hours/month"
+
+**Frame 5: The 'Aha' Moment**
+- **Visual:** Sarah's phone showing notification "Client XYZ just paid! $5,000 received." She's smiling, relieved.
+- **Mood:** Joy, relief, empowerment
+- **Details:** Background shows sunset—she's done with work early
+
+**Frame 6: Life After the Solution**
+- **Visual:** Sarah playing with her kids in the backyard, laptop closed on the patio table
+- **Mood:** Peaceful, balanced
+- **Details:** Clock showing 6pm (not 10pm anymore)
+
+---
+
+### Step 5: Test the Storyboard
+
+Ask these questions:
+1. **Is the main character relatable?** Would your target persona recognize themselves?
+2. **Is the problem visceral?** Do people *feel* the frustration in Frame 2-3?
+3. **Is the "Oh Crap" moment real?** Does it escalate the problem authentically?
+4. **Is the solution introduction natural?** Or does it feel forced/contrived?
+5. **Is the "Aha" moment believable?** Can users imagine experiencing this?
+6. **Is the "after" state aspirational?** Would users want this outcome?
+
+If any answer is "no," revise.
+
+---
+
+## Examples
+
+See `examples/sample.md` for full storyboard examples.
+
+Mini example excerpt:
+
+```markdown
+**Frame 1:** Sarah, 35, freelance designer juggling 10 clients\n**Frame 2:** Spends 8 hours/month chasing overdue invoices\n**Frame 3:** $5,000 payment is 2 weeks overdue\n```
+
+---
+
+## Common Pitfalls
+
+### Pitfall 1: Generic Persona
+**Symptom:** "Meet User, a busy professional"
+
+**Consequence:** No one identifies with this character.
+
+**Fix:** Get specific: "Meet Sarah, 35, freelance designer, juggling 10 clients, home office, loves design but hates admin."
+
+---
+
+### Pitfall 2: Weak Problem
+**Symptom:** "User has a problem with efficiency"
+
+**Consequence:** Problem doesn't resonate emotionally.
+
+**Fix:** Make it visceral: "Sarah spends 8 hours/month chasing overdue invoices, missing family dinners, feeling anxious about cash flow."
+
+---
+
+### Pitfall 3: Forced Solution Introduction
+**Symptom:** "User magically discovers our product"
+
+**Consequence:** Feels contrived, not authentic.
+
+**Fix:** Show realistic discovery: "Sarah sees a recommendation in a designer forum" or "Sarah's colleague mentions it."
+
+---
+
+### Pitfall 4: Feature-Centric "Aha" Moment
+**Symptom:** "User sees the dashboard and loves the features"
+
+**Consequence:** No emotional payoff.
+
+**Fix:** Focus on outcome: "Sarah gets notification: '$5,000 received!' She's relieved—no awkward call needed."
+
+---
+
+### Pitfall 5: Vague "After" State
+**Symptom:** "Life is better now"
+
+**Consequence:** Not aspirational or concrete.
+
+**Fix:** Be specific: "Sarah leaves work at 6pm now, spending evenings with her kids instead of chasing clients. On-time payments jumped from 50% to 80%."
+
+---
+
+## References
+
+### Related Skills
+- `skills/proto-persona/SKILL.md` — Defines the main character
+- `skills/problem-statement/SKILL.md` — Frames the problem for Frame 2-3
+- `skills/positioning-statement/SKILL.md` — Informs the solution introduction in Frame 4
+- `skills/jobs-to-be-done/SKILL.md` — Informs the desired outcome in Frame 6
+
+### External Frameworks
+- Joseph Campbell, *The Hero's Journey* (1949) — Classic narrative structure
+- Pixar's story rules — "Once upon a time... Every day... Until one day..."
+- Donald Miller, *Building a StoryBrand* (2017) — Story-driven marketing frameworks
+
+### Dean's Work
+- Storyboard Storytelling Prompt (6-Frame Storyline Generator)
+
+### Provenance
+- Adapted from `prompts/storyboard-storytelling-prompt.md` in the `https://github.com/deanpeters/product-manager-prompts` repo.
+
+---
+
+**Skill type:** Component
+**Suggested filename:** `storyboard.md`
+**Suggested placement:** `/skills/components/`
+**Dependencies:** References `skills/proto-persona/SKILL.md`, `skills/problem-statement/SKILL.md`, `skills/positioning-statement/SKILL.md`, `skills/jobs-to-be-done/SKILL.md`

package/skills/storyboard/examples/sample.md

@@ -0,0 +1,71 @@
+# Storyboard Examples
+
+## Example 1: Good Storyboard (Invoice Automation Product)
+
+```markdown
+## 6-Frame Storyboard: SmartInvoice
+
+**Frame 1: Meet Sarah**
+Sarah, 35, is a freelance graphic designer managing 10 clients from her home office. She loves the creative work but dreads the admin—especially invoice tracking.
+
+**Frame 2: The Problem**
+Sarah spends 8 hours every month manually tracking overdue invoices in a spreadsheet, sending follow-up emails, and worrying about cash flow. It's repetitive, draining, and pulls her away from design work.
+
+**Frame 3: The 'Oh Crap' Moment**
+A major client's $5,000 payment is now 2 weeks overdue. Sarah realizes she forgot to follow up because she was buried in a design sprint. The client has gone silent, and she's panicking about rent due next week.
+
+**Frame 4: The Solution**
+Sarah discovers SmartInvoice through a designer forum. It promises to automatically send payment reminders at optimal times using AI. Skeptical but desperate, she signs up for the trial.
+
+**Frame 5: The 'Aha' Moment**
+Two days later, Sarah gets a notification: "Client XYZ just paid! $5,000 received." The AI-timed reminder worked—no awkward phone call needed. She's stunned and relieved.
+
+**Frame 6: Life After**
+Three months later, Sarah spends 30 minutes per month on invoicing instead of 8 hours. Her on-time payment rate jumped from 50% to 80%. She leaves work at 6pm now, spending evenings with her kids instead of chasing clients.
+
+**Visual Style:** Fat-marker sharpie sketches, minimal and monochrome
+```
+
+**Why this works:**
+- Persona is specific and relatable
+- Problem is measurable (8 hours/month) and emotional (anxiety)
+- "Oh Crap" moment is urgent and real
+- Solution introduction is natural (forum recommendation)
+- "Aha" moment is concrete ($5,000 received)
+- "After" state is aspirational (time with kids)
+
+---
+
+## Example 2: Bad Storyboard (Too Generic)
+
+```markdown
+## 6-Frame Storyboard: ProductX
+
+**Frame 1: Meet User**
+User is a person who uses software.
+
+**Frame 2: The Problem**
+User has a problem.
+
+**Frame 3: The 'Oh Crap' Moment**
+The problem gets worse.
+
+**Frame 4: The Solution**
+User discovers ProductX with amazing features.
+
+**Frame 5: The 'Aha' Moment**
+User uses ProductX and it works.
+
+**Frame 6: Life After**
+User is happy.
+```
+
+**Why this fails:**
+- "User" is not a person (no name, age, context)
+- "A problem" is too vague (what problem?)
+- No emotional weight or specificity
+- Solution is feature-centric ("amazing features") not outcome-centric
+- "Aha" moment is abstract ("it works" = meaningless)
+- "Happy" is not a concrete outcome
+
+**How to fix it:** Answer the 7 questions with specifics. Name the character. Describe the problem in detail. Make the "Oh Crap" moment urgent.

package/skills/storyboard/template.md

@@ -0,0 +1,41 @@
+# Storyboard Template
+
+Use this template to collect inputs and output a 6-frame storyboard narrative.
+
+## Provenance
+Adapted from `prompts/storyboard-storytelling-prompt.md` in the `https://github.com/deanpeters/product-manager-prompts` repo.
+
+## Inputs
+1. Main character (name, age, role, context)
+2. Problem/challenge
+3. "Oh Crap" moment
+4. Solution introduction
+5. "Aha" moment
+6. Life after the solution
+7. Visual style or assets (optional)
+
+## Output Template
+```markdown
+## Generated 6-Frame Storyline
+
+**Frame 1: Introducing the Main Character**
+- [Describe the main character, setting, and context]
+
+**Frame 2: The Problem Emerges**
+- [Describe the challenge and impact]
+
+**Frame 3: The "Oh Crap" Moment**
+- [Escalate the problem and create urgency]
+
+**Frame 4: The Solution Appears**
+- [Introduce the solution and initial reaction]
+
+**Frame 5: The "Aha" Moment**
+- [Show the breakthrough]
+
+**Frame 6: Life After the Solution**
+- [Describe the improved state]
+
+**Optional Visual Elements**
+- [If no style provided: use fat-marker, sharpie-style sketches, minimal monochrome]
+```

package/skills/summarize/.clawhub/origin.json

@@ -0,0 +1,7 @@
+{
+  "version": 1,
+  "registry": "https://clawhub.ai",
+  "slug": "summarize",
+  "installedVersion": "1.0.0",
+  "installedAt": 1770237162786
+}

package/skills/summarize/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: summarize
+description: "Summarizes URLs, local files, and YouTube links using the summarize CLI. Use when the user wants a summary of a webpage, PDF, video, or document."
+triggers:
+  - "summarize this URL"
+  - "give me a summary of"
+  - "summarize this article"
+  - "TLDR this page"
+  - "summarize this PDF"
+negative_triggers:
+  - "search the web for"
+  - "read this file"
+  - "extract data from"
+homepage: https://summarize.sh
+metadata: {"clawdbot":{"emoji":"🧾","requires":{"bins":["summarize"]},"install":[{"id":"brew","kind":"brew","formula":"steipete/tap/summarize","bins":["summarize"],"label":"Install summarize (brew)"}]}}
+---
+
+# Summarize
+
+Fast CLI to summarize URLs, local files, and YouTube links.
+
+## Quick start
+
+```bash
+summarize "https://example.com" --model google/gemini-3-flash-preview
+summarize "/path/to/file.pdf" --model google/gemini-3-flash-preview
+summarize "https://youtu.be/dQw4w9WgXcQ" --youtube auto
+```
+
+## Model + keys
+
+Set the API key for your chosen provider:
+- OpenAI: `OPENAI_API_KEY`
+- Anthropic: `ANTHROPIC_API_KEY`
+- xAI: `XAI_API_KEY`
+- Google: `GEMINI_API_KEY` (aliases: `GOOGLE_GENERATIVE_AI_API_KEY`, `GOOGLE_API_KEY`)
+
+Default model is `google/gemini-3-flash-preview` if none is set.
+
+## Useful flags
+
+- `--length short|medium|long|xl|xxl|<chars>`
+- `--max-output-tokens <count>`
+- `--extract-only` (URLs only)
+- `--json` (machine readable)
+- `--firecrawl auto|off|always` (fallback extraction)
+- `--youtube auto` (Apify fallback if `APIFY_API_TOKEN` set)
+
+## Config
+
+Optional config file: `~/.summarize/config.json`
+
+```json
+{ "model": "openai/gpt-5.2" }
+```
+
+Optional services:
+- `FIRECRAWL_API_KEY` for blocked sites
+- `APIFY_API_TOKEN` for YouTube fallback

package/skills/superdesign/.clawhub/origin.json

@@ -0,0 +1,7 @@
+{
+  "version": 1,
+  "registry": "https://clawhub.ai",
+  "slug": "superdesign",
+  "installedVersion": "1.0.0",
+  "installedAt": 1770236664941
+}

package/skills/superdesign/SKILL.md

@@ -0,0 +1,224 @@
+---
+name: superdesign
+description: "CSS theme patterns and design system reference — modern dark mode, neo-brutalism, glassmorphism, typography, animation micro-syntax. Use when you need specific CSS theme snippets, design system tokens, or frontend style patterns."
+triggers:
+  - "CSS theme patterns"
+  - "design system tokens"
+  - "glassmorphism css"
+  - "neo-brutalism style"
+  - "animation micro-syntax"
+negative_triggers:
+  - "build a full page"
+  - "create a component from scratch"
+  - "backend API"
+  - "frontend-design skill"
+metadata: {"clawdbot":{"emoji":"🎨"}}
+---
+
+# Frontend Design Skill
+
+Use this skill when creating UI components, landing pages, dashboards, or any frontend design work.
+
+## Design Workflow
+
+Follow this structured approach for UI design:
+
+1. **Layout Design** — Think through component structure, create ASCII wireframes
+2. **Theme Design** — Define colors, fonts, spacing, shadows
+3. **Animation Design** — Plan micro-interactions and transitions
+4. **Implementation** — Generate the actual code
+
+### 1. Layout Design
+
+Before coding, sketch the layout in ASCII format:
+
+```
+┌─────────────────────────────────────┐
+│         HEADER / NAV BAR            │
+├─────────────────────────────────────┤
+│                                     │
+│            HERO SECTION             │
+│         (Title + CTA)               │
+│                                     │
+├─────────────────────────────────────┤
+│   FEATURE   │  FEATURE  │  FEATURE  │
+│     CARD    │   CARD    │   CARD    │
+├─────────────────────────────────────┤
+│            FOOTER                   │
+└─────────────────────────────────────┘
+```
+
+### 2. Theme Guidelines
+
+**Color Rules:**
+- NEVER use generic bootstrap-style blue (#007bff) — it looks dated
+- Prefer oklch() for modern color definitions
+- Use semantic color variables (--primary, --secondary, --muted, etc.)
+- Consider both light and dark mode from the start
+
+**Font Selection (Google Fonts):**
+```
+Sans-serif: Inter, Roboto, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, Space Grotesk
+Monospace: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Space Mono, Geist Mono
+Serif: Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville
+Display: Architects Daughter, Oxanium
+```
+
+**Spacing & Shadows:**
+- Use consistent spacing scale (0.25rem base)
+- Shadows should be subtle — avoid heavy drop shadows
+- Consider using oklch() for shadow colors too
+
+### 3. Theme Patterns
+
+**Modern Dark Mode (Vercel/Linear style):**
+```css
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.970 0 0);
+  --muted: oklch(0.970 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --border: oklch(0.922 0 0);
+  --radius: 0.625rem;
+  --font-sans: Inter, system-ui, sans-serif;
+}
+```
+
+**Neo-Brutalism (90s web revival):**
+```css
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0 0 0);
+  --primary: oklch(0.649 0.237 26.97);
+  --secondary: oklch(0.968 0.211 109.77);
+  --accent: oklch(0.564 0.241 260.82);
+  --border: oklch(0 0 0);
+  --radius: 0px;
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0%);
+  --font-sans: DM Sans, sans-serif;
+  --font-mono: Space Mono, monospace;
+}
+```
+
+**Glassmorphism:**
+```css
+.glass {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 1rem;
+}
+```
+
+### 4. Animation Guidelines
+
+**Micro-syntax for planning:**
+```
+button: 150ms [S1→0.95→1] press
+hover: 200ms [Y0→-2, shadow↗]
+fadeIn: 400ms ease-out [Y+20→0, α0→1]
+slideIn: 350ms ease-out [X-100→0, α0→1]
+bounce: 600ms [S0.95→1.05→1]
+```
+
+**Common patterns:**
+- Entry animations: 300-500ms, ease-out
+- Hover states: 150-200ms
+- Button press: 100-150ms
+- Page transitions: 300-400ms
+
+### 5. Implementation Rules
+
+**Tailwind CSS:**
+```html
+<!-- Import via CDN for prototypes -->
+<script src="https://cdn.tailwindcss.com"></script>
+```
+
+**Flowbite (component library):**
+```html
+<link href="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+```
+
+**Icons (Lucide):**
+```html
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+<script>lucide.createIcons();</script>
+```
+
+**Images:**
+- Use real placeholder services: Unsplash, placehold.co
+- Never make up image URLs
+- Example: `https://images.unsplash.com/photo-xxx?w=800&h=600`
+
+### 6. Responsive Design
+
+Always design mobile-first and responsive:
+
+```css
+/* Mobile first */
+.container { padding: 1rem; }
+
+/* Tablet */
+@media (min-width: 768px) {
+  .container { padding: 2rem; }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .container { max-width: 1200px; margin: 0 auto; }
+}
+```
+
+### 7. Accessibility
+
+- Use semantic HTML (header, main, nav, section, article)
+- Include proper heading hierarchy (h1 → h2 → h3)
+- Add aria-labels to interactive elements
+- Ensure sufficient color contrast (4.5:1 minimum)
+- Support keyboard navigation
+
+### 8. Component Design Tips
+
+**Cards:**
+- Subtle shadows, not heavy drop shadows
+- Consistent padding (p-4 to p-6)
+- Hover state: slight lift + shadow increase
+
+**Buttons:**
+- Clear visual hierarchy (primary, secondary, ghost)
+- Adequate touch targets (min 44x44px)
+- Loading and disabled states
+
+**Forms:**
+- Clear labels above inputs
+- Visible focus states
+- Inline validation feedback
+- Adequate spacing between fields
+
+**Navigation:**
+- Sticky header for long pages
+- Clear active state indication
+- Mobile-friendly hamburger menu
+
+---
+
+## Quick Reference
+
+| Element | Recommendation |
+|---------|---------------|
+| Primary font | Inter, Outfit, DM Sans |
+| Code font | JetBrains Mono, Fira Code |
+| Border radius | 0.5rem - 1rem (modern), 0 (brutalist) |
+| Shadow | Subtle, 1-2 layers max |
+| Spacing | 4px base unit (0.25rem) |
+| Animation | 150-400ms, ease-out |
+| Colors | oklch() for modern, avoid generic blue |
+
+---
+
+*Based on SuperDesign patterns — https://superdesign.dev*