Accessibility-First Design Critique & Specification
Audit designs for accessibility and generate specifications
What You Can Do
You get expert design critique, comprehensive accessibility audits against WCAG 2.1 standards, and detailed design specifications ready for development. This skill analyzes mockups for compliance issues, design consistency, and usability patterns—then generates actionable specifications that developers can implement with confidence.
Features
Evaluate designs against WCAG 2.1 AA/AAA standards, identifying color contrast issues, text readability problems, and interactive component compliance gaps
Verify that mockups adhere to your design system's typography, spacing, colors, and component patterns
Review layouts across mobile, tablet, and desktop breakpoints to ensure consistent UX at every screen size
Generate production-ready specs including component dimensions, spacing, colors, typography, hover/active states, and animation details
Identify where ARIA labels, roles, and semantic HTML are needed to make interactive components accessible
Create structured component documentation with props, states, accessibility requirements, and implementation guidance
Audit all text and icon colors for WCAG contrast ratio compliance across light and dark modes
Review focus management, keyboard navigation, screen reader announcements, and motion/animation considerations
Example Output
Accessibility Audit Report
Color Contrast Issues
- Button primary text: Contrast ratio 3.8:1 — below WCAG AA (4.5:1) ❌
- Fix: Darken text from #666 to #444
- Secondary text: Contrast ratio 5.2:1 — passes AA/AAA ✓
ARIA & Semantic HTML
- Form inputs: Missing
aria-labelfor icon-only buttons ❌ - Modals: Trap focus correctly, add
role="dialog"✓
Design Specifications
Button Component
- Dimensions: 44px min height (touch target), 12px padding vertical, 16px horizontal
- Typography: 14px Inter, 600 weight, center-aligned
- States:
- Default: #2563FF background, white text
- Hover: #1D4ED8 background (10% darker)
- Focus: 2px blue outline (4px offset)
- Active: #1D4ED8, 2px inset shadow
- Disabled: #CCCCCC background, #999999 text, 50% opacity
- Accessibility:
aria-pressedfor toggle buttons,aria-disabledfor disabled state
Responsive Breakpoints
- Mobile (320px): Full-width button with 16px margins
- Tablet (768px): Inline buttons with 8px gap
- Desktop (1024px): Align to grid columns
What's Included
- Accessibility Audit Report: Detailed findings across WCAG 2.1 compliance, ARIA implementation, color contrast, and keyboard navigation
- Design Specifications Document: Complete specs with dimensions, typography, colors, spacing, component states, and animations
- Component Documentation: Structured docs for each component including properties, accessibility requirements, and code implementation hints
- Remediation Recommendations: Prioritized list of fixes with explanations and WCAG standards references for each issue
- Design System Checklist: Verification against your existing design tokens, component patterns, and brand guidelines
Who It's For
- Product Designers
- UX/UI Designers
- Design Leads
- Accessibility Specialists
- Frontend Engineers
Best For
- Pre-development design reviews
- Accessibility compliance audits
- Design system documentation
- Component specification generation
- Cross-browser responsive validation
You might also like
Conduct comprehensive feasibility assessments for mixed-use development projects. You provide site details and project parameters, and Claude performs market analysis, regulatory review, financial modeling, and risk assessment—then delivers a structured feasibility report with go/no-go recommendations backed by data-driven insights.
Transform raw feature analytics into clear, actionable insights by analyzing engagement patterns, identifying performance trends, and synthesizing recommendations. You can compare feature performance across segments, detect anomalies, and generate reports that guide product decisions with data-backed confidence. This skill automates the heavy lifting of analytics interpretation so you focus on strategy.
Evaluate land parcels for development potential by assessing regulatory constraints, zoning compliance, environmental factors, and market conditions. You'll identify major hurdles to development and receive a prioritized entitlement strategy that shows exactly what permits and approvals you need, in what order, and realistic timelines for each phase.
Transform raw market data into a rigorous investment thesis framework that guides real estate development decisions. You provide property details, market conditions, and competitive context — Claude structures them into a comprehensive analysis covering market opportunity, risk factors, financial scenarios, and go/no-go recommendations. The thesis becomes your decision document, aligned with your investment criteria and portfolio strategy.
Use Claude to generate comprehensive technical documentation for APIs, services, and libraries while enforcing consistency across hundreds of pages. You can audit existing docs against your style guide and best practices, then restructure the navigation for better developer discoverability. This skill transforms documentation from a maintenance burden into a scalable, developer-first asset that stays current as your product evolves.
Transform raw market data into professional investment analyses and trend forecasts. This toolkit synthesizes comparable sales, market trends, and risk factors into structured opportunity evaluations using proven real estate investment frameworks. Generate investment-grade reports, identify high-potential markets, and make data-backed property acquisition decisions with confidence.
You provide Claude with your component requirements, design tokens, and accessibility needs, and it generates comprehensive, production-ready component specifications. The skill produces detailed documentation including prop tables, variant documentation, implementation examples, and accessibility guidelines—everything your design system needs to stay consistent and maintainable at scale.
Create comprehensive metric definition frameworks that directly align your product metrics with business objectives and ensure consistent measurement practices across teams. You'll develop standardized metric definitions with clear calculation methodologies, success criteria, and governance structures that reduce measurement inconsistency. The result is a shared organizational language around metrics that enables confident data-driven decision making.