ss-build
Build a screen with StyleSeed's composed design method — choose or compile an output grammar, apply a brand recipe plus domain/page/profile/lock constraints, then run the code and pixel gates before presenting.
git clone --depth 1 https://github.com/bitjaru/styleseed /tmp/ss-build && cp -r /tmp/ss-build/skills/ss-build ~/.claude/skills/ss-buildSKILL.md
# Build with the composed StyleSeed method ## Registry-first artifact boundary When `.styleseed/project.json` and `.styleseed/artifacts/index.json` exist, resolve the requested artifact ID first, then read only `.styleseed/bundles/<artifact-id>.md` and `.styleseed/manifests/<artifact-id>.json`. Never fall back to the global legacy bundle for a registry project. Legacy projects may use `.styleseed/effective-rules.md` only when no registry exists. The build method is the product. Score and screenshots are auxiliary evidence, not the source of design judgment. ## Step 1 — Establish the rule set before code If `STYLESEED.md` does not exist, run `/ss-setup` and write it before UI code. If the user supplied a visual reference that the selected built-in grammar does not capture, run `/ss-reference` first. Never reduce an unfamiliar reference to a palette swap. Then invoke `/ss-resolve` (Claude Code) or `$ss-resolve` (Codex), or run its bundled `scripts/resolve-context.mjs --project-root . --from-lock STYLESEED.md --agent <agent>`. Read `.styleseed/effective-rules.md` and preserve `.styleseed/manifest.json` as the provenance record. Do not load `llms-full.txt` after resolution succeeds. ## Step 2 — Compose, do not improvise The compiled bundle already composes the authority order: core invariants → selected grammar → surface adapter → domain/page → brand recipe → optional profile → bounded lock → craft baseline. Use the manifest selection and source hashes to detect drift. Open a full source document only when the bundle points to a genuine ambiguity; do not reassemble the handbook ad hoc. Before code, state the effective rule set in one line, for example: ```text operations-console × SaaS × dashboard × enterprise-workbench × swiss × locked brand tokens ``` Resolve conflicts by authority. A profile or lock cannot waive task fitness, coherence, or accessibility. ## Step 3 — Build with design judgment - Make the grammar's user job and primary decision visible in the first viewport. - Establish one focal point; avoid equal-weight template grids. - Use the grammar's composition, density, type, color, surface, imagery/data, action, state, responsive, and motion contracts. - Use the recipe's containment, geometry, control, collection, and navigation morphology. Set `data-styleseed-recipe="<id>"` on the artifact root when using bundled pattern components. - Use product-specific content and evidence. Never copy the StyleSeed demo or a reference screen. - Implement loading, empty, error, focus, reduced-motion, and responsive behavior where relevant. ## Step 4 — Code gate loop Run `/ss-score` on the actual implementation. The score must name the effective rule set and check both core invariants and grammar-specific tells. Fix the highest-gain failures and re-score, up to roughly three passes, until ≥80. If it cannot pass, report the real blocker. ## Step 5 — Pixel gate loop For every renderable artifact, invoke `/ss-verify`: use the adapter renderer, inspect every required viewport/frame/page and relevant state, fix perceptual failures, and re-render. If no renderer is available, say the visual gate was skipped; never imply it passed. ## Step 6 — Present with proof Report: - effective rule set and why it fits; - final code score; - visual verification status and viewport; - material fixes made by the gates; - `STYLESEED.md` and any compiled grammar path. ## Rules - Grammar before code; code gate after build; pixel gate last. - Output grammar is functional. Brand recipe is morphological. Aesthetic profile is optional. Neither substitutes for the grammar or permits a brand clone. - The primary action must remain identifiable; additional color is permitted only where the grammar gives it stable semantic or categorical meaning. - Re-read the lock and grammar on every UI change.
Audit a component or page for accessibility issues and fix them
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
Generate a new UI component following the StyleSeed design conventions
Generate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone
Add appropriate user feedback states (loading, success, error, empty) to a component or page
Design user flows and navigation structure following proven UX patterns
Quick automated lint — detects common design system violations in seconds
Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.