How do I install the Ss Reference skill?

Run npx skillmds@latest add bitjaru/ss-reference in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Ss Reference safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Ss Reference?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Ss Reference free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Ss Reference?

bitjaru (@bitjaru) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Ss Reference by bitjaru — Agent Skill

Name: Ss Reference
Rating: 4.5 (4 reviews)
Author: bitjaru

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.

bitjaru Updated Sep 9, 2026

File contents

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.

---name: ss-referencedescription: 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.--- # 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.

Frequently asked questions