skills.rest
nathankoerschner
nathankoerschnerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

rams

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

Related Skills

Explore More Design & Creative Skills→
NVIDIA-AI-BlueprintsNVIDIA-AI-Blueprints
1.8k

video-understanding

Analyze video frames to answer visual content questions via the VSS agent.

Official
Intermediate
k97k97
4

rams

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

Community
Intermediate
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced
bdbchbdbch
2

accessibility-review

Audit web applications for WCAG 2.1/2.2 accessibility compliance in Chrome.

Community
Advanced