skills.rest
thoreinstein
thoreinsteinCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/thoreinstein/agents --skill rams-thoreinstein
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
OneWave-AIOneWave-AI
245

screenshot-to-code

Convert UI screenshots into responsive HTML, CSS, React, or Vue code.

Official
Advanced
brianlovinbrianlovin
357

rams

Analyze UI components for WCAG violations and visual design inconsistencies.

Community
Advanced
akourmazakourmaz

checklist-ux-review

Audit frontend UI implementations for visual states, accessibility, and responsive behavior.

Community
Intermediate
oakossoakoss
14

hydration-guardian

Diagnose and fix React hydration mismatches between server-rendered HTML and client trees.

Official
Advanced