skills.rest
Intellifill
IntellifillOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-components

Generates reusable React components styled with TailwindCSS and CVA variants for IntelliFill's frontend.

1|Updated Aug 8, 2025
Search Tags:#frontend#react#patterns#tailwind#cva#ui-components#component-template
One-click install
npx skills add https://github.com/Intellifill/IntelliFill --skill ui-components-intellifill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-components
Source: https://github.com/Intellifill/IntelliFill/tree/main/.claude/skills/ui-components
Command: npx skills add https://github.com/Intellifill/IntelliFill --skill ui-components-intellifill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes and accelerates UI component generation patterns for IntelliFill's frontend, reducing duplication and onboarding time.

Core Features & Use Cases

  • Component Template: Provides a standard React component scaffold with variant patterns using CVA and Tailwind.
  • Primitive Library Map: Documents base UI primitives (Button, Input, Dialog, etc.) and recommended project structure under quikadmin-web/src/components.
  • Guided Typing & Patterns: Includes common patterns for forms, modals, loading states, and data presentation to ensure consistency.
  • Use Case: A developer needs a new Button with consistent variants across pages; this Skill prescribes the component template, naming, and folder layout.

Quick Start

Use the ui-components skill to scaffold a new Button component under quikadmin-web/src/components/ui/.

Frequently Asked Questions about ui-components

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

FAQPage Schema
How do I generate reusable React components with consistent Tailwind and CVA variants?▼

Generate reusable React components by using a standard scaffold that applies class-variance-authority for variant management and TailwindCSS for styling, ensuring UI consistency across the codebase.

What is the recommended file structure for React UI primitives in a frontend project?▼

The recommended file structure places base UI primitives like Button, Input, and Dialog under a dedicated components directory, specifically targeting src/components/ui/ within the quikadmin-web project.

Can I use this approach to scaffold forms and modals in a React 18 application?▼

Yes, you can scaffold forms and modals in a React 18 application using guided typing and common patterns for dialogs, loading states, and data presentation to maintain frontend consistency.

Does this component generation method require class-variance-authority to handle styling?▼

Yes, the component generation method requires class-variance-authority to handle styling, prescribing it specifically to manage component variants and standardize React frontend development patterns.

What's the best way to standardize UI component patterns and reduce duplication in React?▼

The best way to standardize UI component patterns and reduce duplication is applying a prescribed template that documents base primitives and common patterns for forms, modals, and loading states.

Why do I need a standard component template for my React frontend development?▼

You need a standard component template to accelerate UI component generation, reduce onboarding time, and eliminate code duplication by enforcing consistent naming and folder layouts.

Related Skills

Explore More Software Engineering Skills→
sahaja9707sahaja9707

shadcn-ui

Initialize and configure shadcn/ui projects with React components and Tailwind CSS.

Community
Intermediate
cartridge-ggcartridge-gg

ui-architecture

Standardize frontend UI components with Radix, Tailwind, CVA, and Storybook.

Official
Intermediate
AdemKaoAdemKao

react-hook

Implement reusable React hooks with TypeScript templates and export conventions.

Community
Intermediate
moughamirmoughamir

tailwindcss-advanced-components

Standardize Tailwind UI components with CVA variants and data-attribute states.

Community
Intermediate