skills.rest
kaelig
kaeligCOMMUNITY
Explore all skills by this author →
Website𝕏@kaeligGitHub

implementation-checker

Analyze React UI components for missing accessibility attributes and state handling.

7|Updated Mar 11, 2026
Search Tags:#accessibility#state management#keyboard navigation#react#ui development#component audit
One-click install
npx skills add https://github.com/kaelig/react-craft --skill implementation-checker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implementation-checker
Source: https://github.com/kaelig/react-craft/tree/main/react-craft/skills/implementation-checker
Command: npx skills add https://github.com/kaelig/react-craft --skill implementation-checker

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill identifies critical implementation gaps in UI components that are often missed in design handoffs, ensuring better accessibility, user experience, and robustness.

Core Features & Use Cases

  • Accessibility Audits: Checks for missing ARIA attributes, keyboard navigation support, and focus management.
  • State Handling: Verifies that loading, empty, and error states are implemented for data-driven components.
  • Use Case: Before handing off a new modal component to development, use this Skill to ensure it correctly handles focus trapping, keyboard dismissal, and displays appropriate loading and error messages.

Quick Start

Analyze the attached file 'src/components/MyButton.tsx' for implementation concerns.

Frequently Asked Questions about implementation-checker

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

FAQPage Schema
How do I check my React components for missing ARIA attributes and keyboard navigation?▼

To check React components for missing ARIA attributes and keyboard navigation, you can use static pattern matching to analyze source files, identifying missing focus management and unhandled loading or error states.

What is the best way to audit UI components for unhandled loading and error states?▼

The best way to audit UI components for unhandled loading and error states is using static analysis to verify state completeness, ensuring data-driven components properly implement loading, empty, and error rendering.

How do I verify focus trapping and keyboard dismissal in a modal component before handoff?▼

To verify focus trapping and keyboard dismissal in a modal component before handoff, perform an accessibility audit using static pattern matching to detect missing focus management and keyboard interaction patterns.

Does this static analysis approach work with glob and grep tools for file system traversal?▼

Yes, this static analysis approach works with glob and grep tools, requiring them specifically for file system traversal and pattern searching to detect missing accessibility attributes in React components.

How do I check if my UI components support prefers-reduced-motion?▼

To check if UI components support prefers-reduced-motion, use static pattern matching to scan your codebase for missing motion preferences, ARIA roles, and incomplete state handling.

Related Skills

Explore More Software Engineering Skills→
wanghaishengwanghaisheng
10

asset-audit

Audit game assets for naming, size, and format compliance.

Community
Intermediate
TheGoat395TheGoat395
117

react-accessible-components

Construct accessible React components with semantic HTML and ARIA attributes.

Community
Intermediate
imkdwimkdw
1

Frontend Accessibility

Implement accessible React components with ARIA, keyboard navigation, and WCAG compliance.

Community
Intermediate
videojsvideojs
888

aria

Audit React UI components for ARIA accessibility and keyboard navigation.

Official
Basic