What is ss-reference?

A compiler that turns screenshots, web pages, Figma exports, or existing interfaces into a project-local StyleSeed design grammar. The result records design rules, tokens, evidence, confidence, anti-patterns, and a validation screen.

Analysing interface references, measuring design choices, resolving differences between references, and producing rules that other StyleSeed tools can use.

It gives a project a documented design language based on supplied references instead of relying on loose visual imitation or memory.

ss-reference — Skill by bitjaru

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add skills/bitjaru/styleseed/ss-reference

Any agent

npx skills add bitjaru/styleseed --skill ss-reference

Clone the repo

git clone --depth 1 https://github.com/bitjaru/styleseed

Made for: Claude Code, Codex.

Per session 56 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 585 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.00056	$0.00585
Opus 5	$0.00028	$0.00293
Sonnet 5	$0.00011	$0.00117
Haiku 4.5	$0.00006	$0.00059

Measured 2d ago against content hash 1575bbb98c05, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

ss-reference scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

engine/.claude/skills/ss-reference/SKILL.md · 40 lines

How it starts

The opening of the file, as written. The whole thing — 40 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Compile references into a design grammar

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.

Do not merely imitate the supplied screen. Read PRODUCT-PRINCIPLES.md, RULESETS.md, ADAPTERS.md, and REFERENCE-COMPILER.md, then execute the compiler pipeline in full.

Workflow

Ingest every supplied reference and assign evidence IDs (R1, R2, ...). If a URL can be rendered, capture it. If an image cannot be seen, stop claiming visual analysis for it.
Separate references by surface adapter and job. Do not merge a marketing homepage with an app dashboard unless the user explicitly wants both languages connected.
Observe and measure the twelve axes. Every rule cites evidence IDs and a confidence level.
Resolve contradictions instead of averaging them. Explain any material choice briefly.
Choose the nearest built-in fallback grammar and adapter, then compile the project artifacts required by REFERENCE-COMPILER.md under .styleseed/rulesets/<slug>/.
Update STYLESEED.md to select reference:<slug> while preserving bounded brand choices.
Validate transfer: apply the grammar to one representative screen not present in the source set, run /ss-score, then /ss-verify if renderable. Fix and repeat to the gate floor.
Report what was learned, what remains low-confidence, where the artifacts live, and the validation result.

Rules

Visible evidence before adjectives. “Calm” is not a rule; the spacing, type, color, hierarchy, and motion decisions that create calm are rules.
Never copy protected assets, brand marks, or prose.
One reference produces a provisional grammar. Say so and keep confidence low where warranted.
The generated grammar is project-local. Do not edit RULESETS.md or publish it as built-in.
Core invariants and accessibility remain non-negotiable.

Read the full file on GitHub · 40 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2d ago First seen · 40 lines · 56 tokens per session scan A 1575bbb98c05

Subscribe to this mod's changes

ss-reference is a skill published in the GitHub repository bitjaru/styleseed (928 stars, last pushed 7d ago), licensed MIT. It adds 56 tokens to every session and 585 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Data and AI Frontend ReAct ai-coding claude-code design-system design-tokens shadcn-ui

morphous-catalog

Create or refresh Morphous website design-system/theme bundles from animal, insect, plant, landscape, mineral, weather, or other nature motifs. Use when Codex is asked to generate Morphous motif images, light/dark design-system boards, reusable image prompts, generated web assets, shadcn/tweakcn theme exports, or the…

Ameyanagi/morphos · 79 tokens

material-ui-review

Review the current diff for regressions, correctness bugs, tests, simplifications, and docs issues, scaling depth to a low/medium/high/xhigh/max effort level. Use ONLY when explicitly requested by name: the user runs /material-ui-review, writes $material-ui-review, or asks for "the Material UI review skill". Do NOT…

mui/material-ui · 137 tokens

material-ui-tailwind

Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges.

mui/material-ui · 67 tokens

port-sacred-terminal-ui-to-react-using-same-conventions

Take a CLI screen written for Simulacrum — the sacred CLI framework (scripts/cli/templates/.ts or scripts/python/templates/.py) — and produce a React component that lives inside components/examples/ (or components/) using only sacred's existing primitives — Window, Card, SimpleTable, ActionButton, RowSpaceBetween…

internet-development/www-sacred · 0 tokens

port-sacred-terminal-ui-to-typescript-cli

Take a React Window.tsx (or any sacred component) and produce a terminal CLI screen written in TypeScript that uses Simulacrum — the sacred CLI framework in scripts/cli/lib/.