Skills
.Work. You
Rest

React + shadcn/ui Skill

Official

Build modern React UIs with shadcn/ui.

Software Engineering#react#shadcn/ui#tailwind css#frontend development#ui components#inertia.js
Authorlitestar-org
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive guide and reusable patterns for building modern, accessible, and performant user interfaces using React, shadcn/ui components, and Tailwind CSS, integrated with Inertia.js for server-driven routing.

Core Features & Use Cases

  • Component Patterns: Demonstrates common patterns for creating React components, including layouts, forms, and data display.
  • shadcn/ui Integration: Shows how to effectively use pre-built, customizable UI components for rapid development.
  • Form Handling: Illustrates form creation and submission using react-hook-form and Inertia.js.
  • Styling with Tailwind CSS: Provides examples of responsive and utility-first CSS for efficient styling.
  • Use Case: Quickly scaffold a new feature page in a Litestar-Inertia application, complete with a form for user input and a card to display data, all styled consistently with shadcn/ui.

Quick Start

Use the react skill to generate a new page component for displaying a list of items, incorporating a card layout and a form for creating new items.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: React + shadcn/ui Skill
Download link: https://github.com/litestar-org/litestar-fullstack-inertia/archive/main.zip#react-shadcn-ui-skill

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.