rams — Claude Code skill: what it does, how to install
Reviews UI components for WCAG 2.1 compliance and visual styling bugs. Handy when auditing front-end code before shipping.
npx skills add brianlovin/agent-config --skill rams -a claude-codeWhat rams 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.
What it helps with
- 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 for the agent
- 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
How to install rams
1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill rams -a claude-code2Manually: put the files in place
~/.claude/skills/rams/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/rams/
1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill rams -a codex2Manually: put the files in place
.agents/skills/rams/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill rams -a cursor2Manually: put the files in place
.cursor/skills/rams/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install brianlovin/agent-config rams2Manually: put the files in place
.github/skills/rams/SKILL.md1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill rams -a gemini-cli2Platform CLI
gemini skills install https://github.com/brianlovin/agent-config --path skills/ramsManually: put the files in place
.devin/skills/rams/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill rams -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about rams
How do I install rams in Claude Code?
Install it by running npx skills add brianlovin/agent-config --skill rams -a claude-code. The file is saved at ~/.claude/skills/rams/SKILL.md.
What does the rams skill do?
Rams performs a design and accessibility audit on component code against WCAG 2.1 guidelines. It reports issues with line numbers, WCAG criteria, visual design checks, and an overall score out of 100.
Can rams automatically fix the issues it finds?
Yes, its prompt instructs the agent to offer direct fixes for reported bugs. You can ask Claude Code to apply the recommended code changes right after the review.
