skills.rest
k97
k97COMMUNITY
Explore all skills by this author →
GitHub

rams

Audit UI source code for WCAG 2.1 compliance and design consistency.

4|Updated Jan 27, 2026
Search Tags:#accessibility#frontend#wcag#code-quality#design-review#ui-audit
One-click install
npx skills add https://github.com/k97/dock-tile --skill rams-k97
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rams
Source: https://github.com/k97/dock-tile/tree/main/website/.claude/skills/rams
Command: npx skills add https://github.com/k97/dock-tile --skill rams-k97

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of maintaining high accessibility standards and visual consistency in UI code by automating the detection of WCAG compliance issues and design anti-patterns.

Core Features & Use Cases

  • Accessibility Auditing: Automatically flags missing alt text, improper button labels, and non-semantic interactive elements based on WCAG 2.1 guidelines.
  • Visual Design Review: Identifies inconsistencies in layout, typography, color contrast, and component states.
  • Use Case: Before merging a pull request, use this Skill to scan your component files to ensure all interactive elements are keyboard-accessible and meet minimum contrast requirements.

Quick Start

Use the rams skill to perform a full accessibility and design review on the file named HeaderComponent.tsx.

Frequently Asked Questions about rams

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

FAQPage Schema
How do I automate accessibility audits for UI source code?▼

You can automate accessibility audits by scanning your UI source code files to evaluate components for WCAG 2.1 compliance, semantic HTML usage, and missing keyboard handlers.

How does a UI audit detect WCAG compliance issues in frontend components?▼

A UI audit detects WCAG compliance issues by analyzing component code structure to identify missing alt text, improper button labels, non-semantic interactive elements, and keyboard handler gaps.

Can I check semantic HTML and visual design consistency before merging a pull request?▼

Yes, you can scan component files before merging a pull request to ensure all interactive elements are keyboard-accessible, meet minimum contrast requirements, and adhere to design system principles.

What is the best way to identify missing keyboard handlers and contrast deficiencies in my components?▼

The best way to identify missing keyboard handlers and contrast deficiencies is performing a comprehensive visual design review that evaluates your code structure for layout inconsistencies and accessibility anti-patterns.

Does this automated design review work with any frontend code files?▼

Yes, this automated design review works by analyzing your UI source code files directly, meaning it can evaluate any frontend component format readable as text input.

Related Skills

Explore More Design & Creative Skills→
Synaptic-Labs-AISynaptic-Labs-AI
71

pact-prepare-research

Conduct structured research and documentation gathering for the PACT Prepare phase.

Official
Advanced
nikhillinitnikhillinit

code-formatter

Format and lint source code across multiple languages with autodetection.

Community
Advanced
yash-gargyash-garg

flutter-add-widget-test

Create Flutter widget tests validating rendering and interactive behavior with WidgetTester.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate