Help us improve
Share bugs, ideas, or general feedback.
From design-systems
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.
npx claudepluginhub aaronbassett/agent-foundry --plugin design-systemsHow this skill is triggered — by the user, by Claude, or both
Slash command
/design-systems:reviewThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Scan the project's UI code and produce a compliance report covering
Generates design systems and tokens from CSS/Tailwind/styled-components codebases, audits UI consistency across 10 dimensions, detects AI-generated patterns. Use for new projects, redesigns, PR reviews.
Generates design systems from codebases by extracting tokens and creating previews, audits UI consistency across 10 dimensions, detects AI-generated slop, and reviews styling PRs.
Detects design systems in code, identifies token drifts with paired evidence blocks showing definitions vs conflicting usages. Use for auditing UI consistency.
Share bugs, ideas, or general feedback.
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.