ss-a11y
Audit a component or page for accessibility issues and fix them
Configure StyleSeed by selecting the output grammar, domain, page type, brand recipe, semantic palette recipe, optional aesthetic profile, and bounded brand tokens before scaffolding a first screen.
$ npx -y skills add bitjaru/styleseed --skill ss-setup --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/ss-setupContext preview
The summary Claude sees to decide when to auto-load this skill.
Configure StyleSeed by selecting the output grammar, domain, page type, brand recipe, semantic palette recipe, optional aesthetic profile, and bounded brand tokens before scaffolding a first screen.
name: ss-setup description: Configure StyleSeed by selecting the output grammar, domain, page type, brand recipe, semantic palette recipe, optional aesthetic profile, and bounded brand tokens before scaffolding a first screen. argument-hint: "(no arguments needed)" allowed-tools: Read, Write, Edit, Grep, Glob, Bash, WebFetch
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.
`/ss-reference` before setup, then select the compiled grammar.
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.
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.
Recommend exactly one grammar from `RULESETS.md` and explain the job match in one sentence:
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`.
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.
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.
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.
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.
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.
Create `STYLESEED.md`:
# StyleSeed — Design Lock <!-- Selections persist here. This file cannot waive StyleSeed core invariants. --> - 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.
Compile the selected method before code:
node <installed-ss-resolve>/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.
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.
Open-source design-method engine for Claude Code, Codex & Cursor. 23 agent skills for fixed design judgment, multiple grammars, semantic palettes, reference compilation, and evidence-verified UI. MIT.
Repo: bitjaru/styleseed
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
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,…
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