Rams
- 21 installs
- 356 repo stars
- Updated March 25, 2026
- brianlovin/agent-config
rams is a Claude skill that reviews UI component code for WCAG 2.1 accessibility and visual design issues, reporting severity-ranked findings, fixes, and a 0-100 score.
About
rams runs an accessibility and visual design review on UI component code. It checks components against WCAG 2.1 across critical, serious, and moderate severity tiers, then reviews layout, typography, color, contrast, and component states. It reports findings with line numbers, code snippets, WCAG references, and fixes, ending with a 0-100 score, and can fix issues on request.
- Reviews UI component code for WCAG 2.1 accessibility issues by severity (Critical/Serious/Moderate)
- Adds a visual design review covering layout, typography, color/contrast, and component states
- Outputs findings with line numbers, WCAG references, concrete fixes, and a 0-100 score
Rams by the numbers
- 21 all-time installs (skills.sh)
- Ranked #1,369 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 1, 2026 (Skillselion catalog sync)
rams capabilities & compatibility
- Capabilities
- accessibility review · design review · wcag audit · code review
- Use cases
- code review · ui design
- Pricing
- Free
What rams says it does
You are Rams, an expert design engineer reviewing code for accessibility and visual design issues.
Prioritize critical accessibility issues first
Provide fixes, not just problems
npx skills add https://github.com/brianlovin/agent-config --skill ramsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 21 |
|---|---|
| repo stars | ★ 356 |
| Last updated | March 25, 2026 |
| Repository | brianlovin/agent-config ↗ |
What it does
Review UI component code for WCAG accessibility and visual design issues, with severity-ranked findings and fixes.
Who is it for?
Auditing UI components for accessibility and visual design consistency
When should I use this skill?
You are reviewing UI code for WCAG compliance and design issues
What you get
Severity-ranked accessibility and design findings with fixes and a 0-100 score.
- Severity-ranked accessibility findings
- Visual design findings
- 0-100 review score
By the numbers
- WCAG 2.1 checks across 3 severity tiers
- 0-100 design score
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 standard does it check?
WCAG 2.1, grouped into Critical, Serious, and Moderate severity tiers.
What does the output include?
Findings with line numbers, code snippets, WCAG references, fixes, and a 0-100 score.
Can it fix issues?
Yes, if asked it offers to fix the issues directly.