Audit UI code for design system compliance and AI slop markers. Triggers on: "review design system", "check design compliance", "audit UI code", "design system review", "check for AI slop", "design review", or /design-systems:review. Scans CSS, SCSS, JSX, TSX, Vue, and Svelte files against DESIGN.md rules and the AI Slop Instant Giveaways checklist.
From design-systemsnpx claudepluginhub aaronbassett/agent-foundry --plugin design-systemsThis skill uses the workspace's default tool permissions.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Calculates TAM/SAM/SOM using top-down, bottom-up, and value theory methodologies for market sizing, revenue estimation, and startup validation.
Scan the project's UI code and produce a compliance report covering design system adherence and AI slop detection.
Find DESIGN.md using this search order:
src/, packages/*//design-systems:create first."Optional argument: path to specific files or directory to review. Default: scan all UI code in the project.
Extract from DESIGN.md:
| Source | What to Extract | Use |
|---|---|---|
| Palette (Section 2) | All hex values with token names | Detect hardcoded colors outside the set |
| Type Scale (Section 3) | Font families, weights | Detect unauthorized fonts/weights |
| Spacing Scale (Section 4) | All spacing values | Detect off-scale spacing |
| Shadow Definitions (Section 5) | Exact CSS shadow values | Detect non-token shadows |
| Components (Section 6) | Border-radius values | Detect non-token radii |
| Core Prohibitions (Section 1) | Each prohibition as a rule | Custom check per prohibition |
Target file types: *.css, *.scss, *.jsx, *.tsx, *.vue, *.svelte
Exclude patterns:
node_modules/**dist/**, build/**, .next/**, out/**vendor/***.min.css, *.min.jsUse Glob to find files: **/*.{css,scss,jsx,tsx,vue,svelte}
If the user provided a specific path, scope to that path only.
For each DESIGN.md section, scan the codebase:
Colors (Section 2):
#[0-9a-fA-F]{3,8}rgb(, rgba(, hsl(, hsla( color declarationsTypography (Section 3):
font-family declarations in CSS/SCSSfontFamily in JSX/TSX (inline styles, styled-components)font-weight values and check against allowed weightsSpacing (Section 4):
margin, padding, gap with explicit values (not auto or 0)Shadows (Section 5):
box-shadow declarations0 4px 6px rgba(0,0,0,0.1)) which is CRITICALRadius (Section 6):
border-radius valuesCore Prohibitions (Section 1):
border.*1px solid or border-width: 1pxtext-align: center in body contexts#000000 or #000 exact matchesIndependent of DESIGN.md, check for Instant Giveaways. Read the full
checklist from ${CLAUDE_PLUGIN_ROOT}/skills/create/references/anti-slop.md.
Key patterns to grep for:
| Pattern | Grep Target | Severity |
|---|---|---|
| Purple/indigo gradients | #667eea, #764ba2, bg-indigo, from-indigo, to-purple | WARNING |
| Banned default fonts | font-family.*Inter[^-], font-family.*Roboto, font-family.*"Open Sans", font-family.*Lato, font-family.*Arial | WARNING |
| Gradient text | -webkit-background-clip: text, background-clip: text | WARNING |
| Generic shadow | box-shadow.*0.*4px.*6px.*rgba\(0.*0.*0.*0\.1\) | WARNING |
| Glassmorphism combo | backdrop-filter.*blur near rgba background near rgba border | WARNING |
| Generic card shadow combo | border-radius.*8px or border-radius.*12px near box-shadow.*rgba\(0.*0.*0.*0\.1\) | WARNING |
| Left border accent | border-left.*4px solid var\(-- | WARNING |
Note: "Three-column icon grid" and "nested cards" are structural patterns that can't be reliably grep-detected. Use judgment when reading JSX/TSX components — flag if you notice these patterns during the scan.
Output this report format to the terminal:
## Design System Review: [Project/Directory Name]
### Summary
- Compliance: X/7 sections passing
- Violations: N found (C critical, M moderate, I minor)
- AI Slop Markers: N detected
### Section Results
#### Colors [PASS/FAIL]
[List violations or "No violations found."]
#### Typography [PASS/FAIL]
[List violations or "No violations found."]
#### Spacing [PASS/FAIL]
[List violations or "No violations found."]
#### Shadows [PASS/FAIL]
[List violations or "No violations found."]
#### Radius [PASS/FAIL]
[List violations or "No violations found."]
#### Components [PASS/FAIL]
[List violations or "No violations found."]
#### Prohibitions [PASS/FAIL]
[List violations or "No violations found."]
### AI Slop Detection
[List warnings or "No AI slop markers detected."]
### Prohibition Violations
[List critical violations or "All Core Prohibitions respected."]
### Drift Analysis
[If multiple violations cluster in one area, note the pattern.
Example: "Shadow values are the main area of non-compliance —
6 of 8 violations are shadow-related. Consider updating shadow
tokens or refactoring these components."]
Violation format:
- [SEVERITY] path/to/file.ext:LINE — Description of violation
Severity levels:
A section PASSES if it has zero CRITICAL and zero MODERATE violations. MINOR violations alone do not cause a section to fail.
This is the review/audit skill of the design-systems plugin. It checks code against DESIGN.md AND the AI slop reference. The anti-slop reference is at ${CLAUDE_PLUGIN_ROOT}/skills/create/references/anti-slop.md.