react-shadcn_skill

This skill helps you build accessible, themeable React UI with shadcn/ui and TanStack Form, accelerating component, form, and dialog development.

TypeScript

2

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill fusengine/agents --skill react-shadcn

SKILL.md6.2 KB

Overview

This skill provides a shadcn/ui integration for React projects with TypeScript and TanStack Form. It delivers accessible, copy-pasteable components built on Radix UI and styled with Tailwind, organized into a SOLID folder layout for predictable imports. Use it to rapidly scaffold forms, dialogs, tables, toasts, and other UI primitives while keeping full ownership of component code.

How this skill works

Before any implementation, spawn three agents via TeamCreate: an explorer to analyze your codebase, a research expert to verify shadcn/ui docs, and an MCP registry search agent to locate available components. The skill uses MCP tools to search, view, and fetch installation commands for shadcn components, installs packages with the approved command, scaffolds components into @/modules/cores/shadcn/components/ui/, and enforces the Field pattern for TanStack Form. After changes, run a validation agent (sniper) to verify integration and accessibility.

When to use it

Building React UI components in Vite or Create React App projects
Creating accessible, customizable forms with TanStack Form and Field pattern
Implementing overlays: dialogs, sheets, drawers, popovers, and tooltips
Adding data tables with sorting, filtering, and pagination
Implementing toasts, alerts, and other feedback components

Best practices

Always install components through the shadcn installer command (do not hand-create core components)
Use TanStack Form exclusively for form implementations and the Field/FieldLabel/FieldError pattern
Keep components under @/modules/cores/shadcn/components/ui/ following SOLID paths
Rely on Radix UI primitives for accessibility and keyboard support
Use Lucide icons and Sonner for toast notifications; theme via CSS variables in index.css

Example use cases

Scaffold a login form using Field, Input, Button and TanStack Form integration
Add an accessible dialog and command palette wired to existing routes
Create a data table component with server-side pagination, sorting, and filters
Integrate Sonner toasts for async form submission feedback
Customize a set of UI primitives with Tailwind CSS variants and cn() utility

FAQ

No. Use the approved shadcn add command to install and scaffold components; do not build the core components manually.

Which form library is supported?

This integration mandates TanStack Form and the Field pattern; React Hook Form is not supported here.

Where should components live in the repo?

Place installed components at @/modules/cores/shadcn/components/ui/ to follow the expected SOLID architecture.