skills.rest
KuschiKuschbert
KuschiKuschbertCOMMUNITY
Explore all skills by this author →
GitHub

UI COMPONENTS SKILL

Provide reusable UI components following the Cyber Carrot design system.

Updated Aug 27, 2026
Search Tags:#typescript#design system#frontend development#ui components#react components#cyber carrot
One-click install
npx skills add https://github.com/KuschiKuschbert/prepflow-web --skill ui-components-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI COMPONENTS SKILL
Source: https://github.com/KuschiKuschbert/prepflow-web/tree/main/components/ui
Command: npx skills add https://github.com/KuschiKuschbert/prepflow-web --skill ui-components-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of pre-built, reusable UI components that adhere to the Cyber Carrot design system, accelerating development and ensuring visual consistency across the application.

Core Features & Use Cases

  • Consistent Design: Implements the Cyber Carrot design system with dark-first styling, specific color tokens, and border-radius conventions.
  • Reusable Components: Offers essential UI elements like buttons, dialogs, modals, loading skeletons, icons, and tables.
  • Use Case: Quickly add a confirmation dialog to a delete action by using ConfirmDialog.tsx and its associated hook useConfirm, ensuring a consistent and accessible user experience.

Quick Start

Use the Icon component to add a trash icon with a red color and small size to your component.

Frequently Asked Questions about UI COMPONENTS SKILL

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

FAQPage Schema
How do I build React components with a consistent design system in TypeScript?▼

To build React components with a consistent design system in TypeScript, use a pre-built library of reusable UI elements that enforces specific color tokens and border-radius conventions for rapid web application development.

What is the best way to add an accessible confirmation dialog to a frontend application?▼

The best way to add an accessible confirmation dialog to a frontend application is by using a pre-built component paired with a custom hook like `useConfirm`, ensuring consistent interactive elements without manual styling.

Do I need specific color tokens to use dark-first UI components?▼

Yes, dark-first UI components require specific color tokens and border-radius conventions to maintain visual consistency and proper theming across web applications.

How do I display loading states for data tables in a web application?▼

To display loading states for data tables in a web application, use loading skeleton components from a UI component library to provide visual feedback while data is being fetched.

Can I customize icons in a React component library for different UI contexts?▼

Yes, you can customize icons in a React component library for different UI contexts by passing specific properties for color and size to match your visual design requirements.

What are the limitations of using a predefined design system for web application development?▼

Limitations of using a predefined design system for web application development include strict adherence to custom breakpoints and specific color tokens, which may restrict highly custom visual layouts outside the established conventions.

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

shadcn-ui

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

Community
Advanced
ak-eytherak-eyther

nextjs-app-router-patterns

Build Next.js 13+ App Router structures with server and client components.

Community
Intermediate
otto-poblyshotto-poblysh

tailwind-design-system

Convert UI styling into Tailwind CSS v4 design tokens and component variants.

Community
Intermediate
retz8retz8

frontend-design

Generate frontend interfaces with HTML/CSS, React, Vue, and design systems.

Community
Basic