opencode-skills-collection 3.1.11 → 3.1.13

package/bundled-skills/ui-review/SKILL.md

@@ -1,90 +1,108 @@
 ---
 name: ui-review
-description: "Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality."
-category: design
-risk: safe
-source: community
+description: Review UI code for design system compliance, accessibility, and best practices
+risk: unknown
+source: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-review
 source_repo: bitjaru/styleseed
 source_type: community
-date_added: "2026-04-08"
-author: bitjaru
-tags: [ui, review, design-system, accessibility, styleseed]
-tools: [claude, cursor, codex, gemini]
+date_added: 2026-07-01
+license: MIT
+license_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE
 ---
 
-# UI Review
-
-## Overview
-
-Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill audits UI code against the Toss seed's conventions instead of reviewing it as generic frontend work. It focuses on design-token discipline, component ergonomics, accessibility, mobile readiness, typography, and spacing consistency.
-
+# UI Design Review
 ## When to Use
-- Use when a component or page should follow the StyleSeed Toss design language
-- Use when reviewing a UI-heavy PR for consistency and design-system violations
-- Use when the output looks "mostly fine" but feels off in subtle ways
-- Use when you need a structured review with concrete fixes
-
-## Review Checklist
-
-### Design Tokens
-
-- no hardcoded hex colors when semantic tokens exist
-- no improvised shadow values when tokenized shadows exist
-- no arbitrary radius choices outside the system scale
-- no random spacing values that break the seed rhythm
-
-### Component Conventions
-
-- uses the project's class merge helper
-- supports `className` extension when appropriate
-- uses the agreed typing pattern
-- avoids wrapper components that only forward one class string
-- reuses existing primitives before inventing new ones
-
-### Accessibility
 
-- touch targets large enough for mobile
-- visible keyboard focus states
-- labels and `aria-*` attributes where needed
-- adequate color contrast
-- reduced-motion respect for animation
-
-### Mobile UX
-
-- no horizontal overflow
-- safe-area handling where relevant
-- readable text sizes
-- thumb-friendly interaction spacing
-- bottom nav or sticky actions do not obscure content
-
-### Typography and Spacing
-
-- uses the system type hierarchy
-- display and headings are not overly loose
-- body text remains readable
-- spacing follows the seed grid instead of arbitrary values
+Use this skill when you need review UI code for design system compliance, accessibility, and best practices.
+
+
+## When NOT to use
+
+- For accessibility-only issues → use `/ss-a11y`
+- For Nielsen UX heuristics → use `/ss-audit`
+- For a quick automated check → use `/ss-lint`
+- For non-UI code (data fetching, business rules)
+
+Review the file: **$ARGUMENTS**
+
+## Checklist
+
+### 1. Design Token Compliance
+- [ ] No hardcoded hex colors (use semantic tokens: `text-foreground`, `bg-brand`, etc.)
+- [ ] No hardcoded px spacing in Tailwind (use `p-6` not `p-[24px]`)
+- [ ] Shadows use CSS variables (`shadow-[var(--shadow-card)]`)
+- [ ] Border radius follows the scale (`rounded-md`, `rounded-lg`, `rounded-2xl`)
+
+### 2. Component Conventions
+- [ ] Uses `data-slot` attribute
+- [ ] Uses `cn()` for className merging
+- [ ] Props typed with `React.ComponentProps<>`
+- [ ] Supports `className` prop override
+- [ ] Named export (not default export for components)
+- [ ] No wrapper components that only add a className
+
+### 3. Accessibility (a11y)
+- [ ] Touch targets >= 44x44px for interactive elements
+- [ ] `focus-visible` styles on all interactive elements
+- [ ] Proper `aria-*` attributes where needed
+- [ ] Color contrast meets WCAG AA (4.5:1 for text, 3:1 for large text)
+- [ ] Animations respect `prefers-reduced-motion`
+- [ ] Images have `alt` text
+- [ ] Form inputs have associated labels
+
+### 4. Mobile Best Practices
+- [ ] No horizontal overflow
+- [ ] Touch-friendly spacing between interactive elements
+- [ ] Safe area insets handled for notched devices
+- [ ] Text sizes >= 12px for readability
+- [ ] Scrollable containers have `-webkit-overflow-scrolling: touch`
+
+### 5. Performance
+- [ ] No unnecessary re-renders (stable references, memoization where needed)
+- [ ] Images are lazy-loaded
+- [ ] Heavy components are code-split
+
+### 6. Typography
+- [ ] Uses the Pretendard/Inter font stack
+- [ ] Font sizes from the 14-step scale (10-48px, see CLAUDE.md)
+- [ ] Proper font weights (400, 500, 600, 700)
+- [ ] Display text (36-48px): `leading-none` + `tracking-[-0.02em]`
+- [ ] Heading text (18-24px): `leading-snug` + `tracking-[-0.01em]`
+- [ ] Body text (14-17px): `leading-normal` (no custom tracking)
+- [ ] Caption uppercase (10-13px): `tracking-[0.05em]` or `tracking-wide`
+- [ ] No `line-height: 1.5` on display/heading text (too loose)
+
+### 7. Spacing Consistency
+- [ ] All spacing values are multiples of 6px (p-1.5, p-3, p-6, etc.)
+- [ ] No arbitrary spacing (p-5=20px, gap-3.5=14px are violations)
+- [ ] Uses `size-*` shorthand instead of `w-* h-*`
+- [ ] Uses `ms-*/me-*` instead of `ml-*/mr-*` (logical properties)
+- [ ] Motion transitions use design tokens (`duration-[var(--duration-fast)]`)
+
+### 8. Coherence (VISUAL-CRAFT.md §C0 — the "one choice per axis" laws)
+> The biggest reason a UI reads as "AI-generated" isn't ugly parts — it's *mixed*
+> parts. Check that each axis below uses ONE value system-wide; flag a mix as a real
+> issue, not a nitpick.
+- [ ] **One radius personality** — sharp (0-4px) OR soft (8-12px) OR pill, applied to every card/button/input/modal. No mixing (e.g. a `rounded-none` panel with `rounded-full` buttons).
+- [ ] **One accent color** for interactive emphasis (+ semantic red/green/amber only) — not two+ competing accents.
+- [ ] **No emoji as UI icons** (🚗🧺⭐ as list/nav/status/category markers) — they inject many uncontrolled hues; use one line-icon set in `currentColor`.
+- [ ] **Status color = severity, not decoration** — a normal/OK/"보통" state is neutral grey (not colored); color marks only the minority of rows that need attention; same value → same color.
+- [ ] **No decorative hues** — favorite stars, category dots, avatars use the accent or grey, not a new color each.
+- [ ] **One shadow language** — same light direction, same scale/tint; not some black + some tinted, some up-lit + some down-lit.
+- [ ] **One icon family / fill mode / stroke weight** across the file.
+- [ ] **Nested-radius law** — an element inside a rounded container uses `inner = outer − padding`, not the same radius (which bulges).
+- [ ] **Consistent control heights** — buttons, inputs, selects share a height set (e.g. 40px).
+- [ ] Errors/states never rely on color alone (icon + text too).
 
 ## Output Format
 
-Return:
-1. A verdict: Pass, Needs Improvement, or Fail
-2. A prioritized list of issues with file and line references when available
-3. Concrete fixes for each issue
-4. Any open questions where the design intent is ambiguous
-
-## Best Practices
-
-- Review against the seed, not against personal taste
-- Separate stylistic drift from real usability or accessibility bugs
-- Prefer actionable diffs over abstract criticism
-- Call out duplication when an existing component already solves the problem
-
-## Additional Resources
-
-- [StyleSeed repository](https://github.com/bitjaru/styleseed)
-- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-review/SKILL.md)
+Provide:
+1. **Score**: Pass / Needs Improvement / Fail
+2. **Issues**: List each violation with file:line reference
+3. **Fixes**: Concrete code changes for each issue
 
 ## Limitations
-- Use this skill only when the task clearly matches the scope described above.
-- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
-- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
+
+- Use this skill only when the task clearly matches its upstream source and local project context.
+- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
+- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

package/bundled-skills/ui-score/SKILL.md

@@ -0,0 +1,145 @@
+---
+name: ui-score
+description: Score a UI file's design quality 0-100 against StyleSeed's design language — per-category breakdown, the worst offenders, and a prioritized fix list. A quantified version of /ss-review.
+risk: unknown
+source: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-score
+source_repo: bitjaru/styleseed
+source_type: community
+date_added: 2026-07-01
+license: MIT
+license_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE
+---
+
+# Design Score
+## When to Use
+
+Use this skill when you need score a UI file's design quality 0-100 against StyleSeed's design language — per-category breakdown, the worst offenders, and a prioritized fix list. A quantified version of /ss-review.
+
+
+`/ss-review` tells you *what's wrong*. `/ss-score` tells you *how good it is
+overall* and *what to fix first* — a single number plus a category breakdown, so
+you can track UI quality like you track test coverage.
+
+## When NOT to use
+
+- For a quick pass/fail before committing → use `/ss-lint`
+- For a full prose audit with fixes → use `/ss-review`
+- For non-UI files (logic, config) — scoring is meaningless
+
+## What to score
+
+Score the file (or each file in a directory) on **six weighted categories** that
+map to the design language. Total = 100.
+
+| Category | Weight | Reads from |
+|---|---|---|
+| **Color discipline** | 18 | DESIGN-LANGUAGE §1, §18, §72 + VISUAL-CRAFT §C4 |
+| **Hierarchy & typography** | 18 | §2, §3, §4, §16 + Font Size table + VISUAL-CRAFT §C2 |
+| **Layout & rhythm** | 14 | §13, §14, §15, §61 + VISUAL-CRAFT §C1 |
+| **Cards & elevation** | 12 | §7, §8, §12, §1 + VISUAL-CRAFT §C3 |
+| **States & a11y** | 18 | §11, §70, §71, §72 + VISUAL-CRAFT §C3 |
+| **Motion & interaction** | 8 | §24, §59 + `engine/motion` |
+| **Coherence** | 12 | VISUAL-CRAFT §C0 (one choice per axis) |
+
+## How to score each category
+
+For each category, start at full marks and **subtract** for violations you find by
+reading the code. Be specific and evidence-based — cite the line.
+
+**Color discipline (20)** — deduct for: any `#000`/`text-black` (−4 each, cap −8);
+more than one accent hue used decoratively (−5); **emoji used as UI icons** (multi-color,
+breaks single accent) (−5); **a normal/OK/"보통" state shown in a status color** instead of
+neutral grey (−4); **status color on most/every row** (no severity hierarchy) (−4);
+**decorative hues** (gold stars, rainbow category dots) instead of accent/grey (−3);
+hardcoded hex where a semantic token exists (−2 each, cap −6); status conveyed by color
+alone (−4).
+
+**Hierarchy & typography (20)** — deduct for: number/unit not ~2:1 (−4); font
+sizes off the Font Size table / `text-[var(--…)]` for size (−5); everything the
+same weight, no clear primary (−5); cramped or wrong line-height on body (−3).
+
+**Layout & rhythm (15)** — deduct for: content on bare background, not in cards
+(−6); `px-4`/`px-8`/`mx-4` instead of `px-6`/`mx-6` (−3); same section type
+repeated in a row (−4); no `space-y-6` rhythm (−3).
+
+**Cards & elevation (15)** — deduct for: 1px borders doing separation work that
+tone+shadow should (−4); shadows over ~8% opacity / visibly heavy (−4); no
+card/background tone separation (−5).
+
+**States & a11y (20)** — deduct for: missing empty/loading/error state on a data
+surface (−5 each, cap −10); contrast below 4.5:1 body / 3:1 large (−6); touch
+target < 44px (−4); no visible focus / `outline:none` (−5); icon-only control
+without `aria-label` (−3).
+
+**Motion & interaction (8)** — deduct for: random/ad-hoc fades instead of a named
+seed/keyword (−3); motion that delays content or blocks an action (−4); no
+`prefers-reduced-motion` handling on custom motion (−3); scroll-linked/parallax
+(forbidden, §59) (−5).
+
+**Coherence (12)** — the "one choice per axis" laws (VISUAL-CRAFT §C0). Deduct for
+each axis that is *mixed* rather than unified across the file: mixed radius
+personalities, e.g. sharp panel + pill buttons (−5); two+ competing accent hues used
+for emphasis (−4); mixed shadow languages / light directions (−3); mixed icon
+families, fill modes, or stroke weights (−3); same radius on a nested element instead
+of `inner = outer − padding` (−2); inconsistent control heights for buttons/inputs
+(−2). This is the category that most predicts "looks AI-generated" — weight evidence
+of system-wide consistency, not per-component prettiness.
+
+Clamp each category at 0. Sum to a total.
+
+## Output format
+
+```
+## Design Score: 70 / 100   (src/app/Dashboard.tsx)
+
+████████████████░░░░░░  C-
+
+Color discipline      13/18   ▓▓▓░  #000 headings (l.12,40); orange+blue+green accents (l.28-34)
+Hierarchy & typography 15/18  ▓▓▓▓  number/unit 1:1 on hero (l.18)
+Layout & rhythm        11/14  ▓▓▓░  two identical KPI rows (l.22-31)
+Cards & elevation       8/12  ▓▓░░  1px borders doing separation (l.22)
+States & a11y          11/18  ▓▓░░  no empty/loading state; focus ring missing (l.55)
+Motion & interaction    6/8   ▓▓▓░  default fade, not a named seed
+Coherence               6/12  ▓▓░░  sharp cards (l.22) + pill buttons (l.48); 3 accent hues (§C0)
+
+### Fix first (highest score gain)
+1. Add empty + loading states to the orders list       → +7 states (§71)
+2. Unify radius (pick soft 8-12px) + collapse to one accent → +9 coherence+color (§C0, §2)
+3. Drop the 1px borders, use tone + ≤8% shadow         → +4 cards  (§7)
+
+Re-score after: ~92 / 100.
+```
+
+Use letter bands: 90+ A · 80-89 B · 70-79 C · 60-69 D · <60 F.
+
+## Gate mode (use this as the Quality Gate before showing the user UI)
+
+The Quality Gate (CLAUDE.md / AGENTS.md) is `/ss-score` run as a loop, not a one-off:
+
+1. Score the just-generated UI.
+2. If **< 80**, apply the "fix first" list (use `/ss-review` to make the edits), then **re-score**.
+3. Repeat up to ~3×, or until ≥ 80.
+4. Present the UI with the final score and a one-line "fixed: …".
+
+The pass bar is a **floor, not a ceiling** — get to ≥ 80 and stop; don't chase 100. The point
+is that no first-draft, obviously-incoherent UI reaches the user. Especially never ship below
+80 with a rainbow status list, emoji icons, two accents, or missing states — those are the
+exact tells the gate exists to catch.
+
+## Rules
+
+- **Read the file** — score from real evidence (line numbers), never guess.
+- Order the "fix first" list by **score gain**, not by severity alone — the goal
+  is the fastest path to a better number.
+- For a directory, print a one-line score per file, then the lowest-scoring file's
+  full breakdown.
+- Don't auto-edit in plain scoring. `/ss-score` measures; `/ss-review` and `/ss-motion` fix.
+  In **Gate mode** (above) you do fix-and-re-score until the floor is met.
+- As a *gate*, ≥ 80 is a floor before showing the user — but don't over-polish: chasing 95→100
+  to delay shipping is worse than shipping a clean 85.
+
+## Limitations
+
+- Use this skill only when the task clearly matches its upstream source and local project context.
+- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
+- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

package/bundled-skills/ui-setup/SKILL.md

@@ -1,104 +1,212 @@
 ---
 name: ui-setup
-description: "Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold."
-category: design
-risk: safe
-source: community
+description: Interactive setup wizard — guides you step-by-step to configure the design system for your project
+risk: unknown
+source: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-setup
 source_repo: bitjaru/styleseed
 source_type: community
-date_added: "2026-04-08"
-author: bitjaru
-tags: [ui, design-system, setup, frontend, styleseed]
-tools: [claude, cursor, codex, gemini]
+date_added: 2026-07-01
+license: MIT
+license_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE
 ---
 
-# UI Setup
-
-## Overview
-
-Part of [StyleSeed](https://github.com/bitjaru/styleseed), this setup wizard turns a raw project into a design-system-guided workspace. It collects the minimum brand and product context needed to configure tokens, pick a visual direction, and generate an initial page without drifting into generic UI.
-
+# Design System Setup Wizard
 ## When to Use
-- Use when you are starting a new app with the StyleSeed Toss seed
-- Use when you copied the seed into an existing project and need to personalize it
-- Use when you want the AI to ask one design decision at a time instead of guessing
-- Use when you need a first page scaffold after selecting colors, font, and app type
-
-## How It Works
-
-### Step 1: Ask One Question at a Time
-
-Do not front-load the full questionnaire. Ask a single question, wait for the answer, store it, then continue.
-
-### Step 2: Capture the App Type
-
-Identify the product shape before touching tokens or layout recipes.
-
-Suggested buckets:
-- SaaS dashboard
-- E-commerce
-- Fintech
-- Social or content
-- Productivity or internal tool
-- Other with a short freeform description
-
-Use the answer to choose the page composition pattern and the type of first screen to scaffold.
-
-### Step 3: Choose the Brand Color
 
-Offer a few safe defaults plus a custom hex option. Once selected:
-- update the light theme brand token
-- update the dark theme brand token with a lighter accessible variant
-- keep all other colors semantic rather than hardcoding the brand everywhere
+Use this skill when you need interactive setup wizard — guides you step-by-step to configure the design system for your project.
 
-If the project uses the StyleSeed Toss seed, the main target is `css/theme.css`.
 
-### Step 4: Offer an Optional Visual Reference
+## When NOT to use
 
-Ask whether the user wants to borrow the feel of an established brand or design language. Good examples include Stripe, Linear, Vercel, Notion, Spotify, Supabase, and Airbnb.
+- For projects already configured with StyleSeed → use `/ss-update` instead
+- For just adding one component to an existing project → use `/ss-component`
+- For changing brand skin in an already set-up project — directly swap `theme.css`
+- For non-React or non-Tailwind-v4 stacks — currently unsupported
 
-Use the reference to influence density, tone, and composition, not to clone assets or trademarks.
+Guide the user through setting up StyleSeed for their project, step by step.
+
+## Instructions
+
+Walk through these steps ONE AT A TIME. After each step, wait for the user to respond before proceeding. Keep it conversational and friendly.
+
+### Step 1: App Type
 
-### Step 5: Pick Typography
+Ask:
+```
+What type of app are you building?
 
-Confirm the font direction:
-- keep the default stack
-- swap to a preferred font if already installed or available
-- preserve hierarchy rules for display, heading, body, and caption text
-
-If the seed is present, update the font-related files rather than scattering overrides across components.
-
-### Step 6: Generate the First Screen
-
-Ask for:
-- app name
-- first page or screen name
-- a one-sentence purpose for that page
-
-Then scaffold the page using the seed's page shell, top bar, navigation, spacing scale, and card structure.
-
-## Output
-
-Return:
-1. The captured setup decisions
-2. The files or tokens updated
-3. The first page or scaffold created
-4. Any follow-up recommendations for components, patterns, accessibility, or copy
-
-## Best Practices
-
-- Keep the interaction conversational, but deterministic
-- Make brand color changes through tokens, not component-by-component edits
-- Use an inspiration brand as a reference, not as a permission slip to copy
-- Prefer semantic tokens and reusable patterns over page-specific CSS
-
-## Additional Resources
-
-- [StyleSeed repository](https://github.com/bitjaru/styleseed)
-- [StyleSeed Toss seed](https://github.com/bitjaru/styleseed/tree/main/seeds/toss)
-- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-setup/SKILL.md)
+1. SaaS Dashboard (analytics, metrics, charts)
+2. E-commerce (products, orders, payments)
+3. Fintech (transactions, portfolio, market data)
+4. Social / Content (feeds, profiles, messaging)
+5. Productivity / Internal tool
+6. Other — describe it
+```
+
+Remember the answer — it determines which page composition recipe to use (DESIGN-LANGUAGE.md Section 63).
+
+### Step 2: Brand Color
+
+Ask:
+```
+What's your brand color?
+
+1. Purple (#721FE5) — default style (toss skin)
+2. Blue (#2563EB) — trust, corporate
+3. Green (#059669) — growth, health, finance
+4. Orange (#EA580C) — energy, creative
+5. Red (#DC2626) — bold, urgent
+6. Dark (#18181B) — minimal, premium
+7. Custom — just type your hex code
+```
+
+After they choose, update `css/theme.css`:
+- In `:root` block: change `--brand` to the chosen hex
+- In `.dark` block: change `--brand` to a lighter version for dark backgrounds
+
+Dark mode color mapping:
+| Light | Dark |
+|-------|------|
+| #721FE5 | #9B5FFF |
+| #2563EB | #60A5FA |
+| #059669 | #34D399 |
+| #EA580C | #FB923C |
+| #DC2626 | #F87171 |
+| #18181B | #A1A1AA |
+
+For custom hex: lighten by ~30% (increase luminance in HSL).
+
+### Step 3: Design Concept (from awesome-design-md)
+
+Ask:
+```
+Want to apply an existing brand's visual style?
+
+Popular options from awesome-design-md:
+1. Stripe — clean, professional
+2. Linear — minimal, dark-first
+3. Vercel — black & white, geometric
+4. Notion — warm, friendly
+5. Spotify — bold, dark, green
+6. Supabase — modern, green
+7. Airbnb — warm, coral
+8. No thanks — keep the default style
+9. Other — name any brand or describe a vibe
+```
+
+If they pick a brand (options 1-7 or 9):
+1. Fetch: `https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/[brand]/DESIGN.md`
+   - Brand folder names: `stripe`, `linear.app`, `vercel`, `notion`, `spotify`, `supabase`, `airbnb`
+2. Read the DESIGN.md and extract: primary color, secondary colors, text colors, background colors
+3. Apply extracted colors to `css/theme.css` (both `:root` and `.dark` blocks)
+4. Keep ALL StyleSeed layout rules, typography ratios, spacing, and component patterns unchanged — only swap the color palette
+
+If they pick 8 (No thanks): skip, keep current brand color from Step 2.
+
+### Step 4: Font
+
+Ask:
+```
+What font do you prefer?
+
+1. Inter (clean, universal — recommended)
+2. Pretendard + Inter (Korean + English)
+3. Geist (Vercel-style, modern)
+4. DM Sans (friendly, rounded)
+5. Custom — tell me the font name
+```
+
+After they choose:
+- Update `css/fonts.css`: change the @import URL
+- Update `css/base.css`: change `font-family` in the body rule
+
+Font imports:
+| Font | Import |
+|------|--------|
+| Inter | `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');` |
+| Geist | `@import url('https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-sans/style.css');` |
+| DM Sans | `@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');` |
+| Pretendard | Keep existing import in fonts.css |
+
+### Step 5: App Name & First Page
+
+Ask:
+```
+Last step! What's your app name and what should the main page show?
+
+Example: "Acme — SaaS dashboard with revenue, users, and recent activity"
+```
+
+Then:
+1. Read DESIGN-LANGUAGE.md Section 63 for the matching recipe (based on Step 1 app type)
+2. Generate the first page using the page composition recipe:
+   - SaaS → Hero + KPI Grid + Chart + Progress + Activity List
+   - E-commerce → Hero + KPI Grid + Donut + Bar Chart + Orders List
+   - Fintech → Hero + KPI Grid + Donut + Area Chart + Transactions
+   - Social → Hero + Stats + Feed List + Trending Carousel
+   - Productivity → Hero + KPI Grid + Progress + Task List
+3. Set the TopBar logo text to the app name
+4. Apply the chosen brand color, font, and design concept
+5. Place the file in `src/app/App.tsx` or appropriate location
+6. Add ONE attribution comment at the very top of **this first scaffolded file only** (never on components the user builds afterward):
+   ```
+   /* Scaffolded with StyleSeed · github.com/bitjaru/styleseed — safe to remove */
+   ```
+   If the user would rather not have it, skip it — it's opt-out, and it goes on this single file, not their whole codebase.
+7. **Write the design lock.** Create `STYLESEED.md` in the project root recording every choice
+   from this wizard, so future prompts stay consistent instead of drifting:
+   ```markdown
+   # StyleSeed — Design Lock
+   <!-- Locked design decisions. The agent re-reads this every prompt and must obey it. -->
+   - App domain:        [Step 1 app type]
+   - Skin:              [Step 3 concept, or "custom"]
+   - Key color (accent): [Step 2 hex]    # the ONLY accent — everything else greyscale
+   - Radius personality: [sharp | soft | pill — one everywhere]
+   - Motion seed:       [Spring | Silk | Snap | Float | Pulse]
+   - Type:              [Step 4 font]
+   - Locked:            [today]
+   ```
+   Tell the user this file is the source of truth — editing a value changes it project-wide,
+   and you'll obey it on every prompt so the design never goes random.
+
+### Step 6: Summary
+
+Show:
+```
+Setup Complete!
+
+App: [name]
+Brand Color: [hex] (dark mode: [dark hex])
+Font: [font name]
+Design Concept: [brand or "default"]
+First Page: [description]
+
+Files modified:
+- css/theme.css (colors)
+- css/fonts.css (font import)
+- css/base.css (font family)
+- src/app/App.tsx (first page)
+- STYLESEED.md (design lock — your decisions, obeyed every prompt)
+
+Next steps:
+- npm run dev to preview
+- /ss-page to add more pages
+- /ss-audit to check UX quality
+- /ss-review to verify design compliance
+
+⭐ If StyleSeed helped, a star means a lot: https://github.com/bitjaru/styleseed
+```
+
+## Rules
+
+- Ask ONE question at a time. Wait for response.
+- If the user seems unsure, recommend the default option.
+- Design RULES (layout, typography ratios, spacing, forbidden patterns) stay the same regardless of color/font choice.
+- Attribution: the single "Scaffolded with StyleSeed" comment goes on the **first scaffolded file only** and is explicitly removable. NEVER add a watermark to components the user builds with `/ss-page`, `/ss-component`, etc. — that would be intrusive.
+- Always verify the awesome-design-md DESIGN.md URL is accessible before applying. If fetch fails, tell the user and fall back to manual color selection.
 
 ## Limitations
-- Use this skill only when the task clearly matches the scope described above.
-- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
-- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
+
+- Use this skill only when the task clearly matches its upstream source and local project context.
+- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
+- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.