skills.rest
Cwuzto
CwuztoCOMMUNITY
Explore all skills by this author →
GitHub

ui-component-patterns

Design reusable React/TypeScript UI components with TypeScript prop typings and accessibility guidelines.

Updated Mar 4, 2026
Search Tags:#typescript#ui#accessibility#react#design-patterns#component-library
One-click install
npx skills add https://github.com/Cwuzto/DACN --skill ui-component-patterns-cwuzto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-component-patterns
Source: https://github.com/Cwuzto/DACN/tree/main/.agent/skills/ui-component-patterns
Command: npx skills add https://github.com/Cwuzto/DACN --skill ui-component-patterns-cwuzto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building consistent, maintainable UI across projects by standardizing component patterns and design-system practices.

Core Features & Use Cases

  • Prop-driven components with clear API and TypeScript typings.
  • Compound and polymorphic patterns enabling flexible UI composition.
  • Accessibility-conscious, composable primitives suitable for design systems.

Quick Start

Create a Button component using the recommended patterns and integrate it into a basic Card to see composition in action.

Frequently Asked Questions about ui-component-patterns

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

FAQPage Schema
How do I build reusable React components with TypeScript prop typings?▼

Build reusable React components by defining clear, prop-driven APIs with strict TypeScript typings to standardize frontend development and ensure maintainable UI across projects. This approach enforces type safety and predictable component behavior.

What are compound and polymorphic component patterns for design systems?▼

Compound and polymorphic component patterns enable flexible UI composition by allowing components to share implicit state and render as different HTML elements. These patterns create composable primitives suitable for scalable design systems.

When do I need accessibility-conscious primitives in my component library?▼

You need accessibility-conscious primitives when building complex UIs to ensure adherence to accessibility guidelines and best practices. They provide the foundational, composable elements required for standardized, inclusive frontend development.

Can I use these UI component patterns to standardize frontend development across multiple projects?▼

Yes, you can apply these UI component patterns to standardize frontend development across multiple projects. They enforce consistent design-system practices, TypeScript typings, and composition patterns to solve maintainability issues in growing applications.

What's the best way to structure a React component API for flexible composition?▼

Structure a React component API using prop-driven designs combined with compound and polymorphic patterns. This enables flexible UI composition while maintaining clear TypeScript typings and enforcing design-system practices across your application.

Related Skills

Explore More Design & Creative Skills→
randalmurphalrandalmurphal

frontend-patterns

Provide structured frontend patterns for React, Vue, and TypeScript projects.

Community
Intermediate
acaprinoacaprino
6

python-packaging

Create Python packages with .deb-like simplicity.

Community
Advanced
shuyu-labsshuyu-labs
288

frontend-design

Design frontend interfaces from user requirements into ready-to-run HTML/CSS/JS or React/Vue code.

Official
Advanced
DexploarerDexploarer
6

vue-component-generator

Generate Vue 3 components with TypeScript props, emits, and scoped styles.

Community
Intermediate