skills.rest
rmethodm
rmethodmCOMMUNITY
Explore all skills by this author →
GitHub

ss-reference

Compile design references into a project-local StyleSeed grammar with evidence and validation.

Updated May 26, 2026
Search Tags:#validation#design system#design tokens#screenshot analysis#styleseed#ui grammar#reference compiler
One-click install
npx skills add https://github.com/rmethodm/resumegen --skill ss-reference-rmethodm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ss-reference
Source: https://github.com/rmethodm/resumegen/tree/main/.agents/skills/ss-reference
Command: npx skills add https://github.com/rmethodm/resumegen --skill ss-reference-rmethodm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Translating screenshots, URLs, Figma exports, or an existing UI into a consistent, reusable design grammar is slow and subjective. This Skill turns supplied design references into a structured StyleSeed ruleset with evidence citations, confidence levels, and a validated transfer screen. ## Core Features & Use Cases - Reference Ingestion: Assigns evidence IDs to every screenshot, URL, or Figma export and separates references by surface adapter and job. - Grammar Compilation: Measures twelve design axes, resolves contradictions, and writes project artifacts under .styleseed/rulesets/<slug>/ with a chosen fallback grammar. - Validation Loop: Applies the grammar to an unseen screen, runs /ss-score and /ss-verify, and iterates until the gate floor is met. - Use Case: A designer shares three screenshots of a competitor dashboard. The Skill compiles a reference:acme-dashboard grammar, updates STYLESEED.md, and validates the style on a new settings page. ## Quick Start Compile the attached dashboard screenshots into a StyleSeed grammar named acme-dashboard and validate it on a new screen.

Frequently Asked Questions about ss-reference

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn design screenshots into a reusable style grammar?▼

Supply the screenshots or URLs to the ss-reference skill, which assigns evidence IDs, measures twelve design axes, and compiles a ruleset under .styleseed/rulesets/<slug>/. It then validates the grammar on an unseen screen using /ss-score and /ss-verify.

What inputs does the StyleSeed reference compiler accept?▼

It accepts screenshots, renderable URLs, Figma exports, and existing UIs as design references. Each input receives an evidence ID, and images that cannot be visually inspected are excluded from visual analysis claims.

Can I compile a grammar from only one design reference?▼

Yes, but a single reference produces a provisional grammar with low confidence where warranted. The skill explicitly flags this and keeps confidence levels honest rather than overstating certainty.

Does the compiled grammar modify the built-in StyleSeed rulesets?▼

No. The generated grammar is project-local and stored under .styleseed/rulesets/<slug>/. The skill never edits RULESETS.md or publishes the grammar as a built-in; it only updates STYLESEED.md to select reference:<slug>.

What happens when design references contradict each other?▼

The compiler resolves contradictions instead of averaging them and briefly explains each material choice. References are also separated by surface adapter and job so unrelated surfaces are not merged unintentionally.

Related Skills

Explore More Design & Creative Skills→
tuyoogametuyoogame
124

Figma

Query Figma design files to extract structure, components, and styles.

Official
Intermediate
AnandaAnugrahHandyantoAnandaAnugrahHandyanto

guidance

Generate LLM outputs constrained by regex and grammar rules with Guidance.

Community
Advanced
pnewsampnewsam
1

compliance-accessibility

Review web interfaces against WCAG 2.2 accessibility requirements.

Community
Intermediate
AvihusittonAvihusitton

ui-setup

Guide StyleSeed UI setup through step-by-step design decisions and scaffold generation.

Community
Intermediate