skills.rest
SonPaier
SonPaierCOMMUNITY
Explore all skills by this author →
GitHub

carfect-design-system

Guide UI component placement, theming, and form patterns in the Carfect monorepo.

Updated Aug 23, 2026
Search Tags:#react#design system#shadcn/ui#tailwind css#monorepo#frontend development#ui components
One-click install
npx skills add https://github.com/SonPaier/carfect --skill carfect-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: carfect-design-system
Source: https://github.com/SonPaier/carfect/tree/main/.claude/skills/carfect-design-system
Command: npx skills add https://github.com/SonPaier/carfect --skill carfect-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to building and maintaining consistent, high-quality UI components within the Carfect monorepo, ensuring a unified design language and efficient development process.

Core Features & Use Cases

  • Component Architecture: Guides where to place new components (@shared/ui vs. app-specific).
  • Styling & Theming: Details Tailwind CSS v3 theming, color palettes, and responsive design strategies.
  • Form & Table Patterns: Outlines best practices for building forms with React Hook Form + Zod and implementing sortable, filterable, paginated tables.
  • Use Case: When developing a new feature that requires a custom button, this Skill will guide you on whether to create it in the shared UI library or within the specific app, and how to style it according to Carfect's design system.

Quick Start

Use the carfect-design-system skill to understand where to place a new UI button component.

Frequently Asked Questions about carfect-design-system

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

FAQPage Schema
How do I structure UI components in a React monorepo to separate shared libraries from app-specific features?▼

For React monorepo component architecture, place reusable UI in the shared library and feature-specific UI in the app directory. This separation maintains a unified design language across multiple apps while preventing code duplication.

How do I integrate shadcn/ui with Tailwind CSS v3 theming for a multi-app design system?▼

Integrating shadcn/ui with Tailwind CSS v3 involves configuring a centralized theme with consistent color palettes and responsive design strategies. This setup allows multiple applications within a monorepo to share the same visual foundation while supporting app-specific theming overrides.

What is the best way to build forms in a React design system using React Hook Form and Zod?▼

The best way to build forms in a React design system is combining React Hook Form for state management with Zod for schema validation. This pattern ensures controlled component behavior, type safety, and consistent error handling across all application forms.

How do I implement sortable and filterable tables with proper loading states in a React UI component library?▼

To implement sortable, filterable, and paginated tables in a React UI library, use controlled component patterns for state management. For loading states, utilize dedicated components like StarLoader, Loader2, and Skeletons to provide consistent visual feedback during data fetching.

Does this design system guide support responsive design and custom icon conventions for React frontend development?▼

Yes, the design system guide supports responsive design principles tailored for Tailwind CSS v3 and defines specific icon conventions for React frontend development. These guidelines ensure UI components adapt correctly across different screen sizes and maintain visual consistency.

When should I avoid placing a new UI component in the shared library of a monorepo?▼

You should avoid placing a UI component in the shared library when it is specific to a single application's feature rather than being reusable across multiple apps. Keeping app-specific components localized prevents unnecessary coupling and maintains the shared library as a true common foundation.

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
hotriluanhotriluan

ck:ui-styling

Implements accessible shadcn/ui components with Tailwind CSS in React frameworks.

Community
Intermediate
syncfusionsyncfusion
4

syncfusion-blazor-notifications

Provides Blazor UI notification primitives Toast, Message and Skeleton components with APIs, events, templates and styling for common UX patterns.

Official
Advanced
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced