Ui Component Architect
Design production-grade UI components with atomic design and accessibility
What You Can Do
Design production-ready UI components that serve as foundations for scalable design systems. You define clear component APIs, TypeScript/JSDoc prop interfaces, comprehensive variant systems (states, sizes, themes, interactions), and full accessibility markup including ARIA labels and semantic HTML. Claude generates complete Storybook stories and documentation to enable seamless developer handoff and cross-team component consumption.
Features
organizes components into atoms, molecules, organisms, templates, and pages with clear hierarchies
creates well-structured specifications with clear contracts and prop documentation
generates comprehensive state, size, theme, and interaction variants with prop combinations
includes ARIA labels, semantic HTML, keyboard navigation, and compliance guidance
produces fully typed prop definitions with inline documentation for developer experience
generates stories demonstrating all component variants and usage patterns
identifies theming and styling points for consistent design system application
captures component behavior under various states, errors, and interactions
Example Output
Button Component Specification
interface ButtonProps {
variant: 'primary' | 'secondary' | 'ghost';
size: 'sm' | 'md' | 'lg';
disabled?: boolean;
loading?: boolean;
icon?: ReactNode;
ariaLabel: string;
}
Storybook Story Example
Default Primary Button → renders with proper contrast ratios
Disabled State → shows disabled cursor, reduced opacity
Loading State → displays spinner, prevents interaction
With Icon + Text → maintains proper spacing and alignment
Accessibility Markup
role="button"for semantic meaningaria-pressedfor toggle statesaria-disabledfor disabled states- Keyboard navigation: Enter/Space activation
What's Included
- SKILL.md instruction file with atomic design methodology:
- Component specification template for defining APIs and props:
- Accessibility checklist covering ARIA, semantic HTML, and keyboard navigation:
- Variant matrix worksheet for mapping component states and combinations:
- Storybook story template with CSF (Component Story Format) examples:
- Design token integration guide for theming and styling points:
Who It's For
- Design System Architects — building foundational component libraries and design systems
- Senior Frontend Engineers — designing scalable component APIs for multi-team consumption
- Product Design Leads — establishing component specifications before development handoff
- Component Library Maintainers — documenting and versioning reusable UI elements
- Accessibility Engineers — ensuring components meet WCAG compliance from design phase
Best For
- Designing atomic design foundations (buttons, inputs, cards, navigation)
- Creating prop interfaces and component API contracts before implementation
- Generating comprehensive variant systems across states, sizes, and themes
- Building accessibility-compliant components with ARIA and semantic markup
- Producing Storybook documentation for developer onboarding and component discovery
You might also like
Query your local Screenpipe instance to retrieve screen recordings, audio transcriptions, UI element accessibility trees, keyboard/mouse input logs, and productivity analytics. You can search by keywords, filter by content type (audio, OCR, accessibility, input), set time ranges, and extract structured data about your applications, meetings, and work sessions without sending data to external servers.
by az9713
You can submit architectural design documents, floor plans, and project parameters to receive a comprehensive compliance analysis that cross-references IBC, local amendments, zoning ordinances, and ADA accessibility requirements. Claude identifies specific gaps, cites applicable code sections, explains why each gap matters, and provides concrete remediation strategies—all before formal design review submission when corrections are costly and schedule-impacting.
by az9713
You can leverage Claude to synthesize regional seismic hazard data from authoritative sources (USGS maps, published studies), interpret probabilistic versus deterministic earthquake scenarios, and analyze how site conditions modify ground motions. Claude helps you justify seismic design parameters to clients and regulators, evaluate liquefaction and earthquake-induced landslide risks, and develop defensible recommendations aligned with ASCE 7 and current guidelines—accelerating report preparation without replacing specialized geotechnical software.
by az9713
You can compare building materials across embodied carbon, water usage, recyclability, supply chain impacts, and lifecycle costs—all grounded in industry standards like EN 15804 and ISO 14040/44. This skill transforms material selection from intuition-based guessing into data-driven specification, producing analysis outputs ready for client presentations, value engineering discussions, and regulatory compliance documentation.
by az9713
You systematically evaluate your internal developer platform across dimensions like onboarding, deployment, tooling, and documentation to identify quantifiable friction points. Claude analyzes your platform's usability, creates a friction scoring matrix, and generates a prioritized improvement roadmap ranked by team impact and implementation effort. You get a data-driven strategy to reduce developer toil and accelerate delivery.
by az9713
You can audit BIM models across five critical domains: geometric accuracy and LOD consistency, information requirements and metadata, coordinate systems and project setup, element naming and classification standards, and documentation completeness. This skill generates detailed compliance reports that identify every gap and provide specific remediation guidance, enabling you to enforce consistent standards across projects, reduce rework, and ensure models are ready for handoff to downstream disciplines or coordination workflows.
by az9713
You can conduct rigorous architectural design reviews that verify compliance with building codes, accessibility standards, energy regulations, and client requirements. The skill produces evidence-based, severity-ranked findings with specific remediation recommendations and regulatory citations, enabling you to identify issues before design phase submission or construction document preparation.
by az9713
You can accelerate HVAC design workflows by inputting building parameters—envelope characteristics, occupancy data, climate conditions, and existing systems—and receiving calculated heating/cooling loads, equipment sizing recommendations, and zone-by-zone analysis. Claude organizes complex building data into actionable design parameters and specification summaries for client review, permit submission, and professional validation against ASHRAE and ACCA standards.
by az9713