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 generate production-ready web interfaces, dashboards, forms, and navigation structures grounded in actual design system best practices. This skill provides access to 60+ documented UI component patterns sourced from industry standards, ensuring your designs follow modern conventions for restraint, typography hierarchy, color strategy, and spacing. Every interface Claude generates will feel polished and professional—not templated.
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 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
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
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
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