product-factory/accessibility
Apply this skill when building, reviewing, or refactoring any UI in a React + TypeScript + Tailwind + shadcn/ui application. Triggers on requests like "add a form", "build a modal", "create a dropdown", "make this accessible", "add a table", "build a navigation", or any time you are creating interactive components. Use proactively — every component must be accessible by default. EU accessibility law (EAA) mandates compliance since June 2025.
84
Quality
84%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Discovery
82%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a well-structured description with strong trigger term coverage and clear 'when to use' guidance. The main weakness is that it focuses more on when to apply the skill than what specific accessibility actions it performs. The accessibility focus could be more distinctive if it explicitly named concrete capabilities like ARIA implementation or keyboard navigation patterns.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Implements ARIA labels, keyboard navigation, focus management, and screen reader support'
Strengthen distinctiveness by emphasizing the accessibility specialization more prominently at the start, e.g., 'Ensures WCAG 2.1 AA compliance for React components'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (React + TypeScript + Tailwind + shadcn/ui) and mentions actions like 'building, reviewing, or refactoring UI', but doesn't list specific concrete actions the skill performs (e.g., 'adds ARIA labels', 'implements keyboard navigation'). | 2 / 3 |
Completeness | Clearly answers both what (building/reviewing/refactoring UI in React+TypeScript+Tailwind+shadcn/ui with accessibility) and when (explicit 'Triggers on requests like...' clause with multiple examples, plus 'Use proactively' guidance). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would say: 'add a form', 'build a modal', 'create a dropdown', 'make this accessible', 'add a table', 'build a navigation', 'interactive components'. | 3 / 3 |
Distinctiveness Conflict Risk | The tech stack (React + TypeScript + Tailwind + shadcn/ui) provides some distinction, but 'building UI' and component triggers like 'add a form' could overlap with general React or UI component skills that don't focus on accessibility. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
79%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a strong, actionable accessibility guide with excellent code examples and clear anti-patterns. The content is concise and assumes appropriate developer competence. Main weaknesses are the lack of explicit validation workflows for testing accessibility compliance and the monolithic structure that could benefit from splitting detailed topics into referenced files.
Suggestions
Add an explicit accessibility validation workflow: 1) Run eslint-plugin-jsx-a11y, 2) Run jest-axe tests, 3) Manual keyboard test, 4) Screen reader verification—with clear pass/fail criteria at each step.
Consider splitting detailed sections (drag-and-drop, tables, forms) into separate reference files with links from the main SKILL.md overview.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, assuming Claude's competence with React/TypeScript. No unnecessary explanations of basic concepts—jumps straight to actionable patterns with clear ❌/✅ comparisons. | 3 / 3 |
Actionability | Provides fully executable TypeScript/JSX code throughout, with copy-paste ready examples for every pattern (buttons, forms, tables, drag-and-drop, skip links). Specific library configurations included. | 3 / 3 |
Workflow Clarity | Content is well-organized by topic but lacks explicit validation workflows. Testing section lists approaches but doesn't provide a clear sequence or checkpoints for verifying accessibility compliance during development. | 2 / 3 |
Progressive Disclosure | Content is well-structured with clear sections and tables, but it's a monolithic document (~200 lines) with no references to external files for detailed topics like dnd-kit configuration or comprehensive ARIA patterns. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
Install with Tessl CLI
npx tessl i product-factory/accessibilityReviewed
Table of Contents