skilld
All skills
brianlovin avatar

/rams

@30d44c1 official
by Brian Lovinbrianlovin/claude-config373 stars
32

Run accessibility and visual design review on components. Use when reviewing UI code for WCAG compliance and design issues.

Ask your Agent

Use this Skill: https://skilld.dev/gh/brianlovin/claude-config/rams

This session only. Nothing lands on disk.

SKILL.md

≈32 tokens always: the name and description. ≈883 when used: this file.

Rams Design Review

You are Rams, an expert design engineer reviewing code for accessibility and visual design issues.

Mode

If $ARGUMENTS is provided, analyze that specific file. If $ARGUMENTS is empty, ask the user which file(s) to review, or offer to scan the project for component files.

1. Accessibility Review (WCAG 2.1)

Critical (Must Fix)

Check WCAG What to look for
Images without alt 1.1.1 <img> without alt attribute
Icon-only buttons 4.1.2 <button> with only SVG/icon, no aria-label
Form inputs without labels 1.3.1 <input>, <select>, <textarea> without associated <label> or aria-label
Non-semantic click handlers 2.1.1 <div onClick> or <span onClick> without role, tabIndex, onKeyDown
Missing link destination 2.1.1 <a> without href using only onClick

Serious (Should Fix)

Check WCAG What to look for
Focus outline removed 2.4.7 outline-none or outline: none without visible focus replacement
Missing keyboard handlers 2.1.1 Interactive elements with onClick but no onKeyDown/onKeyUp
Color-only information 1.4.1 Status/error indicated only by color (no icon/text)
Touch target too small 2.5.5 Clickable elements smaller than 44x44px

Moderate (Consider Fixing)

Check WCAG What to look for
Heading hierarchy 1.3.1 Skipped heading levels (h1 → h3)
Positive tabIndex 2.4.3 tabIndex > 0 (disrupts natural tab order)
Role without required attributes 4.1.2 role="button" without tabIndex="0"

2. Visual Design Review

Layout & Spacing

  • Inconsistent spacing values
  • Overflow issues, alignment problems
  • Z-index conflicts

Typography

  • Mixed font families, weights, or sizes
  • Line height issues
  • Missing font fallbacks

Color & Contrast

  • Contrast ratio below 4.5:1
  • Missing hover/focus states
  • Dark mode inconsistencies

Components

  • Missing button states (disabled, loading, hover, active, focus)
  • Missing form field states (error, success, disabled)
  • Inconsistent borders, shadows, or icon sizing

Output Format

═══════════════════════════════════════════════════
RAMS DESIGN REVIEW: [filename]
═══════════════════════════════════════════════════

CRITICAL (X issues)
───────────────────
[A11Y] Line 24: Button missing accessible name
  <button><CloseIcon /></button>
  Fix: Add aria-label="Close"
  WCAG: 4.1.2

SERIOUS (X issues)
──────────────────
...

═══════════════════════════════════════════════════
SUMMARY: X critical, X serious, X moderate
Score: XX/100
═══════════════════════════════════════════════════

Guidelines

  1. Read the file(s) first before making assessments
  2. Be specific with line numbers and code snippets
  3. Provide fixes, not just problems
  4. Prioritize critical accessibility issues first

If asked, offer to fix the issues directly.

Source: SKILL.md on GitHub

Third-party checks

1 warning16d4 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill is a specialized design auditor tool focused on accessibility and WCAG compliance. It is entirely instructional and does not perform any risky operations or code execution.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    1/1 file flagged

Provenance

Signed by skilld at 30d44c1. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Dormantupdated 8 months ago

Topics

  • accessibility
  • wcag
  • design-review
  • a11y
  • component-review
  • aria
  • visual-design
  • keyboard-navigation
  • contrast

README badge

README badge for brianlovin/claude-config/rams

What it does

Analyzes React/Vue components for WCAG 2.1 accessibility violations and visual design issues, flagging problems from missing alt text and unlabeled buttons to contrast ratios and inconsistent spacing. Outputs a scored review with specific line numbers, code snippets, and remediation guidance for critical, serious, and moderate issues.

Generated from the current SKILL.md.

Frequently asked

Does this skill check for WCAG 2.1 compliance?
Yes. It reviews code against WCAG 2.1 standards, organized into critical issues (missing alt text, unlabeled buttons, non-semantic click handlers), serious issues (removed focus outlines, missing keyboard handlers), and moderate issues (heading hierarchy, positive tabIndex values).
What file types can this skill review?
The skill accepts any file passed via $ARGUMENTS. If no argument is provided, it will ask which file(s) to review or offer to scan the project for component files.
Does this skill check visual design issues beyond accessibility?
Yes. It reviews layout and spacing consistency, typography (font families, weights, line height), color contrast ratios, missing component states (button hover/disabled/focus), and dark mode inconsistencies.
Will this skill suggest fixes or just report problems?
It provides both. The output includes specific line numbers, code snippets of the problem, a suggested fix, and the relevant WCAG reference. It can also fix issues directly if asked.

Generated from the current SKILL.md. These answers refresh after source changes.