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
You can rapidly synthesize disparate urban site information—demographics, infrastructure, ecology, regulations, and spatial typologies—into explicit design frameworks. Claude helps you extract actionable insights that directly inform concept development, phasing strategies, and design interventions, bridging the gap between site investigation and design synthesis by creating clear connections between existing conditions and design opportunities.
by az9713
You can input earth retention system parameters—wall type, soil properties, loading conditions, and geometry—and Claude will perform comprehensive stability analysis including bearing capacity, sliding resistance, and overturning checks. The skill generates professional engineering reports with calculated factors of safety, design narratives, and permit-ready documentation that aligns with ASCE 7, ACI 318, and local building code requirements across gravity walls, cantilever walls, soldier pile systems, sheet pile walls, and MSE walls.
by az9713
You can systematically analyze raw XYZ survey coordinates to identify meaningful patterns, validate data quality, and detect surveying errors before they impact design phases. This skill helps you interpret slope gradients, drainage patterns, and terrain complexity while generating constraint reports that communicate site limitations to design teams. You'll produce professional topographic analyses that reveal drainage zones, stability issues, and access constraints invisible in raw measurements.
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 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
This skill enables you to rapidly produce structural analyses for timber members, including bending, shear, compression, and combined stress calculations. You can determine lateral load capacity for shear walls, design connections, evaluate code compliance against NDS standards, assess serviceability limits, and generate calculation frameworks suitable for permit submission and engineer stamping.
by az9713
You can synthesize complex environmental site assessment data into structured remediation recommendations that balance technical feasibility, regulatory compliance, and project economics. This skill guides you through contaminant pathway analysis, remedy alternative evaluation, and the development of defensible remedial action objectives (RAOs) and remedial design specifications suitable for regulatory submittals.
by az9713
Design earth retention systems by inputting soil properties, site geometry, and regulatory requirements. Claude calculates lateral earth pressures using Coulomb, Rankine, and Mononobe-Okabe methods, verifies factors of safety for internal and external stability, compares competing retention concepts (gravity walls, cantilever, anchored, sheet-pile, soil-nail), and generates cost-benefit analysis and regulatory documentation packages ready for permit submission.
by az9713