design-frontend — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited design-frontend (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.
Degree of freedom: MIXED. Visual composition [HIGH freedom]; design-system discovery [LOW freedom — run exactly].
Discover design systems, respect existing patterns, create beautiful interfaces.
| Skill | Owns |
|---|---|
| design-frontend (this) | New production-grade UI from scratch, not a polish pass |
enhance-web-redesign | Upgrading an existing site or app to premium quality |
enhance-web-ui | Polishing one existing page: hierarchy, spacing, type, visual personality |
enhance-web-landing | Landing pages, portfolios, and marketing sites with a point of view |
components/ui, forbidden patternsDiscover:components/ui/button.tsx+globals.csstokens;text-xsmin;rounded-sm. Reuse: settings rows use existingButton/Input; no new primitive. Compose: new/settingspage — token spacing,text-smbody, 44px save. Check: Anti-Generic list clear (no Inter, purple-on-white, or pill buttons);prefers-reduced-motionon any spinner.
components/uitext-xs; tap targets ≥44pxenhance-web-ui; landing → enhance-web-landing; redesign existing → enhance-web-redesignBefore writing ANY frontend code:
Glob: **/*design-system*.{md,ts,css}
Glob: **/tokens*.{ts,json}
Glob: **/components/ui/**
Glob: **/_*README*| Category | Find | Examples |
|---|---|---|
| Typography | Sizes, weights | text-xs, font-medium |
| Spacing | Padding, gaps | p-4, gap-2 |
| Colors | Palette, semantic | bg-emerald-50 |
| Borders | Radius, styles | rounded-sm |
| Animations | Durations | duration-200 |
grep -r "NEVER\|FORBIDDEN\|❌" docs/ README*"Design System Discovery:
├─ Found: [design system path]
├─ Typography min: [e.g., text-xs]
├─ Radius standard: [e.g., rounded-sm]
├─ Forbidden: [list patterns]
└─ Reusing: [existing components]"| Context | Minimum | Usage |
|---|---|---|
| Body | text-sm (14px) | Primary content |
| Captions | text-xs (12px) | Labels, hints |
| Compact | text-[10px] | Dense dashboards only |
Never use text-[8px] or text-[9px] for readable content.
| Check | Requirement |
|---|---|
| Touch targets | ≥44×44px |
| Contrast | 4.5:1 text, 3:1 UI |
| Keyboard | tabIndex, focus styles |
| Motion | prefers-reduced-motion |
Typography: text-xs=12px, text-sm=14px, text-base=16px
Spacing: 1=4px, 2=8px, 3=12px, 4=16px, 6=24px, 8=32px[ ] Uses design system tokens (no hardcoded values)
[ ] Extends existing components (no duplicates)
[ ] Typography ≥ text-xs for readable content
[ ] Touch targets ≥ 44px
[ ] Focus states visible
[ ] prefers-reduced-motion respected| Issue | Fix |
|---|---|
| Tiny text | text-[9px] → text-xs |
| Bold weights | font-bold → font-medium |
| Large radius | rounded-lg → rounded-sm |
| Spin animation | animate-spin → animate-pulse |
Undirected drafts land on the same few defaults; the check is concrete only when they are named:
Extend this list with whatever the first draft used instead.
Remember: The codebase's design system is the source of truth. Search before creating. Reuse before reinventing.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.