--- name: StyleSeed Setup slug: styleseed-setup category: Frontend description: StyleSeed Setup guides selection of output grammar, domain, page type, brand recipe, palette recipe, and optional aesthetic profile before creating a design lock and scaffolding a first screen. It is used when starting a new StyleSeed project or resolving supported IDs. github: "https://github.com/bitjaru/styleseed/tree/main/skills/ss-setup" language: TypeScript stars: 906 forks: 82 install: "npx degit https://github.com/bitjaru/styleseed/tree/main/skills/ss-setup ~/.claude/skills/ss-setup" installs_to: ~/.claude/skills/ss-setup source_path: skills/ss-setup/SKILL.md collection_size: 23 category_size: 567 collection_url: "https://dirskills.com/collections/bitjaru/styleseed" added: 2026-08-22T05:21:07.422Z last_synced: 2026-08-22T05:21:07.422Z canonical_url: "https://dirskills.com/skills/styleseed-setup" --- # StyleSeed Setup StyleSeed Setup guides selection of output grammar, domain, page type, brand recipe, palette recipe, and optional aesthetic profile before creating a design lock and scaffolding a first screen. It is used when starting a new StyleSeed project or resolving supported IDs. **Install:** ```bash npx degit https://github.com/bitjaru/styleseed/tree/main/skills/ss-setup ~/.claude/skills/ss-setup ``` ## README # StyleSeed setup StyleSeed setup chooses a **design method for the result**, not a favorite brand to imitate. Use `/ss-resolve --list` (Claude Code) or `$ss-resolve --list` (Codex) to inspect the supported grammar, adapter, domain, page, recipe, palette, and profile IDs without loading the full handbook. ## When not to use - Project already has a valid `STYLESEED.md` → use `/ss-update`. - User supplied references that are not represented by a built-in grammar → run `/ss-reference` before setup, then select the compiled grammar. - One component inside an established system → `/ss-component`. The method, review, and reference compiler are framework-agnostic. The bundled component scaffold currently targets React and Tailwind v4; on another stack configure the lock and apply the method without pretending the scaffold is portable. ## Wizard — one decision at a time ### 1. Product job and surface Ask what is being built, who uses it, and whether it is a mobile/desktop product, website, social carousel, slide deck, document/report, or single-frame graphic. Select a surface adapter from `ADAPTERS.md`, then infer domain and page/artifact type. ### 2. Output grammar Recommend exactly one grammar from `RULESETS.md` and explain the job match in one sentence: - `consumer-service` - `operations-console` - `technical-instrument` - `editorial-reading` - `commerce-conversion` - `institutional-service` - `expressive-marketing` - `sequential-story` - `reference:` when `/ss-reference` already compiled one Do not recommend Toss as the universal default. It is one reference family for `consumer-service`. If none fits and the user has references, route to `/ss-reference`. ### 3. Page type and domain bias Confirm the concrete page (dashboard, form, landing, detail, list, settings, onboarding) and read its domain × page intersection. This controls composition; the aesthetic profile does not. ### 4. Brand recipe Recommend one morphology from `BRAND-RECIPES.md`. Use `auto` when the maintained grammar mapping fits. Use an explicit recipe when the product needs a different geometry, containment, navigation, control, or collection language. A recipe is not a company clone and does not select colors. ### 5. Palette recipe Recommend one semantic palette from `PALETTE-RECIPES.md`. Use `auto` when its maintained recipe mapping fits. An explicit palette must still preserve semantic roles, surface/chrome separation, status cues, and validated contrast. The recipe is a product posture, not a finite swatch list. When the user supplies a key color, select perceptual character, light/dark environment, surface temperature, and accent relationship; `$ss-resolve` then derives the actual OKLCH ramps and roles. Palette selection is not permission to recolor every surface. ### 6. Optional aesthetic profile Recommend one profile from `PRESETS.md` only when it strengthens the product. `none` is a good default. A profile modifies coordinated visual axes but cannot replace the output grammar. ### 7. Brand and bounded axes Lock a real brand color if supplied; otherwise start from the selected palette's primary role. For a supplied key, recommend `calm|balanced|vivid|deep` from the product posture rather than asking for an unbounded mood word. Then confirm light/dark mode, `neutral|warm|cool` surfaces, and `auto|tonal|adjacent|contrast` accent relationship. Confirm font/language, density, radius, elevation, imagery/data role, and motion inside the grammar's allowed ranges. Do not use generic indigo or a stale purple mislabeled as Toss. ### 8. Write the design lock Create `STYLESEED.md`: ```markdown # StyleSeed — Design Lock - App domain: fintech - Surface: mobile-app - Surface adapter: product-ui - Page type: dashboard - Output grammar: consumer-service - Grammar path: built-in:engine/RULESETS.md - Grammar fallback: consumer-service - Reference confidence: n/a - Brand recipe: calm-consumer - Palette recipe: quiet-mineral - Key color: #3182F6 - Palette character: calm - Palette mode: light - Palette harmony: auto - Surface temperature: neutral - Aesthetic profile: none - Skin: custom - Primary action: #3182F6 - Font: Pretendard - Radius: soft - Elevation: light=tonal grouping + restrained shadow · dark=tonal ramp + hairline - Density: comfortable - Motion: Spring restrained - Imagery/data role: personal state first; charts only for a decision - Signature move: one calm contextual briefing above the account summary - Locked: YYYY-MM-DD ``` For a compiled grammar use its actual path and confidence. Reject unknown enum values rather than treating the lock as an exemption. ### 9. Scaffold and prove Compile the selected method before code: ```bash node /scripts/resolve-context.mjs \ --project-root . --from-lock STYLESEED.md --agent claude ``` Use `--agent codex` in Codex. The resolver writes `.styleseed/effective-rules.md` and a hash-verifiable `.styleseed/manifest.json`. Read the effective bundle, not `llms-full.txt`. If the user asked for a first screen, build from that bundle, run `/ss-score` to the gate floor, and finish with `/ss-verify` when renderable. If visual rendering is unavailable, disclose that it was skipped. ## Completion report Report the selected grammar and why, page/domain intersection, brand recipe, palette recipe, optional profile, lock path, compiled bundle and manifest paths, files changed, score, and visual verification status. Mention `/ss-reference` as the path for future references that need their own grammar. ## Rules - Ask one question at a time and recommend a concrete default. - Output grammar is required; aesthetic profile is optional. - Brand recipe is required; `auto` resolves to a concrete maintained recipe. - Palette recipe is required; `auto` resolves to a contrast-verified semantic palette. - A skin is tokens, not design judgment. - Never fetch a brand `DESIGN.md` and treat its palette as a complete rule set. - Never scaffold an unscored first page or claim visual verification without a screenshot.