ss-score

Scores visual UI implementations 0-100 against a composed StyleSeed rule set with category breakdowns.

Updated May 26, 2026
One-click install
npx skills add https://github.com/rmethodm/resumegen --skill ss-score-rmethodm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ss-score
Source: https://github.com/rmethodm/resumegen/tree/main/.agents/skills/ss-score
Command: npx skills add https://github.com/rmethodm/resumegen --skill ss-score-rmethodm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI code reviews often stop at pass/fail checks or vague prose feedback, leaving no measurable way to track design quality over time or decide what to fix first. This Skill turns a visual artifact's implementation into a single 0-100 score with a weighted category breakdown, evidence citations, and a prioritized fix list. ## Core Features & Use Cases - Weighted eight-category scoring: Grades color discipline, hierarchy and typography, layout and rhythm, cards and elevation, states and accessibility, motion and interaction, coherence, and distinctiveness against the effective StyleSeed rule set. - Evidence-based deductions: Cites exact line numbers for every deduction and names the resolved rule set (e.g., operations-console × SaaS × dashboard) before scoring. - Quality Gate mode: Loops score → fix → re-score (up to 3 iterations) until the UI reaches the ≥80 floor before being shown to the user. - Use Case: After generating a React dashboard, run the scorer to get a per-category breakdown like "States & a11y 11/18 — no empty/loading state (l.55)" plus a fix-first list ordered by score gain. ## Quick Start Score the file src/app/Dashboard.tsx against the project's effective StyleSeed rules and show the category breakdown with prioritized fixes.

Frequently Asked Questions about ss-score

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

FAQPage Schema
How do I score UI code quality against a design system?▼

Run the scorer on a file or directory; it reads the code, resolves the effective StyleSeed rule set, and deducts points across eight weighted categories like color discipline, typography, and accessibility. Output includes a 0-100 total, letter grade, and line-cited evidence.

What is the difference between ss-score, ss-lint, and ss-review?▼

ss-lint gives a quick pass/fail check before committing, ss-review produces a full prose audit with fixes, and ss-score produces a numeric 0-100 score with category breakdown and prioritized fixes. Use ss-score to track quality trends and decide what to fix first.

How does the quality gate mode work before showing UI?▼

Gate mode scores the generated UI, applies the fix-first list if the score is below 80, then re-scores, repeating up to three times. The UI is presented only once it reaches the 80 floor, with a one-line summary of what was fixed.

When should I not use design scoring on a file?▼

Skip scoring for logic or configuration files with no visual artifact, since the score is meaningless there. Also use ss-lint instead when you only need a fast pass/fail check rather than a full breakdown.

Does the scorer handle marketing pages differently from app dashboards?▼

Yes. Scroll-linked, parallax, 3D, and animated-gradient motion is forbidden on app and dashboard surfaces but allowed on marketing and landing pages under the Cinematic tier. The scorer judges page type first, then applies the matching motion rules.