skills.rest
udecode
udecodeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

creating-components

Organize React component architecture for composable, accessible UI components.

434|33|Updated Jul 27, 2025
Search Tags:#architecture#a11y#react#components#create#design-system
One-click install
npx skills add https://github.com/udecode/better-convex --skill creating-components-udecode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: creating-components
Source: https://github.com/udecode/better-convex/tree/main/.claude/skills/creating-components
Command: npx skills add https://github.com/udecode/better-convex --skill creating-components-udecode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams design and reuse accessible React components by defining a clear architecture and data-attribute conventions.

Core Features & Use Cases

  • Reusable component patterns for common UI primitives with consistent accessibility attributes.
  • Guidance on composing complex components from smaller ones with predictable props contracts.

Quick Start

Create a simple, accessible Button component using the prescribed data-attribute patterns.

Frequently Asked Questions about creating-components

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

FAQPage Schema
How do I create accessible React components with predictable props contracts?▼

Building accessible React components requires defining clear architecture and data-attribute conventions. This skill organizes component composition patterns to ensure consistent accessibility attributes and predictable props contracts across reusable UI primitives.

What is the best way to structure a composable React design system architecture?▼

A composable React design system architecture relies on organizing component patterns with consistent data-attribute conventions. This skill structures front-end workflows by guiding composition of complex components from smaller ones with predictable props contracts.

How do I add accessibility attributes to reusable React UI components?▼

Adding accessibility attributes to reusable React components uses prescribed data-attribute patterns. This skill enforces a11y standards by organizing component architecture with consistent accessibility attributes, structured frontmatter, and documentation guidance for streamlined adoption.

Can I use this approach to compose complex React components from smaller ones?▼

Yes, this approach supports composing complex React components from smaller ones. The skill provides guidance on component composition with predictable props contracts, ensuring complex UI built from smaller primitives remains accessible, composable, and maintainable.

Do I need specific dependencies to build composable React components with this architecture?▼

No specific dependencies are required to build composable React components with this architecture. The skill operates independently, focusing on defining component architecture and data-attribute conventions for accessibility without relying on external libraries.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
arbazkhan971arbazkhan971
26

ui

Analyze UI component architecture and generate tokenized component library structures.

Community
Intermediate
AmidVoshakulAmidVoshakul

radix-ui-design-system

Build accessible design systems with Radix UI headless primitives.

Community
Advanced