ss-a11y
Audit a component or page for accessibility issues and fix them
Turn a product brief and optional references into three distinct creative directions, a human-selected StyleSeed interaction plan, generated image/video asset jobs, a working UI prototype, and a verified prototype-first showcase reel. Use for client concepts, app interaction
$ npx -y skills add bitjaru/styleseed --skill ss-studio --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/ss-studioContext preview
The summary Claude sees to decide when to auto-load this skill.
Turn a product brief and optional references into three distinct creative directions, a human-selected StyleSeed interaction plan, generated image/video asset jobs, a working UI prototype, and a verified prototype-first showcase reel. Use for client concepts, app interaction
name: ss-studio description: Turn a brief into three creative directions, a human-selected interaction plan, prototype, and showcase reel. Use when a request needs more than one static screen — client concepts or interaction exploration.
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.
Run the full Studio pipeline. Do not reduce it to a moodboard, a static image, or a set of arbitrary motion effects.
Read `STUDIO-PIPELINE.md`, `PRODUCT-PRINCIPLES.md`, and the resolved project rules first. If the project has no valid `STYLESEED.md`, run setup and resolve before Studio.
Initialize a durable run:
node <skill-dir>/scripts/studio-run.mjs init \ --project-root . \ --artifact <artifact-id> \ --name "<project or concept>" \ --brief "<product job and desired interaction>" \ --surface mobile-app \ --platform web
The command prints the run directory under `.styleseed/studio/`. Use the artifact schemas in `references/artifact-contract.md`. Use `references/provider-adapters.md` only when media generation or recording is required.
If the project uses the artifact registry, `--artifact` is required and the run binds the current artifact manifest and method hash at init time.
Classify supplied and discovered references as `structure`, `navigation`, `signature`, `motion`, or `asset-language`. Capture source URL/path, date, visible observation, transferable principle, confidence, and rights note. Never claim visual evidence for a reference that was not actually seen.
Do not ask the user to collect a generic moodboard. Find only the missing roles. Keep product UI, marketing presentation, and generated media separate unless the brief explicitly connects them.
Write exactly three entries in `directions.json`: `native`, `signature`, and `experimental`. Keep the product job and content fixed; vary at least two structural axes. Every direction must include:
Advance only after the directions validate:
node <skill-dir>/scripts/studio-run.mjs advance --project-root . --run <id> --stage directed
Show the three directions together. Record the user's selection and rationale. Do not average them or quietly choose the easiest one.
node <skill-dir>/scripts/studio-run.mjs select \ --project-root . --run <id> --direction <direction-id> \ --by "<reviewer>" --rationale "<decision>"
Write `scenes.json`, `assets.json`, and `video.json` from the selected direction.
reduced-motion behavior, and renderer targets.
consuming scene.
them to fake an interaction that does not work.
Map capability to an available provider only at execution time. If the needed provider is absent, leave the job `blocked` and report the exact missing capability.
Record provider execution without hand-editing the run:
node <skill-dir>/scripts/studio-run.mjs media \ --project-root . --run <id> --job <job-id> --status complete \ --provider <tool/model> --output <project-relative-path> \ --provenance "<model · date · source inputs>"
Generate raster assets only for imagery, texture, illustration, footage, or product material. Keep UI geometry, icons, and final copy code-native and accessible. Copy final generated files into the run directory and preserve prompts and provenance.
Build the selected direction as a working prototype. Implement its primary navigation, signature scene, cancel/back behavior, and reduced-motion fallback. Record the actual prototype after it passes the code and pixel gates. Optional generated footage may be composited as labeled media.
Store prototype and recording paths through the CLI, then advance to `built`:
node <skill-dir>/scripts/studio-run.mjs output \ --project-root . --run <id> --prototype <route-or-path> node <skill-dir>/scripts/studio-run.mjs advance \ --project-root . --run <id> --stage built node <skill-dir>/scripts/studio-run.mjs output \ --project-root . --run <id> --recording <project-relative-path>
Run StyleSeed score and visual verification, then derive Studio verification from the evidence gate. The Studio evidence command stores only the computed verifier summary, and `advance --stage verified` reruns verification instead of trusting an earlier stored pass.
node <skill-dir>/scripts/studio-run.mjs evidence \ --project-root . --run <id> --evidence-run <gate-run-id>
node <skill-dir>/scripts/studio-run.mjs advance --project-root . --run <id> --stage verified node <skill-dir>/scripts/studio-run.mjs status --project-root . --run <id>
`fail` and `blocked` remain useful progress states:
node <skill-dir>/scripts/studio-run.mjs gate \ --project-root . --run <id> --gate temporal --status blocked \ --note "recording still missing"
Do not use `gate --status pass`. Only the evidence verifie
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