rams

Name: rams
Availability: InStock
Author: Nathan

Review code for WCAG 2.1 accessibility and visual design issues.

Updated Jan 22, 2024

Search Tags:#code quality #accessibility #frontend #wcag #design review #ux

Ready to run

npx skills add https://github.com/nathankoerschner/dotfiles --skill rams-nathankoerschner

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: rams
Source: https://github.com/nathankoerschner/dotfiles/tree/main/agent-skills/_shared-skills/rams
Command: npx skills add https://github.com/nathankoerschner/dotfiles --skill rams-nathankoerschner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the review of code for critical accessibility (WCAG 2.1) and visual design issues, ensuring a higher quality and more inclusive user experience.

Core Features & Use Cases

Accessibility Audits: Identifies common and critical accessibility violations like missing alt text, unlabeled forms, and non-semantic elements.
Visual Design Checks: Flags inconsistencies in layout, typography, color contrast, and component states.
Use Case: Before merging a new feature, run Rams to catch any accessibility regressions or visual design flaws, ensuring the code meets high standards.

Quick Start

Use the rams skill to review the file 'src/components/Button.jsx' for accessibility and design issues.

Frequently Asked Questions about rams

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

FAQPage Schema

How do I check my frontend code for WCAG 2.1 accessibility violations?▼

Automated accessibility audits identify critical WCAG 2.1 violations like missing alt text, unlabeled forms, and non-semantic elements in your frontend code. This catches accessibility regressions early before merging new features.

Can I catch visual design and typography inconsistencies during a code review?▼

Yes, visual design checks flag inconsistencies in layout, typography, color contrast, and component states during a code review. This ensures your frontend adheres to common design system best practices.

What is the best way to prevent accessibility regressions in UI components?▼

The best way to prevent accessibility regressions is running automated audits on UI components to detect missing alt text, focus outline removal, and color contrast problems prior to code merges.

Does this automated design review check for color contrast and focus outline issues?▼

Yes, this automated design review analyzes code to detect color contrast problems and instances of focus outline removal, ensuring compliance with WCAG 2.1 standards and visual design principles.