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

frontend-component

Scaffold React UI components with forwardRef, CVA variants, Radix UI, and TailwindCSS.

1|Updated Aug 8, 2025
Search Tags:#React#TailwindCSS#generate#UI components#forwardRef#Radix UI#CVA
One-click install
npx skills add https://github.com/Intellifill/IntelliFill --skill frontend-component-intellifill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-component
Source: https://github.com/Intellifill/IntelliFill/tree/main/.claude/skills/frontend-component
Command: npx skills add https://github.com/Intellifill/IntelliFill --skill frontend-component-intellifill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables teams to standardize and accelerate the creation of reusable React UI components for IntelliFill's frontend (quikadmin-web). It enforces patterns like forwardRef, CVA variants, Radix UI, and TailwindCSS to ensure consistency and quality across the product.

Core Features & Use Cases

  • Standardized templates for base UI, form controls, and page components.
  • Variant management via CVA to support default, elevated, and outlined styles.
  • Radix UI integration for accessible primitives (Dialog, Dropdown, etc.).
  • Clear organization guidance for component hierarchy within quikadmin-web.

Quick Start

Use the frontend-component skill to scaffold a Button component that follows the shadcn/ui pattern with forwardRef and a primary variant.

Frequently Asked Questions about frontend-component

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

FAQPage Schema
How do I generate reusable React UI components with CVA variants and TailwindCSS?▼

To generate reusable React UI components, this Skill scaffolds consistent code by applying forwardRef, CVA variant management, and TailwindCSS patterns. It outputs typed props and documented structures for base UI, form controls, and page components.

What's the best way to standardize React form controls using Radix UI and forwardRef?▼

Standardizing React form controls involves integrating Radix UI primitives for accessibility and forwardRef for ref forwarding. This Skill applies these patterns alongside CVA variants to guarantee accessible, reusable component structures.

Does this Skill work with shadcn/ui patterns for building base UI components?▼

Yes, this Skill works with shadcn/ui patterns to scaffold base UI components. It enforces forwardRef for ref management and applies CVA-based default, elevated, and outlined style variants to ensure component reusability.

How do I manage component variants in React using CVA and TailwindCSS?▼

Managing component variants in React uses CVA to define styles like default, elevated, and outlined within TailwindCSS. This Skill enforces CVA-based variant management to support consistent styling across generated UI components.

Can I use Radix UI primitives for accessible React components in a quikadmin-web project?▼

Yes, you can use Radix UI primitives to build accessible React components within quikadmin-web. This Skill integrates Radix UI for accessible primitives like Dialog and Dropdown while enforcing typed props and component hierarchy.

What patterns are enforced when scaffolding React UI components with this tool?▼

Scaffolding React UI components enforces forwardRef for ref forwarding, CVA for variant management, Radix UI for accessible primitives, and TailwindCSS for styling. This guarantees typed props, accessibility, and documented component structure.

Related Skills

Explore More Software Engineering Skills→
sahaja9707sahaja9707

shadcn-ui

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

Community
Intermediate
333-333-333333-333-333

flutter-widget-testing

Automate Flutter widget rendering, interaction, and accessibility validation tests.

Community
Intermediate
wpankwpank
11

design-system-components

Build reusable UI components with Surface primitives, CVA variants, and design tokens.

Community
Intermediate
planetaryescapeplanetaryescape

auto-generated-shadcn-ui-patterns

Define and reuse CVA-based UI variants for shadcn/ui components in React.

Official
Advanced