# rams

Reviews UI components for WCAG 2.1 compliance and visual styling bugs. Handy when auditing front-end code before shipping.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3000 installs · ★ 379
- Author: brianlovin
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/brianlovin/agent-config/tree/HEAD/skills/rams/SKILL.md
- Updated: 2026-03-25
- HTML: https://affpapa.org/en/nevibecode/skills/rams

## What it does

Rams inspects front-end markup to uncover accessibility violations alongside layout inconsistencies. It flags critical WCAG 2.1 failures, such as icon buttons without accessible names or generic tags running click handlers without keyboard events. Passing a specific file path audits that file immediately. When invoked without arguments, the agent prompts for a target file or scans project components.

The review organizes findings by severity tier with line numbers, code snippets, and relevant WCAG criteria. It also inspects design details like contrast ratios below 4.5:1, touch targets under 44x44px, and missing interactive states. Expect strict grading here: the final score out of 100 drops sharply for suppressed focus outlines or broken heading orders. If requested, the agent applies suggested fixes directly to the file.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill rams -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/rams/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/rams/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill rams -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/rams/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill rams -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/rams/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install brianlovin/agent-config rams
```

2. **Manually: put the files in place**
- File: `.github/skills/rams/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill rams -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/brianlovin/agent-config --path skills/rams
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/rams/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill rams -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/brianlovin/agent-config/tree/HEAD/skills/rams/SKILL.md

## When to use it
- audit UI components against WCAG 2.1 accessibility criteria
- detect icon buttons and form controls missing accessible labels
- verify color contrast and minimum touch target dimensions
- locate missing component states for buttons and form fields

## Example prompts
- Review src/components/Modal.tsx for design and accessibility issues using rams
- Run rams to check our checkout form components for WCAG violations
- Audit button styles with rams and fix any missing focus states

## Similar
- [ux-designer](https://affpapa.org/en/nevibecode/skills/ux-designer.md) — skill · 1600 installs
- [better-interface](https://affpapa.org/en/nevibecode/skills/better-interface.md) — skill · 30000 installs
- [21st-ui-review](https://affpapa.org/en/nevibecode/skills/21st-ui-review.md) — skill · 1300 installs
- [frontend-design-review](https://affpapa.org/en/nevibecode/skills/frontend-design-review.md) — skill · 237 installs
- [premium](https://affpapa.org/en/nevibecode/skills/premium.md) — skill · 2700 installs
- [editorial](https://affpapa.org/en/nevibecode/skills/editorial.md) — skill · 2700 installs

From the same set: [brianlovin/agent-config](https://affpapa.org/en/nevibecode/by/brianlovin/agent-config.md) — 15 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md