skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

rams

Reviews code files for WCAG accessibility violations and visual design issues.

3|Updated Apr 20, 2026
Search Tags:#code review#accessibility#a11y#frontend#wcag#contrast#design review
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill rams-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rams
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/rams
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill rams-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend code often ships with accessibility violations and visual inconsistencies that manual review misses, such as missing alt text, unlabeled form inputs, and poor contrast ratios. ## Core Features & Use Cases - WCAG 2.1 Accessibility Audit: Detects critical, serious, and moderate accessibility issues like icon-only buttons, missing keyboard handlers, and removed focus outlines, each mapped to its WCAG criterion. - Visual Design Review: Checks layout spacing, typography consistency, color contrast, and component states such as hover, disabled, and loading. - Use Case: Before merging a new React component, run a review to get a line-by-line report with severity ratings, concrete fixes, and a 0-100 quality score. ## Quick Start Ask the assistant to run a Rams design review on a specific component file, or leave the target empty to be prompted for files to scan.

Frequently Asked Questions about rams

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

FAQPage Schema
How do I check my React component for accessibility issues?▼

Run a design review on the component file to detect WCAG 2.1 violations such as missing alt attributes, unlabeled inputs, and icon-only buttons. Each finding includes the line number, offending code, and a concrete fix.

What accessibility issues does a WCAG 2.1 review catch?▼

It catches critical issues like images without alt text and non-semantic click handlers, serious issues like removed focus outlines and missing keyboard handlers, and moderate issues like skipped heading levels and positive tabIndex values.

Can I review multiple files or a whole project at once?▼

Yes. If no file argument is provided, the reviewer asks which files to check or offers to scan the project for component files, then reviews each one individually.

Does this replace automated accessibility testing in CI?▼

No. The local review uses heuristic checks on individual files. Continuous scoring across pull requests and repositories requires the hosted Rams GitHub App referenced in the skill documentation.

Why is my contrast ratio flagged during design review?▼

Text with a contrast ratio below 4.5:1 fails WCAG guidance and is flagged during the color and contrast check. The review also notes missing hover and focus states and dark mode inconsistencies.

Related Skills

Explore More Design & Creative Skills→
DexploarerDexploarer
6

a11y-annotation-generator

Add ARIA labels, roles, and alt text to HTML, JSX, and Vue templates.

Community
Intermediate
real-casereal-case

pr-resolve

Resolve unresolved GitHub pull request review threads by applying fixes, replying, and marking them resolved.

Community
Advanced
aemsitesaemsites
3

Testing Blocks

Automate testing of AEM Edge Delivery code changes with unit, browser, and lint checks.

Official
Intermediate
gc-da11yngc-da11yn
41

web-scanning

Automate web accessibility scans and page inventories using axe-core CLI.

Official
Advanced