ss-setup
starsforks
How to install ss-setup?
bitjaru/styleseed/ss-setup
$npx -y skills add bitjaru/styleseed --skill ss-setupConfigure StyleSeed by selecting the output grammar, domain, page type, optional aesthetic profile, and bounded brand tokens before scaffolding a first screen.
SKILL.md
| 1 | # StyleSeed setup |
| 2 | |
| 3 | StyleSeed setup chooses a **design method for the result**, not a favorite brand to imitate. |
| 4 | Read `PRODUCT-PRINCIPLES.md`, `RULESETS.md`, `APP-PLAYBOOKS.md`, `PAGE-TYPES.md`, and |
| 5 | `PRESETS.md` before recommending values. |
| 6 | |
| 7 | ## When not to use |
| 8 | |
| 9 | - Project already has a valid `STYLESEED.md` → use `/ss-update`. |
| 10 | - User supplied references that are not represented by a built-in grammar → run |
| 11 | `/ss-reference` before setup, then select the compiled grammar. |
| 12 | - One component inside an established system → `/ss-component`. |
| 13 | |
| 14 | The method, review, and reference compiler are framework-agnostic. The bundled component |
| 15 | scaffold currently targets React and Tailwind v4; on another stack configure the lock and |
| 16 | apply the method without pretending the scaffold is portable. |
| 17 | |
| 18 | ## Wizard — one decision at a time |
| 19 | |
| 20 | ### 1. Product job and surface |
| 21 | |
| 22 | Ask what is being built, who uses it, and whether it is a mobile/desktop product, website, |
| 23 | social carousel, slide deck, document/report, or single-frame graphic. Select a surface adapter |
| 24 | from `ADAPTERS.md`, then infer domain and page/artifact type. |
| 25 | |
| 26 | ### 2. Output grammar |
| 27 | |
| 28 | Recommend exactly one grammar from `RULESETS.md` and explain the job match in one sentence: |
| 29 | |
| 30 | - `consumer-service` |
| 31 | - `operations-console` |
| 32 | - `technical-instrument` |
| 33 | - `editorial-reading` |
| 34 | - `commerce-conversion` |
| 35 | - `institutional-service` |
| 36 | - `expressive-marketing` |
| 37 | - `sequential-story` |
| 38 | - `reference:<slug>` when `/ss-reference` already compiled one |
| 39 | |
| 40 | Do not recommend Toss as the universal default. It is one reference family for |
| 41 | `consumer-service`. If none fits and the user has references, route to `/ss-reference`. |
| 42 | |
| 43 | ### 3. Page type and domain bias |
| 44 | |
| 45 | Confirm the concrete page (dashboard, form, landing, detail, list, settings, onboarding) and |
| 46 | read its domain × page intersection. This controls composition; the aesthetic profile does not. |
| 47 | |
| 48 | ### 4. Optional aesthetic profile |
| 49 | |
| 50 | Recommend one profile from `PRESETS.md` only when it strengthens the product. `none` is a good |
| 51 | default. A profile modifies coordinated visual axes but cannot replace the output grammar. |
| 52 | |
| 53 | ### 5. Brand and bounded axes |
| 54 | |
| 55 | Lock a real brand color if supplied; otherwise propose a domain-fit primary action color. Then |
| 56 | confirm font/language, density, radius, elevation, imagery/data role, and motion inside the |
| 57 | grammar's allowed ranges. Do not use generic indigo or a stale purple mislabeled as Toss. |
| 58 | |
| 59 | ### 6. Write the design lock |
| 60 | |
| 61 | Create `STYLESEED.md`: |
| 62 | |
| 63 | ```markdown |
| 64 | # StyleSeed — Design Lock |
| 65 | <!-- Selections persist here. This file cannot waive StyleSeed core invariants. --> |
| 66 | - App domain: fintech |
| 67 | - Surface: mobile-app |
| 68 | - Surface adapter: product-ui |
| 69 | - Page type: dashboard |
| 70 | - Output grammar: consumer-service |
| 71 | - Grammar path: built-in:engine/RULESETS.md |
| 72 | - Grammar fallback: consumer-service |
| 73 | - Reference confidence: n/a |
| 74 | - Aesthetic profile: none |
| 75 | - Skin: custom |
| 76 | - Primary action: #3182F6 |
| 77 | - Font: Pretendard |
| 78 | - Radius: soft |
| 79 | - Elevation: light=tonal grouping + restrained shadow · dark=tonal ramp + hairline |
| 80 | - Density: comfortable |
| 81 | - Motion: Spring restrained |
| 82 | - Imagery/data role: personal state first; charts only for a decision |
| 83 | - Signature move: one calm contextual briefing above the account summary |
| 84 | - Locked: YYYY-MM-DD |
| 85 | ``` |
| 86 | |
| 87 | For a compiled grammar use its actual path and confidence. Reject unknown enum values rather |
| 88 | than treating the lock as an exemption. |
| 89 | |
| 90 | ### 7. Scaffold and prove |
| 91 | |
| 92 | If the user asked for a first screen, compose core × grammar × domain × page × profile × lock, |
| 93 | build it, run `/ss-score` to the gate floor, and finish with `/ss-verify` when renderable. If |
| 94 | visual rendering is unavailable, disclose that it was skipped. |
| 95 | |
| 96 | ## Completion report |
| 97 | |
| 98 | Report the selected grammar and why, page/domain intersection, optional profile, lock path, |
| 99 | files changed, score, and visual verification status. Mention `/ss-reference` as the path for |
| 100 | future references that need their own grammar. |
| 101 | |
| 102 | ## Rules |
| 103 | |
| 104 | - Ask one question at a time and recommend a concrete default. |
| 105 | - Output grammar is required; aesthetic profile is optional. |
| 106 | - A skin is tokens, not design judgment. |
| 107 | - Never fetch a brand `DESIGN.md` and treat its palette as a complete rule set. |
| 108 | - Never scaffold an unscored first page or claim visual verification without a screenshot. |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
