skills.rest
ulasalyesil
ulasalyesilCOMMUNITY
Explore all skills by this author →
Website𝕏@ulasalyesilGitHub

components-build

Specify React UI component architecture with TypeScript and Tailwind CSS.

Updated Jul 15, 2023
Search Tags:#typescript#accessibility#react#design systems#tailwind css#ui components
One-click install
npx skills add https://github.com/ulasalyesil/personal-website-v2 --skill components-build-ulasalyesil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: components-build
Source: https://github.com/ulasalyesil/personal-website-v2/tree/main/.agents/skills/components-build
Command: npx skills add https://github.com/ulasalyesil/personal-website-v2 --skill components-build-ulasalyesil

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive specification and set of guidelines for building modern, composable, and accessible UI components in React, ensuring consistency and best practices across projects.

Core Features & Use Cases

  • Component Architecture: Defines principles for composability, accessibility, and customization.
  • TypeScript Integration: Offers patterns for type-safe component interfaces.
  • Styling Standards: Guides the use of Tailwind CSS, cn utility, and CVA for predictable styling.
  • Use Case: When developing a new design system or refactoring existing component libraries, use this Skill to ensure all components adhere to modern standards for accessibility, reusability, and developer experience.

Quick Start

Use the components-build skill to review the accessibility guidelines for a new button component.

Frequently Asked Questions about components-build

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

FAQPage Schema
How do I build accessible React UI components with TypeScript?▼

Build accessible React UI components using detailed specifications for composability, state management, and TypeScript typing to ensure consistency and best practices across projects.

What's the best way to structure a React design system using Tailwind CSS?▼

Structure a React design system using Tailwind CSS standards, the cn utility, and CVA for predictable styling, alongside defined design tokens and distribution strategies.

How do I implement type-safe polymorphism in a React component library?▼

Implement type-safe polymorphism in a React component library using TypeScript integration patterns that define type-safe component interfaces for flexible and reusable composition.

Can I use this approach to refactor an existing component library?▼

Refactor existing component libraries by applying comprehensive guidelines for accessibility, reusability, and developer experience to ensure all components adhere to modern standards.

What accessibility guidelines should I follow for modern UI components?▼

Follow accessibility guidelines integrated into the component architecture specification, ensuring modern UI components are fully accessible and adhere to best practices for state management and composition.

How do I manage design tokens for a React UI component library?▼

Manage design tokens for a React UI component library by utilizing the specification's distribution strategies and styling standards to maintain visual consistency across all components.

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
acaprinoacaprino
6

python-packaging

Create Python packages with .deb-like simplicity.

Community
Advanced
DITEKmaxDITEKmax

baseline-ui

Enforce Tailwind CSS UI and styling constraints for accessibility, animation, typography, and layout.

Community
Intermediate
fgarofalo56fgarofalo56
6

tailwind-ui

Guide Tailwind CSS styling for responsive UI components with utility classes.

Community
Intermediate