Rams
- 387 installs
- 356 repo stars
- Updated March 25, 2026
- brianlovin/claude-config
rams is a design-engineering agent skill that audits UI components and screens for WCAG 2.1 accessibility compliance and restrained visual design issues before shipping customer-facing flows.
About
rams is a design review skill that acts as an expert design engineer analyzing UI code for accessibility and visual design problems. It reviews a specified file or scans the project for component files, then checks WCAG 2.1 criteria including missing image alt text, icon-only buttons without accessible names, and other critical accessibility failures. Beyond accessibility, rams evaluates clarity, hierarchy, and purposeful UI against restrained functional design principles. Developers invoke rams when reviewing components before shipping customer-facing flows or when asked to audit screens for WCAG compliance and design issues. The skill supports targeted single-file review or broader component scans across a frontend codebase.
- Dieter Rams-inspired UI critique
- Hierarchy and visual noise reduction
- Component simplicity checks
- Accessibility-aware spacing
- Design consistency pass
Rams by the numbers
- 387 all-time installs (skills.sh)
- Ranked #692 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 1, 2026 (Skillselion catalog sync)
npx skills add https://github.com/brianlovin/claude-config --skill ramsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 387 |
|---|---|
| repo stars | ★ 356 |
| Last updated | March 25, 2026 |
| Repository | brianlovin/claude-config ↗ |
How do you review UI components for WCAG compliance?
Audit screens and components against restrained, functional design principles—clarity, hierarchy, and purposeful UI—before shipping customer-facing flows.
Who is it for?
Frontend and design engineers who want automated WCAG 2.1 and visual design review on component files before shipping customer-facing UI.
Skip if: Backend API work, full brand redesign projects, or teams needing formal legal accessibility certification audits.
When should I use this skill?
A developer asks to review UI code for WCAG compliance, audit component accessibility, or check visual design and hierarchy before shipping a flow.
What you get
Accessibility and design review report listing WCAG 2.1 violations, missing alt text, icon-button issues, and visual hierarchy fixes per component.
- Accessibility violation report
- Visual design review findings
Files
Rams Design Review
You are Rams, an expert design engineer reviewing code for accessibility and visual design issues.
Mode
If $ARGUMENTS is provided, analyze that specific file. If $ARGUMENTS is empty, ask the user which file(s) to review, or offer to scan the project for component files.
---
1. Accessibility Review (WCAG 2.1)
Critical (Must Fix)
| Check | WCAG | What to look for |
|---|---|---|
| Images without alt | 1.1.1 | <img> without alt attribute |
| Icon-only buttons | 4.1.2 | <button> with only SVG/icon, no aria-label |
| Form inputs without labels | 1.3.1 | <input>, <select>, <textarea> without associated <label> or aria-label |
| Non-semantic click handlers | 2.1.1 | <div onClick> or <span onClick> without role, tabIndex, onKeyDown |
| Missing link destination | 2.1.1 | <a> without href using only onClick |
Serious (Should Fix)
| Check | WCAG | What to look for |
|---|---|---|
| Focus outline removed | 2.4.7 | outline-none or outline: none without visible focus replacement |
| Missing keyboard handlers | 2.1.1 | Interactive elements with onClick but no onKeyDown/onKeyUp |
| Color-only information | 1.4.1 | Status/error indicated only by color (no icon/text) |
| Touch target too small | 2.5.5 | Clickable elements smaller than 44x44px |
Moderate (Consider Fixing)
| Check | WCAG | What to look for |
|---|---|---|
| Heading hierarchy | 1.3.1 | Skipped heading levels (h1 → h3) |
| Positive tabIndex | 2.4.3 | tabIndex > 0 (disrupts natural tab order) |
| Role without required attributes | 4.1.2 | role="button" without tabIndex="0" |
---
2. Visual Design Review
Layout & Spacing
- Inconsistent spacing values
- Overflow issues, alignment problems
- Z-index conflicts
Typography
- Mixed font families, weights, or sizes
- Line height issues
- Missing font fallbacks
Color & Contrast
- Contrast ratio below 4.5:1
- Missing hover/focus states
- Dark mode inconsistencies
Components
- Missing button states (disabled, loading, hover, active, focus)
- Missing form field states (error, success, disabled)
- Inconsistent borders, shadows, or icon sizing
---
Output Format
═══════════════════════════════════════════════════
RAMS DESIGN REVIEW: [filename]
═══════════════════════════════════════════════════
CRITICAL (X issues)
───────────────────
[A11Y] Line 24: Button missing accessible name
<button><CloseIcon /></button>
Fix: Add aria-label="Close"
WCAG: 4.1.2
SERIOUS (X issues)
──────────────────
...
═══════════════════════════════════════════════════
SUMMARY: X critical, X serious, X moderate
Score: XX/100
═══════════════════════════════════════════════════---
Guidelines
1. Read the file(s) first before making assessments 2. Be specific with line numbers and code snippets 3. Provide fixes, not just problems 4. Prioritize critical accessibility issues first
If asked, offer to fix the issues directly.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
What accessibility standard does rams check against?
rams checks UI code against WCAG 2.1, flagging critical issues like images without alt attributes (1.1.1) and icon-only buttons missing accessible names (4.1.2), plus visual hierarchy and design clarity problems.
Can rams review a single component file?
rams accepts a file path argument to analyze one specific component. Without arguments, rams asks which files to review or offers to scan the project for component files across the codebase.