rams
brianlovin/agent-config
Expert accessibility and visual design review for UI components against WCAG 2.1 standards.
What is rams?
Rams analyzes React/UI component code for accessibility violations (WCAG 2.1) and visual design issues. Use it when reviewing component code to catch missing alt text, unlabeled buttons, keyboard navigation gaps, contrast problems, and inconsistent design patterns before they reach production.
- Identifies critical accessibility issues: missing alt text, icon-only buttons without labels, unlabeled form inputs, non-semantic click handlers
- Detects serious WCAG violations: removed focus outlines, missing keyboard handlers, color-only information, undersized touch targets
- Reviews visual design: typography consistency, spacing, color contrast ratios, component state coverage (hover, focus, disabled, loading)
- Provides specific line numbers, code snippets, and actionable fixes for each issue
- Generates a scored summary report prioritizing critical issues first
How to install rams
npx skills add https://github.com/brianlovin/agent-config --skill ramsHow to use rams
- 1.Provide a file path or component file when prompted, or let Rams scan your project for component files
- 2.Review the generated report organized by severity: Critical, Serious, and Moderate issues
- 3.For each issue, note the line number, code snippet, WCAG reference, and suggested fix
- 4.Address critical issues first, then serious, then moderate based on your timeline
- 5.Optionally ask Rams to apply fixes directly to the code
Use cases
- Review a new component before merging to catch accessibility regressions
- Audit an existing component library for WCAG 2.1 compliance gaps
- Check form implementations for proper labeling and keyboard support
- Validate button and interactive element states across hover, focus, and disabled states
- Ensure color contrast meets 4.5:1 minimum and design is not color-dependent
- Frontend engineers building accessible components
- Design engineers reviewing code for design system compliance
- QA specialists validating accessibility requirements
- Teams adopting WCAG 2.1 standards
rams FAQ
Rams validates against WCAG 2.1 standards, covering critical accessibility requirements like semantic HTML, keyboard navigation, alt text, labels, and contrast ratios.
Yes. After reviewing, you can ask Rams to apply the suggested fixes directly to your component code.
Both. Rams reviews accessibility (WCAG compliance) and visual design issues (typography, spacing, color, component states, contrast).
Rams analyzes the rendered HTML structure and inline styles. It will flag issues regardless of whether styles come from CSS files, Tailwind, styled-components, or inline styles.
The score reflects the severity and count of issues found. Critical issues have the highest impact, followed by serious and moderate issues.
Full instructions (SKILL.md)
Source of truth, from brianlovin/agent-config.
name: rams description: Run accessibility and visual design review on components. Use when reviewing UI code for WCAG compliance and design issues.
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
- Read the file(s) first before making assessments
- Be specific with line numbers and code snippets
- Provide fixes, not just problems
- Prioritize critical accessibility issues first
If asked, offer to fix the issues directly.
Related skills
More from brianlovin/agent-config and the wider catalog.
react-doctor
Scan React codebases for security, performance, and architecture issues with actionable diagnostics.
reclaude
Refactor CLAUDE.md files to follow progressive disclosure and best practices.
sentry
Sentry error monitoring and performance tracing for Next.js applications.
simplify
Simplify and refine recently modified code for clarity and consistency.
tdd
Test-driven development with red-green-refactor loop for building features and fixing bugs.
workflow
Workflow orchestration for complex coding tasks with planning, verification, and autonomous bug fixing.