skills.rest
phazurlabs
phazurlabsCOMMUNITY
Explore all skills by this author →
GitHub

component-patterns-code

Generate accessible React, TypeScript, SwiftUI, and CSS components with state handling.

35|13|Updated Feb 14, 2026
Search Tags:#accessibility#react#design tokens#ui components#swiftui#modern css
One-click install
npx skills add https://github.com/phazurlabs/ux-ui-mastery --skill component-patterns-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-patterns-code
Source: https://github.com/phazurlabs/ux-ui-mastery/tree/main/skills/component-patterns-code
Command: npx skills add https://github.com/phazurlabs/ux-ui-mastery --skill component-patterns-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about component-patterns-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible React components with complete state handling?▼

Building accessible React components requires semantic HTML, ARIA patterns, keyboard behavior, and complete state matrices covering loading, error, focus, and disabled states to ensure interfaces work with assistive technologies.

What is the best way to implement token-driven styling for SwiftUI components?▼

Token-driven styling for SwiftUI components uses design tokens to standardize responsive behavior and theming hooks across navigation patterns and UI primitives, ensuring consistent visual states without hardcoding values directly into the interface.

Can I use modern CSS to create accessible dialogs and toasts with reduced-motion support?▼

Modern CSS can create accessible dialogs and toasts by applying semantic structure, ARIA semantics, and reduced-motion support. These UI primitives must include complete state handling for focus management and responsive behavior.

How do I manage focus and keyboard interaction in accessible modal components?▼

Managing focus in accessible modal components requires ARIA patterns, semantic HTML, and keyboard behavior implementations. Focus management ensures screen reader support and proper interaction states across loading, error, and disabled conditions.

Does this approach support cross-platform UI patterns for React and TypeScript?▼

Cross-platform UI patterns support React, TypeScript, SwiftUI, and modern CSS by generating production-ready implementations with design tokens, responsive techniques, and accessibility-first behavior for common interface primitives like tables and inputs.

Related Skills

Explore More Software Engineering Skills→
OpenDCAIOpenDCAI
114

react

Standardize React component development with design tokens and TypeScript.

Official
Advanced
pascallammerspascallammers
1

accessibility-wcag

Ensure web applications meet WCAG 2.1/2.2 accessibility standards.

Community
Intermediate
KyaniteLabsKyaniteLabs
3

component-states

Generate interaction state matrices with ARIA semantics for UI components.

Official
Advanced
MoxyWolfLLCMoxyWolfLLC

screenshot-to-code

Convert UI screenshots into HTML, CSS, React, or Vue code.

Official
Intermediate