component-patterns-code
CommunityShip accessible UI components faster
Authorphazurlabs
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill turns UI ideas into production-ready component implementations instead of static mockups or incomplete snippets, helping teams ship interactive interfaces that behave correctly across real states, devices, and assistive technologies.
Core Features & Use Cases
- State-complete components: Covers buttons, inputs, dialogs, toasts, tables, navigation, and other common UI primitives with loading, error, empty, focus, selected, and disabled states.
- Accessibility-first implementation: Applies semantic HTML, ARIA patterns, keyboard behavior, focus management, and screen reader support from the start.
- Cross-platform patterns: Provides React, TypeScript, SwiftUI, and modern CSS examples that use design tokens and responsive techniques.
- Use Case: A product team can ask for a modal, combobox, or form field and receive a polished implementation with state handling, reduced-motion support, and theming hooks.
Quick Start
Use this skill to generate a production-ready accessible React component for a button, input, or modal with complete state handling and token-based styling.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: component-patterns-code Download link: https://github.com/phazurlabs/ux-ui-mastery/archive/main.zip#component-patterns-code Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 537,000+ vetted skills library on demand.