interface-grader — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited interface-grader (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Grade any frontend interface with a two-layer system: goal alignment first, then craft quality through that lens. Binary pass/fail per criterion, with evidence required for every failure.
1. LAYER 1: Establish Context
├── Read the site (content, meta, about page, IA)
├── Form assumptions about goal, audience, trade-offs
├── Confirm with user via AskUserQuestion
├── Build Page Map (unique page types + goals)
└── Grade 6 goal-alignment criteria
2. LAYER 2: Grade Craft (Code Pass)
├── Site-wide: typography, color, motion, responsiveness
├── Per-page: composition, copy, imagery, motion, content-type
├── Mark V-only criteria as ⊘ DEFERRED
└── Produce score card
3. LAYER 2: Grade Craft (Visual Pass — after code fixes)
├── Screenshots: desktop 1440px + mobile 375px per page type
├── Grade V criteria, confirm/override C+V verdicts
└── Produce final score card + delta
4. OUTPUT → grades/grade-NNN.md + grades/grade-latest.mdBefore grading craft, establish what the site is trying to do.
Read the site and form assumptions from: site copy, meta/OG tags, about page, information architecture, similar site patterns, visual tone. Then confirm with user via AskUserQuestion.
Site: [name]
Type: [Marketing | App | Personal | Hybrid]
Primary goal: [one sentence]
Value delivery: [how visitor gets value]
Audience: [who visits, what they expect]
First-visit promise: [clear in 5 seconds]
Intentional trade-offs:
- [rule broken on purpose + reason]If user unavailable, mark [UNCONFIRMED CONTEXT].
Identify unique page types. Two blog posts = one type. Blog index vs single post = two types.
# Page Type URL Example Page Goal
1 [name] [url] [one sentence]| # | Criterion |
|---|---|
| G.1 | Visitor understands purpose within 5 seconds |
| G.2 | Primary action obvious on every page type |
| G.3 | Information hierarchy serves primary goal |
| G.4 | Navigation consistent across all pages |
| G.5 | Each page type has distinct, non-overlapping purpose |
| G.6 | Site delivers on its first-visit promise |
C = code only. V = visual only (⊘ DEFERRED in code pass). C+V = code preliminary, visual confirms or overrides.
When Layer 2 conflicts with confirmed Layer 1 goals, mark ✓* with justification. Example: content-first blog → brand loudness becomes ✓* because content should dominate. Unjustified exceptions remain FAIL.
Complete criteria tables with verification methods:
references/site-wide-criteria.mdreferences/per-page-criteria.mdreferences/output-format.md[SELF-GRADED]grades/grade-latest.md[VISUAL OVERRIDE: was X, now Y]Use available tools: Playwright MCP (browser_take_screenshot), Claude in Chrome, CLI (npx playwright screenshot), or ask user. Minimum: desktop 1440px + mobile 375px viewport + full-page per page type.
If no tools available, note [NO VISUAL TOOLS] and defer V criteria.
Dispatch parallel subagents per page type for per-page grading. Each receives the Site Context Card and its page's goal. Grade site-wide criteria in main context.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.