rams

Analyze HTML, CSS, and framework code for WCAG 2.1 accessibility and visual design issues.

3|Updated Dec 25, 2025

Search Tags:#accessibility #a11y #WCAG #UI #audit #code-review #visual-design

Ready to run

npx skills add https://github.com/thoreinstein/agents --skill rams-thoreinstein

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: rams
Source: https://github.com/thoreinstein/agents/tree/main/skills/rams
Command: npx skills add https://github.com/thoreinstein/agents --skill rams-thoreinstein

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps engineers and designers identify accessibility and visual design issues within UI codebases, reducing usability gaps and redesign effort.

Core Features & Use Cases

Automated Accessibility checks: detects missing alt attributes, insufficient color contrast, missing labels, and non-semantic markup.
Visual Design analysis: flags typography, spacing, alignment, and component consistency.
Use Case: Given a React project, run Rams to produce a prioritized list of accessibility fixes and visual improvements with suggested fixes.

Quick Start

Use the Rams skill to start an accessibility and visual design review on your project. For example, run Rams on a target file or directory to generate a prioritized report (e.g., rams analyze src/components/Header.jsx).

Frequently Asked Questions about rams

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit my React project for WCAG compliance and visual design issues?▼

To audit a React project for WCAG compliance and visual design issues, run an accessibility analyzer on target files or directories. It evaluates HTML and CSS codebases against WCAG 2.1 checks and visual consistency criteria, then outputs a structured report with prioritized fixes.

What does an automated UI accessibility check look for?▼

An automated UI accessibility check detects missing alt attributes, insufficient color contrast, missing labels, and non-semantic markup. It also flags visual design issues like typography, spacing, alignment, and component consistency to reduce usability gaps.

Can I use this accessibility audit tool on framework codebases like React?▼

Yes, you can use this accessibility audit tool on framework codebases like React. It applies to UI components, pages, and design systems across HTML, CSS, and framework codebases to assess conformance and aesthetics.

What is the best way to prioritize accessibility fixes in a UI codebase?▼

The best way to prioritize accessibility fixes in a UI codebase is to run an audit that generates a structured report. This report evaluates code against WCAG 2.1 standards and visual consistency criteria, producing a prioritized list of suggested fixes.

Why does my UI component fail visual consistency checks during an audit?▼

Your UI component fails visual consistency checks during an audit due to typography, spacing, alignment, or component inconsistencies. The audit flags these visual design issues alongside accessibility problems like missing labels or insufficient color contrast.