Skip to content
Development
Skill

/ss-reference

Compile screenshots, URLs, Figma exports, or an existing UI into a project-local StyleSeed output grammar with evidence, tokens, confidence, anti-patterns, and a validation screen. Use when the user supplies a design reference that StyleSeed does not already model.

From plugin
styleseed
95224 skills
Install
$ npx -y skills add bitjaru/styleseed --skill ss-reference --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/ss-reference

Context preview

The summary Claude sees to decide when to auto-load this skill.

Compile screenshots, URLs, Figma exports, or an existing UI into a project-local StyleSeed output grammar with evidence, tokens, confidence, anti-patterns, and a validation screen. Use when the user supplies a design reference that StyleSeed does not already model.

SKILL.md

ss-reference.SKILL.md
name: ss-reference
description: Compile screenshots, URLs, Figma exports, or an existing UI into a project-local output grammar. Use when the user supplies a design reference StyleSeed does not already model.
argument-hint: "[reference paths or URLs] [--name slug]"
allowed-tools: Read, Write, Edit, Grep, Glob, Bash, WebFetch

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

1. 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. 2. 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. 3. Observe and measure the twelve axes. Every rule cites evidence IDs and a confidence level. 4. Resolve contradictions instead of averaging them. Explain any material choice briefly. 5. Choose the nearest built-in fallback grammar and adapter, then compile the project artifacts required by `REFERENCE-COMPILER.md` under `.styleseed/rulesets/<slug>/`. 6. Update `STYLESEED.md` to select `reference:<slug>` while preserving bounded brand choices. 7. 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. 8. 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 more
Ships withstyleseed

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.

Get the whole plugin
Stats
956
Stars
87
Forks
Active
Maintenance
JavaScript
Language
MIT
License
3h ago
Last commit
5mo ago
Created

Repo: bitjaru/styleseed

Other skills on styleseed.