Initial commit
This commit is contained in:
Zhongwei Li
12
.claude-plugin/plugin.json
Normal file
12
.claude-plugin/plugin.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "tailwind-shadcn-ui-setup",
|
||||
"description": "This skill should be used when setting up, configuring, or initializing Tailwind CSS (v3 or v4) and shadcn/ui for Next.js 16 App Router projects. Configure dark mode, design tokens, base layout with header/sidebar, accessibility defaults, and generate example components. Includes comprehensive setup automation, theme customization, and production-ready patterns. Use when the user requests \"setup Tailwind\", \"configure shadcn/ui\", \"add dark mode\", \"initialize design system\", or \"setup UI framework",
|
||||
"version": "1.0.0",
|
||||
"author": {
|
||||
"name": "Hope Overture",
|
||||
"email": "support@worldbuilding-app-skills.dev"
|
||||
},
|
||||
"skills": [
|
||||
"./skills"
|
||||
]
|
||||
}
|
||||
3
README.md
Normal file
3
README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# tailwind-shadcn-ui-setup
|
||||
|
||||
This skill should be used when setting up, configuring, or initializing Tailwind CSS (v3 or v4) and shadcn/ui for Next.js 16 App Router projects. Configure dark mode, design tokens, base layout with header/sidebar, accessibility defaults, and generate example components. Includes comprehensive setup automation, theme customization, and production-ready patterns. Use when the user requests "setup Tailwind", "configure shadcn/ui", "add dark mode", "initialize design system", or "setup UI framework
|
||||
113
plugin.lock.json
Normal file
113
plugin.lock.json
Normal file
@@ -0,0 +1,113 @@
|
||||
{
|
||||
"$schema": "internal://schemas/plugin.lock.v1.json",
|
||||
"pluginId": "gh:hopeoverture/worldbuilding-app-skills:plugins/tailwind-shadcn-ui-setup",
|
||||
"normalized": {
|
||||
"repo": null,
|
||||
"ref": "refs/tags/v20251128.0",
|
||||
"commit": "2a453c582511149b870f486b5ce27ae5a13a6e79",
|
||||
"treeHash": "076df72864866cc70e4f826cb101696866bc6e89804fe471d9f08f622f9826e2",
|
||||
"generatedAt": "2025-11-28T10:17:30.212016Z",
|
||||
"toolVersion": "publish_plugins.py@0.2.0"
|
||||
},
|
||||
"origin": {
|
||||
"remote": "git@github.com:zhongweili/42plugin-data.git",
|
||||
"branch": "master",
|
||||
"commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
|
||||
"repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
|
||||
},
|
||||
"manifest": {
|
||||
"name": "tailwind-shadcn-ui-setup",
|
||||
"description": "This skill should be used when setting up, configuring, or initializing Tailwind CSS (v3 or v4) and shadcn/ui for Next.js 16 App Router projects. Configure dark mode, design tokens, base layout with header/sidebar, accessibility defaults, and generate example components. Includes comprehensive setup automation, theme customization, and production-ready patterns. Use when the user requests \"setup Tailwind\", \"configure shadcn/ui\", \"add dark mode\", \"initialize design system\", or \"setup UI framework",
|
||||
"version": "1.0.0"
|
||||
},
|
||||
"content": {
|
||||
"files": [
|
||||
{
|
||||
"path": "README.md",
|
||||
"sha256": "fba890e745615aa495f5d54ab4c5d1eb085900ded4074c062da3423418a7bfa4"
|
||||
},
|
||||
{
|
||||
"path": ".claude-plugin/plugin.json",
|
||||
"sha256": "0755cac23890c7efaad50afadff34524cc71bdb882294fe0739e7a2019142a9f"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/SKILL.md",
|
||||
"sha256": "fb6bf12616c516607ece08f5844e0c7d2d645f51a1549222fd6a318c1b5a6d41"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/references/tailwind-v4-migration.md",
|
||||
"sha256": "b32a1f32f1c51d9ab2c5ee726ff3dda295a5d0c32fde1d8264231a02386f4bf0"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/references/theme-tokens.md",
|
||||
"sha256": "160b0a1232386e57ddfb96870610bcba937478f60aafa84a91c1c684fea655cf"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/references/accessibility-checklist.md",
|
||||
"sha256": "1c0b1d4d39775a19db69a6ecd44a2de5897aa6084113692a215cd47dfc0b102a"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/references/shadcn-component-list.md",
|
||||
"sha256": "33b1400d39c832b2ddab7c80b38a441501c1c292cc0dec5d49809407012365ff"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/scripts/setup_tailwind_shadcn.py",
|
||||
"sha256": "6712fc39a1bc5222dfe6c2af2b06b23e442b5e705f0589da9707a4c4c51b2d4d"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/postcss.config.js.template",
|
||||
"sha256": "251ecddd4672c9cf467547e3dc535de00ad2129df26e7e7ae728fa4e5ac45fc5"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/tailwind.config.ts.template",
|
||||
"sha256": "00e4e54e5edb802f3e9b6e6522a31558977be08750429d8aaffc11bc6e226adc"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/globals.css.template",
|
||||
"sha256": "5a1cba6b1bdf564e91d110f44240eb8f77cf8eff5ac2653aef6f4536190ff7e4"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/app/page.tsx.template",
|
||||
"sha256": "97113ed69a36b408b01aaf3eed4b6cca68682cd1d3787ac8e99cea06caefec51"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/app/layout.tsx.template",
|
||||
"sha256": "b90c038a0299b4f191515269f96e9a8db694189d42ee6a10032a7e2912be56c4"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/app/examples/layout.tsx",
|
||||
"sha256": "12b9c084c56857ab4fa688c5229875cfcde36877f911f9246b7e4fcef4210778"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/app/examples/forms/page.tsx",
|
||||
"sha256": "50cd40620bedcbeffad94cbb1d4234a4b82e37d06d590d013c8f23c8ba5cfc8b"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/app/examples/theme/page.tsx",
|
||||
"sha256": "56199431367bab563056200774d29d503afc1afcbda516a5adacc400997c7fca"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/app/examples/dialogs/page.tsx",
|
||||
"sha256": "fad97b8a80358cb48062a6345ac414847676fa7373873557504eb3179bb1e20b"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/components/theme-provider.tsx",
|
||||
"sha256": "7d81e692e911cfafa5bf7c210334a0e655a87d8851cc5be4ce1799e4d14cdd97"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/components/mode-toggle.tsx",
|
||||
"sha256": "77a94853d8a6da873f5de0f90a44c9800db2af276ad33469a974a3863bd1bdd3"
|
||||
},
|
||||
{
|
||||
"path": "skills/tailwind-shadcn-ui-setup/assets/components/app-shell.tsx",
|
||||
"sha256": "1b815c60babff5c58b2c0fe53d33a9f8a07f3968a992702ff2ff5e55dc08b51a"
|
||||
}
|
||||
],
|
||||
"dirSha256": "076df72864866cc70e4f826cb101696866bc6e89804fe471d9f08f622f9826e2"
|
||||
},
|
||||
"security": {
|
||||
"scannedAt": null,
|
||||
"scannerVersion": null,
|
||||
"flags": []
|
||||
}
|
||||
}
|
||||
493
skills/tailwind-shadcn-ui-setup/SKILL.md
Normal file
493
skills/tailwind-shadcn-ui-setup/SKILL.md
Normal file
@@ -0,0 +1,493 @@
|
||||
---
|
||||
name: tailwind-shadcn-ui-setup
|
||||
description: This skill should be used when setting up, configuring, or initializing Tailwind CSS (v3 or v4) and shadcn/ui for Next.js 16 App Router projects. Configure dark mode, design tokens, base layout with header/sidebar, accessibility defaults, and generate example components. Includes comprehensive setup automation, theme customization, and production-ready patterns. Use when the user requests "setup Tailwind", "configure shadcn/ui", "add dark mode", "initialize design system", or "setup UI framework" for Next.js projects.
|
||||
---
|
||||
|
||||
# Tailwind + shadcn/ui Setup for Next.js 16
|
||||
|
||||
## Overview
|
||||
|
||||
Configure a production-ready Tailwind CSS (v3/v4) + shadcn/ui setup for Next.js 16 App Router projects. This skill automates dependency installation, configuration, component generation, and provides:
|
||||
|
||||
- **Tailwind CSS v4-ready configuration** (v3 with forward-compatible patterns)
|
||||
- **shadcn/ui components** (Radix UI-based, fully accessible)
|
||||
- **Dark mode** with `next-themes` (class strategy)
|
||||
- **Base application layout** (header, optional sidebar, responsive)
|
||||
- **Design token system** (CSS variables for easy theming)
|
||||
- **Accessibility defaults** (WCAG 2.1 AA compliant)
|
||||
- **Example pages** (forms, dialogs, theme showcase)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before running this skill, verify:
|
||||
|
||||
1. **Next.js 16 project exists** with App Router (`app/` directory)
|
||||
2. **Package manager**: npm (script uses `npm install`)
|
||||
3. **Project structure**: Valid `package.json` at project root
|
||||
4. **TypeScript**: Recommended (all templates use `.tsx`/`.ts`)
|
||||
|
||||
To verify:
|
||||
|
||||
```bash
|
||||
# Check Next.js version
|
||||
cat package.json | grep "\"next\":"
|
||||
|
||||
# Confirm app/ directory exists
|
||||
ls -la app/
|
||||
```
|
||||
|
||||
## Setup Workflow
|
||||
|
||||
### Step 1: Gather User Requirements
|
||||
|
||||
Use `AskUserQuestion` tool to collect configuration preferences:
|
||||
|
||||
1. **Enable dark mode?** (default: yes)
|
||||
- Installs `next-themes`, adds `ThemeProvider`, creates mode toggle
|
||||
2. **Theme preset** (zinc | slate | neutral, default: zinc)
|
||||
- Determines base color palette in CSS variables
|
||||
3. **Include sidebar layout?** (default: yes)
|
||||
- Adds responsive sidebar navigation using `Sheet` component
|
||||
4. **Include example pages?** (default: yes)
|
||||
- Generates example pages for forms, dialogs, theme showcase
|
||||
|
||||
### Step 2: Run Automation Script
|
||||
|
||||
Execute the Python setup script to install dependencies and initialize shadcn/ui:
|
||||
|
||||
```bash
|
||||
cd /path/to/nextjs-project
|
||||
python /path/to/skill/scripts/setup_tailwind_shadcn.py
|
||||
```
|
||||
|
||||
The script will:
|
||||
- Detect existing Tailwind/shadcn installations
|
||||
- Install required npm packages (non-interactive)
|
||||
- Create `components.json` for shadcn/ui
|
||||
- Add baseline shadcn components (button, card, input, label, dialog, separator)
|
||||
- Create `lib/utils.ts` with `cn()` helper
|
||||
|
||||
### Step 3: Copy Configuration Files
|
||||
|
||||
Copy and process template files from `assets/` directory:
|
||||
|
||||
1. **Tailwind Configuration**
|
||||
```bash
|
||||
# Copy and create
|
||||
cp assets/tailwind.config.ts.template project/tailwind.config.ts
|
||||
cp assets/postcss.config.js.template project/postcss.config.js
|
||||
```
|
||||
|
||||
2. **Global Styles**
|
||||
```bash
|
||||
# Copy and replace {{THEME_PRESET}} with user's choice
|
||||
cp assets/globals.css.template project/app/globals.css
|
||||
# Replace: {{THEME_PRESET}} → zinc | slate | neutral
|
||||
```
|
||||
|
||||
3. **Utility Functions**
|
||||
```bash
|
||||
cp assets/lib/utils.ts project/lib/utils.ts
|
||||
```
|
||||
|
||||
### Step 4: Add Core Components
|
||||
|
||||
Copy theme and layout components from `assets/components/`:
|
||||
|
||||
1. **Theme Provider** (if dark mode enabled)
|
||||
```bash
|
||||
cp assets/components/theme-provider.tsx project/components/theme-provider.tsx
|
||||
cp assets/components/mode-toggle.tsx project/components/mode-toggle.tsx
|
||||
```
|
||||
|
||||
2. **App Shell** (if sidebar layout enabled)
|
||||
```bash
|
||||
cp assets/components/app-shell.tsx project/components/app-shell.tsx
|
||||
```
|
||||
|
||||
### Step 5: Update App Layout
|
||||
|
||||
Update or create `app/layout.tsx`:
|
||||
|
||||
```bash
|
||||
# If layout.tsx exists, carefully merge changes
|
||||
# If not, copy template
|
||||
cp assets/app/layout.tsx.template project/app/layout.tsx
|
||||
```
|
||||
|
||||
**Key additions:**
|
||||
- Import `globals.css`
|
||||
- Wrap with `ThemeProvider` (if dark mode enabled)
|
||||
- Add skip link for accessibility
|
||||
- Include `<Toaster />` from Sonner for notifications
|
||||
|
||||
**Merge strategy if layout exists:**
|
||||
- Add missing imports at top
|
||||
- Wrap existing content with `ThemeProvider`
|
||||
- Add skip link before main content
|
||||
- Add `Toaster` before closing `body` tag
|
||||
- Ensure `suppressHydrationWarning` on `<html>` tag
|
||||
|
||||
### Step 6: Generate Example Pages (Optional)
|
||||
|
||||
If user requested examples, copy example pages:
|
||||
|
||||
```bash
|
||||
# Copy home page
|
||||
cp assets/app/page.tsx.template project/app/page.tsx
|
||||
|
||||
# Copy examples directory structure
|
||||
cp -r assets/app/examples/ project/app/examples/
|
||||
```
|
||||
|
||||
**Example pages include:**
|
||||
- **Homepage** (`app/page.tsx`): Hero, features grid, CTA
|
||||
- **Forms** (`app/examples/forms/page.tsx`): Contact form, validation patterns
|
||||
- **Dialogs** (`app/examples/dialogs/page.tsx`): Modal examples, A11y notes
|
||||
- **Theme** (`app/examples/theme/page.tsx`): Color tokens, customization guide
|
||||
|
||||
### Step 7: Add Additional shadcn Components
|
||||
|
||||
Install additional components as needed:
|
||||
|
||||
```bash
|
||||
# Common components for examples
|
||||
npx shadcn-ui@latest add dropdown-menu
|
||||
npx shadcn-ui@latest add sheet
|
||||
npx shadcn-ui@latest add separator
|
||||
|
||||
# Optional: Form components
|
||||
npx shadcn-ui@latest add form
|
||||
npx shadcn-ui@latest add checkbox
|
||||
npx shadcn-ui@latest add select
|
||||
```
|
||||
|
||||
Consult `references/shadcn-component-list.md` for full component catalog.
|
||||
|
||||
### Step 8: Verify Installation
|
||||
|
||||
Run checks to ensure setup is complete:
|
||||
|
||||
```bash
|
||||
# Check for TypeScript errors
|
||||
npx tsc --noEmit
|
||||
|
||||
# Start dev server
|
||||
npm run dev
|
||||
|
||||
# Open browser to http://localhost:3000
|
||||
```
|
||||
|
||||
**Visual verification:**
|
||||
- Page loads without errors
|
||||
- Dark mode toggle works (if enabled)
|
||||
- Colors match theme preset
|
||||
- Example pages render correctly (if included)
|
||||
- No accessibility warnings in console
|
||||
|
||||
### Step 9: Document Changes
|
||||
|
||||
Add a "Design System & UI" section to project `README.md`:
|
||||
|
||||
````markdown
|
||||
## Design System & UI
|
||||
|
||||
This project uses Tailwind CSS and shadcn/ui for styling and components.
|
||||
|
||||
### Customizing Colors
|
||||
|
||||
Edit CSS variables in `app/globals.css`:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--primary: 270 80% 45%; /* Your brand color (HSL) */
|
||||
--radius: 0.75rem; /* Border radius */
|
||||
}
|
||||
```
|
||||
|
||||
Test contrast ratios: https://webaim.org/resources/contrastchecker/
|
||||
|
||||
### Adding Components
|
||||
|
||||
```bash
|
||||
# Add any shadcn/ui component
|
||||
npx shadcn-ui@latest add [component-name]
|
||||
|
||||
# Example: Add a combobox
|
||||
npx shadcn-ui@latest add combobox
|
||||
```
|
||||
|
||||
Available components: https://ui.shadcn.com/docs/components
|
||||
|
||||
### Dark Mode
|
||||
|
||||
Toggle theme programmatically:
|
||||
|
||||
```tsx
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
export function Example() {
|
||||
const { theme, setTheme } = useTheme()
|
||||
// theme: 'light' | 'dark' | 'system'
|
||||
// setTheme('dark')
|
||||
}
|
||||
```
|
||||
|
||||
### Accessibility
|
||||
|
||||
- All components meet WCAG 2.1 Level AA
|
||||
- Focus indicators on all interactive elements
|
||||
- Keyboard navigation supported
|
||||
- Screen reader compatible
|
||||
|
||||
See `references/accessibility-checklist.md` for full guidelines.
|
||||
````
|
||||
|
||||
## Configuration Options
|
||||
|
||||
### Theme Presets
|
||||
|
||||
**Zinc (default)** - Cool, neutral gray tones:
|
||||
```css
|
||||
--primary: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
```
|
||||
|
||||
**Slate** - Slightly cooler, tech-focused:
|
||||
```css
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
```
|
||||
|
||||
**Neutral** - True neutral grays:
|
||||
```css
|
||||
--primary: 0 0% 9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
```
|
||||
|
||||
Customize further by editing `app/globals.css` `:root` and `.dark` blocks.
|
||||
|
||||
### Tailwind v4 Considerations
|
||||
|
||||
Check Tailwind version before setup:
|
||||
|
||||
```bash
|
||||
npm view tailwindcss version
|
||||
```
|
||||
|
||||
**If v4.0.0+ is available:**
|
||||
- Use v4 configuration format (`@theme` directive)
|
||||
- Consult `references/tailwind-v4-migration.md`
|
||||
|
||||
**If v4 not available (current default):**
|
||||
- Use v3 with forward-compatible CSS variables
|
||||
- Add comments in generated files: `// TODO: Upgrade to Tailwind v4 when stable`
|
||||
|
||||
### Sidebar Layout Options
|
||||
|
||||
If `sidebarLayout = true`:
|
||||
- Uses `AppShell` component with responsive sidebar
|
||||
- Mobile: Hamburger menu → `Sheet` (slide-over)
|
||||
- Desktop: Fixed sidebar with navigation items
|
||||
|
||||
If `sidebarLayout = false`:
|
||||
- Simple header + content layout
|
||||
- Header contains site title + actions (mode toggle)
|
||||
|
||||
Users can customize navigation in layout files by passing `navigation` prop:
|
||||
|
||||
```tsx
|
||||
<AppShell
|
||||
navigation={[
|
||||
{ title: 'Home', href: '/', icon: Home },
|
||||
{ title: 'About', href: '/about', icon: Info },
|
||||
]}
|
||||
siteTitle="My App"
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Issue: npm install fails
|
||||
|
||||
**Cause**: Network issues, registry timeout, or package conflicts
|
||||
|
||||
**Solution**:
|
||||
```bash
|
||||
# Clear npm cache
|
||||
npm cache clean --force
|
||||
|
||||
# Retry with verbose logging
|
||||
npm install --verbose
|
||||
|
||||
# Or use specific registry
|
||||
npm install --registry https://registry.npmjs.org/
|
||||
```
|
||||
|
||||
### Issue: TypeScript errors in components
|
||||
|
||||
**Cause**: Missing type definitions or tsconfig issues
|
||||
|
||||
**Solution**:
|
||||
```bash
|
||||
# Install missing types
|
||||
npm install --save-dev @types/react @types/react-dom @types/node
|
||||
|
||||
# Check tsconfig.json paths
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Issue: Dark mode not working
|
||||
|
||||
**Cause**: ThemeProvider not wrapping content, or `suppressHydrationWarning` missing
|
||||
|
||||
**Solution**:
|
||||
1. Verify `<html suppressHydrationWarning>` in layout
|
||||
2. Ensure `ThemeProvider` wraps `{children}`
|
||||
3. Check `tailwind.config.ts` has `darkMode: 'class'`
|
||||
|
||||
### Issue: shadcn components not found
|
||||
|
||||
**Cause**: `components.json` misconfigured or components not installed
|
||||
|
||||
**Solution**:
|
||||
```bash
|
||||
# Reinitialize shadcn/ui
|
||||
npx shadcn-ui@latest init
|
||||
|
||||
# Re-add components
|
||||
npx shadcn-ui@latest add button card input
|
||||
```
|
||||
|
||||
### Issue: Focus styles not visible
|
||||
|
||||
**Cause**: Global CSS focus styles not applied
|
||||
|
||||
**Solution**:
|
||||
- Verify `app/globals.css` includes focus styles layer
|
||||
- Check `*:focus-visible` rule is present
|
||||
- Ensure `--ring` CSS variable is defined
|
||||
|
||||
## Resources
|
||||
|
||||
This skill bundles comprehensive resources for reference:
|
||||
|
||||
### References (Loaded as Needed)
|
||||
|
||||
- **`tailwind-v4-migration.md`**: Tailwind v3 vs v4 differences, migration guide
|
||||
- **`shadcn-component-list.md`**: Complete shadcn/ui component catalog with usage examples
|
||||
- **accessibility-checklist.md**: WCAG 2.1 AA compliance checklist, best practices
|
||||
- **`theme-tokens.md`**: Design token system, color customization guide
|
||||
|
||||
To read a reference:
|
||||
```bash
|
||||
# From skill directory
|
||||
cat references/theme-tokens.md
|
||||
```
|
||||
|
||||
### Scripts (Executable)
|
||||
|
||||
- **`setup_tailwind_shadcn.py`**: Main automation script for dependency installation and configuration
|
||||
|
||||
Execute directly:
|
||||
```bash
|
||||
python scripts/setup_tailwind_shadcn.py
|
||||
```
|
||||
|
||||
### Assets (Templates for Output)
|
||||
|
||||
- **Config templates**: `tailwind.config.ts.template`, `postcss.config.js.template`, `globals.css.template`
|
||||
- **Component templates**: `theme-provider.tsx`, `mode-toggle.tsx`, `app-shell.tsx`
|
||||
- **Utility templates**: `lib/utils.ts`
|
||||
- **Page templates**: `app/layout.tsx.template`, `app/page.tsx.template`
|
||||
- **Example pages**: `app/examples/forms/`, `app/examples/dialogs/`, `app/examples/theme/`
|
||||
|
||||
Copy and customize as needed for the target project.
|
||||
|
||||
## Best Practices
|
||||
|
||||
### 1. Always Test Both Themes
|
||||
|
||||
After setup, manually toggle dark mode and verify:
|
||||
- Color contrast ratios meet WCAG standards
|
||||
- All text remains readable
|
||||
- Focus indicators are visible
|
||||
- Components render correctly
|
||||
|
||||
### 2. Use Semantic Tokens
|
||||
|
||||
```tsx
|
||||
[OK] Good (semantic)
|
||||
<div className="bg-primary text-primary-foreground">
|
||||
|
||||
[ERROR] Bad (hard-coded)
|
||||
<div className="bg-blue-600 text-white">
|
||||
```
|
||||
|
||||
### 3. Maintain Type Safety
|
||||
|
||||
Use TypeScript for all components:
|
||||
```tsx
|
||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'default' | 'destructive' | 'outline'
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Keep Accessibility in Mind
|
||||
|
||||
- Always pair labels with inputs
|
||||
- Provide `aria-label` for icon-only buttons
|
||||
- Test keyboard navigation
|
||||
- Use semantic HTML
|
||||
|
||||
### 5. Document Customizations
|
||||
|
||||
When customizing tokens or components, document changes in project README or inline comments.
|
||||
|
||||
## Post-Setup Tasks
|
||||
|
||||
After running this skill, recommend users:
|
||||
|
||||
1. **Customize brand colors**
|
||||
- Edit `--primary` in `app/globals.css`
|
||||
- Test contrast ratios
|
||||
|
||||
2. **Add more components**
|
||||
- Run `npx shadcn-ui add [component]` as needed
|
||||
- See `references/shadcn-component-list.md` for options
|
||||
|
||||
3. **Configure responsive breakpoints**
|
||||
- Adjust Tailwind `screens` in `tailwind.config.ts` if needed
|
||||
|
||||
4. **Set up linting**
|
||||
- Install `eslint-plugin-jsx-a11y` for accessibility linting
|
||||
- Add Prettier + Tailwind plugin for formatting
|
||||
|
||||
5. **Test production build**
|
||||
```bash
|
||||
npm run build
|
||||
npm start
|
||||
```
|
||||
|
||||
## Summary
|
||||
|
||||
This skill provides a complete, production-ready Tailwind CSS + shadcn/ui setup for Next.js 16 App Router projects. It handles:
|
||||
|
||||
[OK] Dependency installation (Tailwind, shadcn/ui, next-themes)
|
||||
[OK] Configuration (Tailwind config, PostCSS, global CSS)
|
||||
[OK] Dark mode setup (ThemeProvider, toggle component)
|
||||
[OK] Base layout (responsive header, optional sidebar)
|
||||
[OK] Design tokens (semantic CSS variables)
|
||||
[OK] Accessibility (WCAG 2.1 AA, keyboard nav, screen readers)
|
||||
[OK] Example pages (forms, dialogs, theme showcase)
|
||||
[OK] Documentation (README updates, customization guides)
|
||||
|
||||
The setup is forward-compatible with Tailwind v4 and follows official Anthropic skill best practices.
|
||||
@@ -0,0 +1,266 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export default function DialogsPage() {
|
||||
const [isOpen, setIsOpen] = React.useState(false)
|
||||
|
||||
const handleSave = () => {
|
||||
toast.success('Changes saved successfully!')
|
||||
setIsOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-4xl py-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold">Dialog Examples</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">
|
||||
Modal dialogs with focus trapping and keyboard navigation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{/* Basic Dialog */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Basic Dialog</CardTitle>
|
||||
<CardDescription>Simple dialog with title and content</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button>Open Dialog</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Welcome!</DialogTitle>
|
||||
<DialogDescription>
|
||||
This is a basic dialog example. Press ESC or click outside to
|
||||
close.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Dialogs automatically handle:
|
||||
</p>
|
||||
<ul className="ml-6 mt-2 list-disc text-sm text-muted-foreground">
|
||||
<li>Focus trapping</li>
|
||||
<li>Keyboard navigation (ESC to close)</li>
|
||||
<li>Backdrop click to dismiss</li>
|
||||
<li>Return focus on close</li>
|
||||
</ul>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button onClick={() => toast.success('Action completed!')}>
|
||||
Confirm
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Dialog with Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Dialog with Form</CardTitle>
|
||||
<CardDescription>Dialog containing a form with inputs</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>Edit Profile</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Profile</DialogTitle>
|
||||
<DialogDescription>
|
||||
Make changes to your profile here. Click save when you're
|
||||
done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input id="name" defaultValue="John Doe" />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
defaultValue="john@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave}>Save Changes</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Confirmation Dialog */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Confirmation Dialog</CardTitle>
|
||||
<CardDescription>Destructive action confirmation</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="destructive">Delete Item</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Are you absolutely sure?</DialogTitle>
|
||||
<DialogDescription>
|
||||
This action cannot be undone. This will permanently delete
|
||||
your item and remove your data from our servers.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
toast.error('Item deleted')
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Info Dialog */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Information Dialog</CardTitle>
|
||||
<CardDescription>Display information without actions</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Show Info</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>About This App</DialogTitle>
|
||||
<DialogDescription>
|
||||
Built with modern web technologies
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-medium">Stack</h4>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li>• Next.js 16 with App Router</li>
|
||||
<li>• React 19</li>
|
||||
<li>• Tailwind CSS v3/v4</li>
|
||||
<li>• shadcn/ui components</li>
|
||||
<li>• TypeScript</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-medium">Features</h4>
|
||||
<ul className="space-y-1 text-sm text-muted-foreground">
|
||||
<li>• Dark mode support</li>
|
||||
<li>• Fully accessible (WCAG 2.1 AA)</li>
|
||||
<li>• Type-safe</li>
|
||||
<li>• Production-ready</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Accessibility Info */}
|
||||
<Card className="mt-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Dialog Accessibility</CardTitle>
|
||||
<CardDescription>
|
||||
shadcn/ui dialogs are built on Radix UI with full accessibility
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4 text-sm">
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">Keyboard Navigation</h4>
|
||||
<ul className="ml-6 list-disc space-y-1 text-muted-foreground">
|
||||
<li>
|
||||
<kbd className="rounded bg-muted px-1.5 py-0.5">ESC</kbd> -
|
||||
Close dialog
|
||||
</li>
|
||||
<li>
|
||||
<kbd className="rounded bg-muted px-1.5 py-0.5">Tab</kbd> -
|
||||
Move focus forward
|
||||
</li>
|
||||
<li>
|
||||
<kbd className="rounded bg-muted px-1.5 py-0.5">
|
||||
Shift + Tab
|
||||
</kbd>{' '}
|
||||
- Move focus backward
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">Screen Reader Support</h4>
|
||||
<ul className="ml-6 list-disc space-y-1 text-muted-foreground">
|
||||
<li>
|
||||
Dialog title is announced via{' '}
|
||||
<code className="rounded bg-muted px-1">aria-labelledby</code>
|
||||
</li>
|
||||
<li>
|
||||
Description is read via{' '}
|
||||
<code className="rounded bg-muted px-1">aria-describedby</code>
|
||||
</li>
|
||||
<li>Focus is trapped within dialog when open</li>
|
||||
<li>Focus returns to trigger element on close</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">Mouse/Touch Support</h4>
|
||||
<ul className="ml-6 list-disc space-y-1 text-muted-foreground">
|
||||
<li>Click backdrop to dismiss (optional)</li>
|
||||
<li>Close button in top-right corner</li>
|
||||
<li>Scroll content if overflowing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export default function FormsPage() {
|
||||
const [isSubmitting, setIsSubmitting] = React.useState(false)
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
const formData = new FormData(event.currentTarget)
|
||||
const data = {
|
||||
name: formData.get('name'),
|
||||
email: formData.get('email'),
|
||||
message: formData.get('message'),
|
||||
}
|
||||
|
||||
// Simulate API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
console.log('Form submitted:', data)
|
||||
toast.success('Form submitted successfully!')
|
||||
|
||||
// Reset form
|
||||
event.currentTarget.reset()
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-4xl py-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold">Form Examples</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">
|
||||
Accessible form components with HTML5 validation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{/* Basic Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Contact Form</CardTitle>
|
||||
<CardDescription>
|
||||
Basic form with HTML5 validation and toast notifications
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">
|
||||
Name <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="John Doe"
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">
|
||||
Email <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="john@example.com"
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="message">
|
||||
Message <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
className="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
placeholder="Your message here..."
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex gap-2">
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit'}
|
||||
</Button>
|
||||
<Button type="reset" variant="outline" disabled={isSubmitting}>
|
||||
Reset
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
{/* Form Validation Example */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Advanced Validation</CardTitle>
|
||||
<CardDescription>
|
||||
For production forms, consider using React Hook Form + Zod
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg bg-muted p-4">
|
||||
<code className="text-sm">
|
||||
<pre className="overflow-x-auto">
|
||||
{`import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import * as z from 'zod'
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string().min(8)
|
||||
})
|
||||
|
||||
export function LoginForm() {
|
||||
const form = useForm({
|
||||
resolver: zodResolver(schema)
|
||||
})
|
||||
|
||||
// ... form implementation
|
||||
}`}
|
||||
</pre>
|
||||
</code>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Install dependencies:{' '}
|
||||
<code className="rounded bg-muted px-1 py-0.5">
|
||||
npm install react-hook-form @hookform/resolvers zod
|
||||
</code>
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Accessibility Notes */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Accessibility Guidelines</CardTitle>
|
||||
<CardDescription>Best practices for accessible forms</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="ml-6 list-disc space-y-2 text-sm">
|
||||
<li>
|
||||
<strong>Always pair labels with inputs</strong> using{' '}
|
||||
<code className="rounded bg-muted px-1">htmlFor</code> and{' '}
|
||||
<code className="rounded bg-muted px-1">id</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Mark required fields</strong> visually and with{' '}
|
||||
<code className="rounded bg-muted px-1">aria-required</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Provide clear error messages</strong> linked with{' '}
|
||||
<code className="rounded bg-muted px-1">aria-describedby</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Use appropriate input types</strong> (email, tel, url,
|
||||
etc.)
|
||||
</li>
|
||||
<li>
|
||||
<strong>Disable submit during processing</strong> with{' '}
|
||||
<code className="rounded bg-muted px-1">aria-busy</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Don't use placeholder as label</strong> - placeholders
|
||||
disappear on focus
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { AppShell } from '@/components/app-shell'
|
||||
import { FileText, Palette, SquareStack } from 'lucide-react'
|
||||
|
||||
const navigation = [
|
||||
{
|
||||
title: 'Forms',
|
||||
href: '/examples/forms',
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
title: 'Dialogs',
|
||||
href: '/examples/dialogs',
|
||||
icon: SquareStack,
|
||||
},
|
||||
{
|
||||
title: 'Theme',
|
||||
href: '/examples/theme',
|
||||
icon: Palette,
|
||||
},
|
||||
]
|
||||
|
||||
export default function ExamplesLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<AppShell navigation={navigation} siteTitle="Examples">
|
||||
{children}
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
export default function ThemePage() {
|
||||
const { theme, setTheme } = useTheme()
|
||||
const [mounted, setMounted] = React.useState(false)
|
||||
|
||||
// Prevent hydration mismatch
|
||||
React.useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
if (!mounted) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-6xl py-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold">Theme & Design Tokens</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">
|
||||
Explore the color system and design tokens
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Theme Switcher */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle>Theme Switcher</CardTitle>
|
||||
<CardDescription>
|
||||
Current theme: <strong className="capitalize">{theme}</strong>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={theme === 'light' ? 'default' : 'outline'}
|
||||
onClick={() => setTheme('light')}
|
||||
>
|
||||
Light
|
||||
</Button>
|
||||
<Button
|
||||
variant={theme === 'dark' ? 'default' : 'outline'}
|
||||
onClick={() => setTheme('dark')}
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
<Button
|
||||
variant={theme === 'system' ? 'default' : 'outline'}
|
||||
onClick={() => setTheme('system')}
|
||||
>
|
||||
System
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Color Tokens */}
|
||||
<div className="space-y-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Semantic Colors</CardTitle>
|
||||
<CardDescription>
|
||||
Colors that describe purpose, not appearance
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<ColorSwatch
|
||||
label="Background"
|
||||
description="Main background color"
|
||||
className="bg-background text-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Foreground"
|
||||
description="Main text color"
|
||||
className="bg-foreground text-background"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Primary"
|
||||
description="Brand color for main actions"
|
||||
className="bg-primary text-primary-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Secondary"
|
||||
description="Less prominent actions"
|
||||
className="bg-secondary text-secondary-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Muted"
|
||||
description="Disabled states, subtle backgrounds"
|
||||
className="bg-muted text-muted-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Accent"
|
||||
description="Highlights, hover states"
|
||||
className="bg-accent text-accent-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Destructive"
|
||||
description="Errors, delete actions"
|
||||
className="bg-destructive text-destructive-foreground"
|
||||
/>
|
||||
<ColorSwatch
|
||||
label="Card"
|
||||
description="Elevated surfaces"
|
||||
className="border bg-card text-card-foreground"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Component Variants */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Button Variants</CardTitle>
|
||||
<CardDescription>
|
||||
Different button styles using semantic colors
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button>Default</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
<Button variant="outline">Outline</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="link">Link</Button>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button size="sm">Small</Button>
|
||||
<Button size="default">Default</Button>
|
||||
<Button size="lg">Large</Button>
|
||||
<Button size="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="m12 5 7 7-7 7" />
|
||||
</svg>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Typography */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Typography Scale</CardTitle>
|
||||
<CardDescription>Text styles with proper hierarchy</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold">Heading 1 (4xl)</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
text-4xl font-bold
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold">Heading 2 (3xl)</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
text-3xl font-bold
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold">Heading 3 (2xl)</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
text-2xl font-semibold
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-semibold">Heading 4 (xl)</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
text-xl font-semibold
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-base">Body text (base)</p>
|
||||
<p className="text-sm text-muted-foreground">text-base</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm">Small text (sm)</p>
|
||||
<p className="text-sm text-muted-foreground">text-sm</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Extra small (xs)
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">text-xs</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Customization Guide */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Customization</CardTitle>
|
||||
<CardDescription>How to customize your theme</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">1. Update CSS Variables</h4>
|
||||
<p className="mb-2 text-sm text-muted-foreground">
|
||||
Edit <code className="rounded bg-muted px-1">app/globals.css</code>:
|
||||
</p>
|
||||
<pre className="overflow-x-auto rounded-lg bg-muted p-4 text-sm">
|
||||
<code>{`:root {
|
||||
--primary: 270 80% 45%; /* Change to your brand color */
|
||||
--radius: 0.75rem; /* Adjust border radius */
|
||||
}`}</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">2. Use HSL Color Picker</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Find HSL values using:{' '}
|
||||
<a
|
||||
href="https://hslpicker.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline"
|
||||
>
|
||||
HSL Color Picker
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">3. Test Contrast</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Ensure WCAG compliance using:{' '}
|
||||
<a
|
||||
href="https://webaim.org/resources/contrastchecker/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline"
|
||||
>
|
||||
WebAIM Contrast Checker
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-medium">4. Test Both Themes</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Always verify colors look good in both light and dark mode
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ColorSwatch({
|
||||
label,
|
||||
description,
|
||||
className,
|
||||
}: {
|
||||
label: string
|
||||
description: string
|
||||
className: string
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div
|
||||
className={`flex h-20 items-center justify-center rounded-lg border ${className}`}
|
||||
>
|
||||
<span className="font-medium">{label}</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{label}</p>
|
||||
<p className="text-xs text-muted-foreground">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
import { ThemeProvider } from '@/components/theme-provider'
|
||||
import { Toaster } from 'sonner'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={inter.className}>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
{/* Skip link for accessibility */}
|
||||
<a href="#main-content" className="skip-link">
|
||||
Skip to main content
|
||||
</a>
|
||||
|
||||
{children}
|
||||
|
||||
<Toaster richColors closeButton position="top-right" />
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
141
skills/tailwind-shadcn-ui-setup/assets/app/page.tsx.template
Normal file
141
skills/tailwind-shadcn-ui-setup/assets/app/page.tsx.template
Normal file
@@ -0,0 +1,141 @@
|
||||
import Link from 'next/link'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main id="main-content" className="container py-8">
|
||||
{/* Hero section */}
|
||||
<section className="flex flex-col items-center gap-4 py-12 text-center">
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
|
||||
Welcome to Your App
|
||||
</h1>
|
||||
<p className="max-w-[700px] text-lg text-muted-foreground sm:text-xl">
|
||||
Built with Next.js 16, Tailwind CSS, and shadcn/ui. Beautiful,
|
||||
accessible, and fully customizable.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<Button size="lg" asChild>
|
||||
<Link href="/examples">View Examples</Link>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<Link href="https://ui.shadcn.com" target="_blank" rel="noopener noreferrer">
|
||||
Documentation
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features grid */}
|
||||
<section className="py-12">
|
||||
<h2 className="mb-8 text-center text-3xl font-bold">Features</h2>
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tailwind CSS</CardTitle>
|
||||
<CardDescription>
|
||||
Utility-first CSS framework with custom design tokens
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Fully configured with CSS variables for easy theming and
|
||||
customization.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>shadcn/ui</CardTitle>
|
||||
<CardDescription>
|
||||
Beautiful, accessible component library
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Built on Radix UI primitives with full TypeScript support.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Dark Mode</CardTitle>
|
||||
<CardDescription>
|
||||
Automatic dark mode with system preference
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Seamless theme switching with high contrast in both modes.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Accessibility</CardTitle>
|
||||
<CardDescription>
|
||||
WCAG 2.1 Level AA compliant
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Built with semantic HTML, ARIA attributes, and keyboard
|
||||
navigation.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Type Safe</CardTitle>
|
||||
<CardDescription>
|
||||
Full TypeScript support
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Catch errors at compile time with comprehensive type definitions.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Production Ready</CardTitle>
|
||||
<CardDescription>
|
||||
Optimized for performance
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Fast builds, small bundles, and excellent Lighthouse scores.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA section */}
|
||||
<section className="flex flex-col items-center gap-4 py-12 text-center">
|
||||
<h2 className="text-3xl font-bold">Ready to build?</h2>
|
||||
<p className="max-w-[600px] text-muted-foreground">
|
||||
Explore the example pages to see components in action, or start
|
||||
building your own features.
|
||||
</p>
|
||||
<Button asChild>
|
||||
<Link href="/examples">Explore Examples</Link>
|
||||
</Button>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
162
skills/tailwind-shadcn-ui-setup/assets/components/app-shell.tsx
Normal file
162
skills/tailwind-shadcn-ui-setup/assets/components/app-shell.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { Menu } from 'lucide-react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { ModeToggle } from '@/components/mode-toggle'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface NavItem {
|
||||
title: string
|
||||
href: string
|
||||
icon?: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
|
||||
interface AppShellProps {
|
||||
children: React.ReactNode
|
||||
navigation?: NavItem[]
|
||||
siteTitle?: string
|
||||
}
|
||||
|
||||
export function AppShell({
|
||||
children,
|
||||
navigation = [],
|
||||
siteTitle = 'App',
|
||||
}: AppShellProps) {
|
||||
const pathname = usePathname()
|
||||
const [open, setOpen] = React.useState(false)
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container flex h-16 items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Mobile menu trigger */}
|
||||
{navigation.length > 0 && (
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:hidden"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" className="w-64 pr-0">
|
||||
<MobileNav
|
||||
items={navigation}
|
||||
pathname={pathname}
|
||||
onItemClick={() => setOpen(false)}
|
||||
/>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)}
|
||||
|
||||
{/* Site title */}
|
||||
<Link href="/" className="flex items-center space-x-2">
|
||||
<span className="text-xl font-bold">{siteTitle}</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Right side actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
<ModeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex flex-1">
|
||||
{/* Desktop sidebar */}
|
||||
{navigation.length > 0 && (
|
||||
<aside className="hidden w-64 border-r bg-background md:block">
|
||||
<nav className="sticky top-16 flex h-[calc(100vh-4rem)] flex-col gap-2 p-4">
|
||||
<DesktopNav items={navigation} pathname={pathname} />
|
||||
</nav>
|
||||
</aside>
|
||||
)}
|
||||
|
||||
{/* Main content */}
|
||||
<main id="main-content" className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MobileNav({
|
||||
items,
|
||||
pathname,
|
||||
onItemClick,
|
||||
}: {
|
||||
items: NavItem[]
|
||||
pathname: string
|
||||
onItemClick: () => void
|
||||
}) {
|
||||
return (
|
||||
<nav className="flex flex-col gap-2 py-4">
|
||||
{items.map((item) => {
|
||||
const Icon = item.icon
|
||||
const isActive = pathname === item.href
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={onItemClick}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
)}
|
||||
>
|
||||
{Icon && <Icon className="h-4 w-4" />}
|
||||
{item.title}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
function DesktopNav({
|
||||
items,
|
||||
pathname,
|
||||
}: {
|
||||
items: NavItem[]
|
||||
pathname: string
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{items.map((item) => {
|
||||
const Icon = item.icon
|
||||
const isActive = pathname === item.href
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||
)}
|
||||
>
|
||||
{Icon && <Icon className="h-4 w-4" />}
|
||||
{item.title}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { Moon, Sun } from 'lucide-react'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
|
||||
export function ModeToggle() {
|
||||
const { setTheme } = useTheme()
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" aria-label="Toggle theme">
|
||||
<Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setTheme('light')}>
|
||||
Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme('dark')}>
|
||||
Dark
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme('system')}>
|
||||
System
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { ThemeProvider as NextThemesProvider } from 'next-themes'
|
||||
import { type ThemeProviderProps } from 'next-themes/dist/types'
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
}
|
||||
97
skills/tailwind-shadcn-ui-setup/assets/globals.css.template
Normal file
97
skills/tailwind-shadcn-ui-setup/assets/globals.css.template
Normal file
@@ -0,0 +1,97 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
|
||||
/* Base theme: {{THEME_PRESET}} */
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 5.9% 10%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
*:focus-visible {
|
||||
@apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
|
||||
}
|
||||
|
||||
/* Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Skip link for accessibility */
|
||||
.skip-link {
|
||||
@apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50;
|
||||
@apply px-4 py-2 bg-background border-2 border-ring rounded-md;
|
||||
@apply text-foreground font-medium;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Text balance for headings */
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import type { Config } from 'tailwindcss'
|
||||
|
||||
// TODO: When Tailwind v4 is stable, consider migrating to @theme directive
|
||||
// See references/tailwind-v4-migration.md for details
|
||||
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./lib/**/*.{ts,tsx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
},
|
||||
keyframes: {
|
||||
'accordion-down': {
|
||||
from: { height: '0' },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
},
|
||||
'accordion-up': {
|
||||
from: { height: 'var(--radix-accordion-content-height)' },
|
||||
to: { height: '0' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
} satisfies Config
|
||||
@@ -0,0 +1,484 @@
|
||||
# Accessibility Checklist for Tailwind + shadcn/ui Setup
|
||||
|
||||
## Overview
|
||||
|
||||
This checklist ensures the Tailwind + shadcn/ui setup meets WCAG 2.1 Level AA standards and provides an inclusive user experience.
|
||||
|
||||
## Color & Contrast
|
||||
|
||||
### Requirements
|
||||
- [OK] Normal text (< 18pt): Contrast ratio ≥ 4.5:1
|
||||
- [OK] Large text (≥ 18pt or bold 14pt): Contrast ratio ≥ 3:1
|
||||
- [OK] UI components: Contrast ratio ≥ 3:1
|
||||
- [OK] Focus indicators: Contrast ratio ≥ 3:1
|
||||
|
||||
### Implementation
|
||||
|
||||
```css
|
||||
/* Light mode - High contrast */
|
||||
:root {
|
||||
--background: 0 0% 100%; /* White */
|
||||
--foreground: 222.2 84% 4.9%; /* Near black - 16.7:1 ratio */
|
||||
--muted: 210 40% 96.1%; /* Light gray background */
|
||||
--muted-foreground: 215.4 16.3% 46.9%; /* Medium gray text - 4.6:1 ratio */
|
||||
--border: 214.3 31.8% 91.4%; /* Light border */
|
||||
}
|
||||
|
||||
/* Dark mode - High contrast */
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%; /* Near black */
|
||||
--foreground: 210 40% 98%; /* Near white - 16.5:1 ratio */
|
||||
--muted: 217.2 32.6% 17.5%; /* Dark gray background */
|
||||
--muted-foreground: 215 20.2% 65.1%; /* Light gray text - 6.8:1 ratio */
|
||||
--border: 217.2 32.6% 17.5%; /* Dark border */
|
||||
}
|
||||
```
|
||||
|
||||
### Testing Contrast
|
||||
|
||||
```bash
|
||||
# Use online tools:
|
||||
# - https://webaim.org/resources/contrastchecker/
|
||||
# - https://contrast-ratio.com/
|
||||
# - Chrome DevTools (Lighthouse audit)
|
||||
|
||||
# Or programmatically:
|
||||
npm install --save-dev axe-core @axe-core/playwright
|
||||
```
|
||||
|
||||
## Focus Management
|
||||
|
||||
### Visible Focus Indicators
|
||||
|
||||
```css
|
||||
/* Global focus styles */
|
||||
@layer base {
|
||||
*:focus-visible {
|
||||
@apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
|
||||
}
|
||||
|
||||
/* Respect reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*:focus-visible {
|
||||
@apply transition-none;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Focus Order
|
||||
- [OK] Logical tab order (follows visual order)
|
||||
- [OK] No keyboard traps
|
||||
- [OK] Skip links for navigation
|
||||
- [OK] Focus moves appropriately in modals/dialogs
|
||||
|
||||
### Implementation
|
||||
|
||||
```tsx
|
||||
// Skip link (in layout)
|
||||
<a
|
||||
href="#main-content"
|
||||
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50"
|
||||
>
|
||||
Skip to main content
|
||||
</a>
|
||||
|
||||
{/* Rest of layout */}
|
||||
<main id="main-content">
|
||||
{children}
|
||||
</main>
|
||||
```
|
||||
|
||||
## Keyboard Navigation
|
||||
|
||||
### Requirements
|
||||
- [OK] All interactive elements keyboard accessible
|
||||
- [OK] Logical tab order
|
||||
- [OK] Keyboard shortcuts don't conflict
|
||||
- [OK] Escape closes modals/dropdowns
|
||||
- [OK] Arrow keys for menus/lists
|
||||
- [OK] Enter/Space activates buttons
|
||||
|
||||
### shadcn/ui Components
|
||||
|
||||
All shadcn/ui components support keyboard navigation out of the box:
|
||||
|
||||
```tsx
|
||||
// Dialog - auto-handles:
|
||||
// - ESC to close
|
||||
// - Focus trap
|
||||
// - Return focus on close
|
||||
<Dialog>
|
||||
<DialogContent>
|
||||
<DialogTitle>Title</DialogTitle>
|
||||
{/* Content */}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
// Dropdown - auto-handles:
|
||||
// - Arrow keys for navigation
|
||||
// - Enter to select
|
||||
// - ESC to close
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>Menu</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>Item 1</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
```
|
||||
|
||||
## Semantic HTML
|
||||
|
||||
### Use Proper Elements
|
||||
|
||||
```tsx
|
||||
[OK] Good - Semantic
|
||||
<nav aria-label="Main navigation">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1>Article Title</h1>
|
||||
<p>Content...</p>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Company</p>
|
||||
</footer>
|
||||
|
||||
[ERROR] Bad - Non-semantic
|
||||
<div className="nav">
|
||||
<div className="link" onClick={goHome}>Home</div>
|
||||
</div>
|
||||
|
||||
<div className="main">
|
||||
<div className="article">
|
||||
<div className="title">Article Title</div>
|
||||
<div>Content...</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Heading Hierarchy
|
||||
|
||||
```tsx
|
||||
[OK] Good - Logical hierarchy
|
||||
<h1>Page Title</h1>
|
||||
<h2>Section</h2>
|
||||
<h3>Subsection</h3>
|
||||
<h2>Another Section</h2>
|
||||
|
||||
[ERROR] Bad - Skips levels
|
||||
<h1>Page Title</h1>
|
||||
<h3>Section</h3> {/* Skipped h2 */}
|
||||
<h2>Another Section</h2> {/* Out of order */}
|
||||
```
|
||||
|
||||
## Form Accessibility
|
||||
|
||||
### Always Pair Labels with Inputs
|
||||
|
||||
```tsx
|
||||
[OK] Good
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email address</Label>
|
||||
<Input id="email" type="email" required aria-required="true" />
|
||||
</div>
|
||||
|
||||
[ERROR] Bad
|
||||
<Input placeholder="Email address" /> {/* Placeholder is not a label */}
|
||||
```
|
||||
|
||||
### Error Messages
|
||||
|
||||
```tsx
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
aria-invalid={!!errors.password}
|
||||
aria-describedby={errors.password ? "password-error" : undefined}
|
||||
/>
|
||||
{errors.password && (
|
||||
<p id="password-error" className="text-sm text-destructive" role="alert">
|
||||
{errors.password.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
```
|
||||
|
||||
### Required Fields
|
||||
|
||||
```tsx
|
||||
<Label htmlFor="username">
|
||||
Username
|
||||
<span className="text-destructive" aria-label="required">*</span>
|
||||
</Label>
|
||||
<Input id="username" required aria-required="true" />
|
||||
```
|
||||
|
||||
## ARIA Attributes
|
||||
|
||||
### When to Use ARIA
|
||||
|
||||
**First Rule**: Don't use ARIA unless necessary. Use semantic HTML first.
|
||||
|
||||
```tsx
|
||||
[OK] Good - Semantic HTML (no ARIA needed)
|
||||
<button>Click me</button>
|
||||
|
||||
[ERROR] Unnecessary ARIA
|
||||
<div role="button" tabIndex={0} onClick={...}>Click me</div>
|
||||
```
|
||||
|
||||
### Common ARIA Patterns
|
||||
|
||||
```tsx
|
||||
// Live regions for dynamic content
|
||||
<div role="status" aria-live="polite" aria-atomic="true">
|
||||
{statusMessage}
|
||||
</div>
|
||||
|
||||
// Loading state
|
||||
<Button disabled={isLoading} aria-busy={isLoading}>
|
||||
{isLoading ? "Loading..." : "Submit"}
|
||||
</Button>
|
||||
|
||||
// Icon buttons need labels
|
||||
<Button size="icon" aria-label="Close menu">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
// Expanded/collapsed state
|
||||
<Button
|
||||
aria-expanded={isOpen}
|
||||
aria-controls="content-id"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
Toggle
|
||||
</Button>
|
||||
<div id="content-id" hidden={!isOpen}>
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
## Screen Reader Support
|
||||
|
||||
### Visually Hidden Content
|
||||
|
||||
Use `.sr-only` for screen-reader-only text:
|
||||
|
||||
```tsx
|
||||
<Button>
|
||||
<span className="sr-only">Delete item</span>
|
||||
<Trash className="h-4 w-4" aria-hidden="true" />
|
||||
</Button>
|
||||
```
|
||||
|
||||
### Skip Links
|
||||
|
||||
```tsx
|
||||
<a
|
||||
href="#main-content"
|
||||
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-background focus:ring-2"
|
||||
>
|
||||
Skip to main content
|
||||
</a>
|
||||
```
|
||||
|
||||
### Icon-Only Buttons
|
||||
|
||||
```tsx
|
||||
// Always provide text alternative
|
||||
<Button variant="ghost" size="icon" aria-label="Search">
|
||||
<Search className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
// Or use tooltip with title
|
||||
<Button variant="ghost" size="icon" title="Search">
|
||||
<Search className="h-4 w-4" />
|
||||
<span className="sr-only">Search</span>
|
||||
</Button>
|
||||
```
|
||||
|
||||
## Motion & Animation
|
||||
|
||||
### Respect User Preferences
|
||||
|
||||
```css
|
||||
/* Disable animations for users who prefer reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Implementation in Components
|
||||
|
||||
```tsx
|
||||
// Add to globals.css
|
||||
@layer base {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Dark Mode Accessibility
|
||||
|
||||
### Proper Contrast in Both Modes
|
||||
|
||||
```css
|
||||
/* Test both themes */
|
||||
:root {
|
||||
/* Light mode */
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
/* Ensure ≥ 4.5:1 ratio */
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark mode */
|
||||
--primary: 217.2 91.2% 59.8%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
/* Ensure ≥ 4.5:1 ratio */
|
||||
}
|
||||
```
|
||||
|
||||
### Flash Prevention
|
||||
|
||||
```tsx
|
||||
// In app/layout.tsx
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange {/* Prevent flash */}
|
||||
>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### Manual Testing
|
||||
|
||||
- [ ] Navigate entire app with keyboard only (no mouse)
|
||||
- [ ] Test with screen reader (NVDA, JAWS, VoiceOver)
|
||||
- [ ] Zoom to 200% and ensure layout doesn't break
|
||||
- [ ] Test in high contrast mode
|
||||
- [ ] Verify dark mode contrast
|
||||
- [ ] Check focus indicators on all interactive elements
|
||||
- [ ] Test form validation with screen reader
|
||||
|
||||
### Automated Testing
|
||||
|
||||
```bash
|
||||
# Install axe-core
|
||||
npm install --save-dev @axe-core/playwright
|
||||
|
||||
# Use in tests
|
||||
import { test, expect } from '@playwright/test'
|
||||
import { injectAxe, checkA11y } from 'axe-playwright'
|
||||
|
||||
test('homepage is accessible', async ({ page }) => {
|
||||
await page.goto('http://localhost:3000')
|
||||
await injectAxe(page)
|
||||
await checkA11y(page)
|
||||
})
|
||||
```
|
||||
|
||||
### Browser DevTools
|
||||
|
||||
- Chrome Lighthouse (Accessibility audit)
|
||||
- Firefox Accessibility Inspector
|
||||
- Edge Accessibility Insights
|
||||
- axe DevTools Extension
|
||||
|
||||
## Common Issues & Fixes
|
||||
|
||||
### Issue: Missing Form Labels
|
||||
|
||||
```tsx
|
||||
[ERROR] Problem
|
||||
<Input placeholder="Email" />
|
||||
|
||||
[OK] Fix
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" placeholder="you@example.com" />
|
||||
</div>
|
||||
```
|
||||
|
||||
### Issue: Non-Accessible Custom Components
|
||||
|
||||
```tsx
|
||||
[ERROR] Problem
|
||||
<div onClick={handleClick} className="cursor-pointer">
|
||||
Click me
|
||||
</div>
|
||||
|
||||
[OK] Fix
|
||||
<button onClick={handleClick} type="button">
|
||||
Click me
|
||||
</button>
|
||||
```
|
||||
|
||||
### Issue: Low Color Contrast
|
||||
|
||||
```tsx
|
||||
[ERROR] Problem
|
||||
<p className="text-gray-400">Important text</p> {/* 2.8:1 ratio */}
|
||||
|
||||
[OK] Fix
|
||||
<p className="text-gray-700 dark:text-gray-300">Important text</p> {/* 5.2:1 ratio */}
|
||||
```
|
||||
|
||||
### Issue: Missing Focus Indicators
|
||||
|
||||
```tsx
|
||||
[ERROR] Problem
|
||||
<Button className="focus:outline-none">Click</Button>
|
||||
|
||||
[OK] Fix
|
||||
<Button className="focus-visible:ring-2 focus-visible:ring-ring">Click</Button>
|
||||
```
|
||||
|
||||
## Resources
|
||||
|
||||
- **WCAG Guidelines**: https://www.w3.org/WAI/WCAG21/quickref/
|
||||
- **WebAIM**: https://webaim.org/
|
||||
- **a11y Project**: https://www.a11yproject.com/
|
||||
- **Radix UI (shadcn base)**: https://radix-ui.com (includes A11y)
|
||||
- **MDN Accessibility**: https://developer.mozilla.org/en-US/docs/Web/Accessibility
|
||||
|
||||
## Skill Implementation
|
||||
|
||||
This skill ensures:
|
||||
- [OK] High contrast color tokens (≥ 4.5:1 for text)
|
||||
- [OK] Visible focus styles with ring utilities
|
||||
- [OK] Skip link in base layout
|
||||
- [OK] Semantic HTML landmarks (header, nav, main, footer)
|
||||
- [OK] Proper label/input associations
|
||||
- [OK] Dark mode with accessible contrast
|
||||
- [OK] Reduced motion support
|
||||
- [OK] All shadcn components use Radix (accessible primitives)
|
||||
@@ -0,0 +1,370 @@
|
||||
# shadcn/ui Component Reference
|
||||
|
||||
## Overview
|
||||
|
||||
shadcn/ui provides a collection of re-usable components built with Radix UI and Tailwind CSS. Components are NOT installed as dependencies but copied into your project, giving you full control.
|
||||
|
||||
## Installation Command
|
||||
|
||||
```bash
|
||||
npx shadcn-ui@latest add [component-name]
|
||||
```
|
||||
|
||||
## Baseline Components for This Skill
|
||||
|
||||
The following components are installed by default:
|
||||
|
||||
### Core UI Elements
|
||||
- **button**: Primary interactive element with variants
|
||||
- **card**: Container for grouped content
|
||||
- **input**: Text input field
|
||||
- **label**: Form label with accessibility support
|
||||
- **dialog**: Modal dialog/overlay
|
||||
- **separator**: Visual or semantic separator
|
||||
|
||||
### Layout & Navigation
|
||||
- **sheet**: Slide-over panel (mobile sidebar)
|
||||
- **dropdown-menu**: Contextual menu with submenus
|
||||
- **navigation-menu**: Main navigation component
|
||||
|
||||
### Feedback & Notifications
|
||||
- **toast**: Temporary notifications (via Sonner)
|
||||
- **alert**: Static notification messages
|
||||
- **badge**: Status or category indicator
|
||||
|
||||
## Available Components by Category
|
||||
|
||||
### Form Components
|
||||
- `checkbox` - Checkbox input with label
|
||||
- `input` - Text input field
|
||||
- `label` - Form label
|
||||
- `textarea` - Multi-line text input
|
||||
- `select` - Dropdown select
|
||||
- `radio-group` - Radio button group
|
||||
- `switch` - Toggle switch
|
||||
- `slider` - Range slider
|
||||
- `form` - Form wrapper with React Hook Form integration
|
||||
- `combobox` - Searchable select (autocomplete)
|
||||
- `date-picker` - Date selection with calendar
|
||||
- `calendar` - Calendar component
|
||||
|
||||
### Layout Components
|
||||
- `card` - Content card with header/footer
|
||||
- `sheet` - Slide-over panel
|
||||
- `dialog` - Modal dialog
|
||||
- `popover` - Floating popover
|
||||
- `drawer` - Bottom drawer (mobile)
|
||||
- `separator` - Divider line
|
||||
- `scroll-area` - Custom scrollable area
|
||||
- `aspect-ratio` - Maintain aspect ratio
|
||||
- `resizable` - Resizable panels
|
||||
|
||||
### Navigation Components
|
||||
- `navigation-menu` - Main navigation
|
||||
- `menubar` - Desktop menu bar
|
||||
- `dropdown-menu` - Context/dropdown menu
|
||||
- `context-menu` - Right-click context menu
|
||||
- `tabs` - Tab navigation
|
||||
- `breadcrumb` - Breadcrumb navigation
|
||||
- `pagination` - Page navigation
|
||||
- `command` - Command palette (⌘K)
|
||||
|
||||
### Feedback Components
|
||||
- `toast` - Toast notifications
|
||||
- `alert` - Alert messages
|
||||
- `alert-dialog` - Confirmation dialog
|
||||
- `badge` - Status badge
|
||||
- `progress` - Progress indicator
|
||||
- `skeleton` - Loading skeleton
|
||||
- `spinner` - Loading spinner
|
||||
|
||||
### Data Display
|
||||
- `table` - Data table
|
||||
- `avatar` - User avatar
|
||||
- `tooltip` - Hover tooltip
|
||||
- `accordion` - Collapsible sections
|
||||
- `collapsible` - Simple collapsible
|
||||
- `hover-card` - Rich hover card
|
||||
- `data-table` - Advanced data table with sorting/filtering
|
||||
|
||||
### Utility Components
|
||||
- `toggle` - Toggle button
|
||||
- `toggle-group` - Toggle button group
|
||||
- `sonner` - Toast notification library integration
|
||||
- `carousel` - Image/content carousel
|
||||
|
||||
## Usage Patterns
|
||||
|
||||
### Adding a Single Component
|
||||
|
||||
```bash
|
||||
npx shadcn-ui add button
|
||||
```
|
||||
|
||||
This creates:
|
||||
- `components/ui/button.tsx`
|
||||
- Updates `components.json` if needed
|
||||
|
||||
### Adding Multiple Components
|
||||
|
||||
```bash
|
||||
npx shadcn-ui add button card input label
|
||||
```
|
||||
|
||||
### Using a Component
|
||||
|
||||
```tsx
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
|
||||
|
||||
export default function Example() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Example Card</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button>Click me</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Component Composition Patterns
|
||||
|
||||
### Form with Validation
|
||||
|
||||
```tsx
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import * as z from "zod"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { toast } from "sonner"
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string().min(8)
|
||||
})
|
||||
|
||||
export function LoginForm() {
|
||||
const form = useForm({
|
||||
resolver: zodResolver(schema)
|
||||
})
|
||||
|
||||
const onSubmit = (data) => {
|
||||
toast.success("Login successful!")
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" {...form.register("email")} />
|
||||
</div>
|
||||
<Button type="submit">Login</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Dialog with Form
|
||||
|
||||
```tsx
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
export function CreateDialog() {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button>Create New</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create Item</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form>
|
||||
<Input placeholder="Item name" />
|
||||
<Button type="submit">Create</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Navigation with Dropdown
|
||||
|
||||
```tsx
|
||||
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuLink } from "@/components/ui/navigation-menu"
|
||||
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export function AppNav() {
|
||||
return (
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink href="/">Home</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost">Products</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>Product A</DropdownMenuItem>
|
||||
<DropdownMenuItem>Product B</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
### Modifying Component Styles
|
||||
|
||||
Components use Tailwind classes and can be customized:
|
||||
|
||||
```tsx
|
||||
// Customize colors via CSS variables in globals.css
|
||||
:root {
|
||||
--primary: 200 100% 50%; /* Change primary color */
|
||||
}
|
||||
|
||||
// Or override with props
|
||||
<Button className="bg-purple-600 hover:bg-purple-700">
|
||||
Custom Color
|
||||
</Button>
|
||||
```
|
||||
|
||||
### Creating Variants
|
||||
|
||||
Use `class-variance-authority` (CVA) for variants:
|
||||
|
||||
```tsx
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
const alertVariants = cva(
|
||||
"rounded-lg border p-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-background text-foreground",
|
||||
destructive: "bg-destructive text-destructive-foreground",
|
||||
success: "bg-green-50 text-green-900"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default"
|
||||
}
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
## Accessibility Features
|
||||
|
||||
All shadcn/ui components include:
|
||||
- [OK] Proper ARIA attributes
|
||||
- [OK] Keyboard navigation
|
||||
- [OK] Focus management
|
||||
- [OK] Screen reader support
|
||||
- [OK] Reduced motion support
|
||||
|
||||
### Example: Dialog Accessibility
|
||||
|
||||
```tsx
|
||||
<Dialog>
|
||||
{/* Auto-handled: */}
|
||||
{/* - Focus trap */}
|
||||
{/* - ESC to close */}
|
||||
{/* - aria-labelledby */}
|
||||
{/* - Backdrop click to close */}
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Title (used for aria-labelledby)</DialogTitle>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### 1. Always Use Labels with Inputs
|
||||
|
||||
```tsx
|
||||
[OK] Good
|
||||
<div>
|
||||
<Label htmlFor="username">Username</Label>
|
||||
<Input id="username" />
|
||||
</div>
|
||||
|
||||
[ERROR] Bad
|
||||
<Input placeholder="Username" /> {/* Placeholder is not a label */}
|
||||
```
|
||||
|
||||
### 2. Provide Accessible Names
|
||||
|
||||
```tsx
|
||||
[OK] Good
|
||||
<Button aria-label="Close menu">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
[ERROR] Bad
|
||||
<Button>
|
||||
<X className="h-4 w-4" /> {/* No text or aria-label */}
|
||||
</Button>
|
||||
```
|
||||
|
||||
### 3. Handle Loading States
|
||||
|
||||
```tsx
|
||||
<Button disabled={isLoading}>
|
||||
{isLoading ? "Loading..." : "Submit"}
|
||||
</Button>
|
||||
```
|
||||
|
||||
### 4. Use Semantic HTML
|
||||
|
||||
```tsx
|
||||
[OK] Good
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Button type="submit">Submit</Button>
|
||||
</form>
|
||||
|
||||
[ERROR] Bad
|
||||
<div onClick={handleSubmit}>
|
||||
<Button type="button">Submit</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Resources
|
||||
|
||||
- **Official Docs**: https://ui.shadcn.com
|
||||
- **Component Examples**: https://ui.shadcn.com/examples
|
||||
- **Radix UI Docs**: https://radix-ui.com
|
||||
- **GitHub**: https://github.com/shadcn-ui/ui
|
||||
|
||||
## Integration with This Skill
|
||||
|
||||
The skill installs these baseline components automatically:
|
||||
1. `button` - Primary actions
|
||||
2. `card` - Content containers
|
||||
3. `input` - Form inputs
|
||||
4. `label` - Form labels
|
||||
5. `dialog` - Modals
|
||||
6. `separator` - Visual dividers
|
||||
|
||||
Additional components can be added as needed:
|
||||
```bash
|
||||
npx shadcn-ui add [component-name]
|
||||
```
|
||||
@@ -0,0 +1,206 @@
|
||||
# Tailwind CSS v4 Migration Guide
|
||||
|
||||
## Overview
|
||||
|
||||
Tailwind CSS v4 introduces significant changes to configuration and usage patterns. This document outlines the differences and provides migration guidance.
|
||||
|
||||
## Current Status (as of January 2025)
|
||||
|
||||
- **Tailwind CSS v3.x**: Stable, widely adopted
|
||||
- **Tailwind CSS v4**: In development, alpha/beta releases available
|
||||
- **Recommendation**: Use v3 with forward-compatible patterns for production projects
|
||||
|
||||
## Key Differences: v3 vs v4
|
||||
|
||||
### Configuration Format
|
||||
|
||||
**v3 (Current)**
|
||||
```ts
|
||||
// tailwind.config.ts
|
||||
import type { Config } from 'tailwindcss'
|
||||
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: ['./app/**/*.{ts,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: { /* ... */ }
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
} satisfies Config
|
||||
```
|
||||
|
||||
**v4 (Future)**
|
||||
```css
|
||||
/* @config directive in CSS */
|
||||
@config "./tailwind.config.js";
|
||||
|
||||
@theme {
|
||||
--color-brand: #3b82f6;
|
||||
--font-sans: system-ui, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
### CSS Variables & Tokens
|
||||
|
||||
**v3 Pattern (Forward-Compatible)**
|
||||
```css
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
// tailwind.config.ts
|
||||
colors: {
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))'
|
||||
}
|
||||
```
|
||||
|
||||
**v4 Expected Pattern**
|
||||
```css
|
||||
@theme {
|
||||
--color-background: oklch(100% 0 0);
|
||||
--color-foreground: oklch(20% 0.02 270);
|
||||
}
|
||||
```
|
||||
|
||||
### Plugin System
|
||||
|
||||
**v3**: JavaScript-based plugins in config file
|
||||
**v4**: CSS-based plugins with `@plugin` directive
|
||||
|
||||
## Migration Strategy
|
||||
|
||||
### Phase 1: v3 with Forward-Compatible Patterns (Current)
|
||||
|
||||
Use CSS variables extensively:
|
||||
- Define semantic tokens (--primary, --background, etc.)
|
||||
- Use HSL/OKLCH color space for easier manipulation
|
||||
- Structure CSS variables to match expected v4 patterns
|
||||
|
||||
### Phase 2: v4 Alpha/Beta Testing (When Available)
|
||||
|
||||
Test v4 alphas in non-production projects:
|
||||
```bash
|
||||
npm install tailwindcss@next
|
||||
```
|
||||
|
||||
Update configuration:
|
||||
- Move color tokens to `@theme` directive
|
||||
- Convert plugins to CSS-based format
|
||||
- Test build performance and output
|
||||
|
||||
### Phase 3: v4 Stable Migration (Future)
|
||||
|
||||
When v4 is stable:
|
||||
1. Update package: `npm install tailwindcss@latest`
|
||||
2. Migrate config format (may have migration tool)
|
||||
3. Test thoroughly across all components
|
||||
4. Update documentation
|
||||
|
||||
## Recommended Patterns for This Skill
|
||||
|
||||
### Use CSS Custom Properties
|
||||
|
||||
[OK] **Good (Forward-Compatible)**
|
||||
```css
|
||||
:root {
|
||||
--radius: 0.5rem;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: var(--radius);
|
||||
background: hsl(var(--primary));
|
||||
}
|
||||
```
|
||||
|
||||
[ERROR] **Avoid (Hard-Coded)**
|
||||
```css
|
||||
.card {
|
||||
border-radius: 0.5rem;
|
||||
background: #1e293b;
|
||||
}
|
||||
```
|
||||
|
||||
### Semantic Color Naming
|
||||
|
||||
Use semantic names that describe purpose, not appearance:
|
||||
- [OK] `--primary`, `--destructive`, `--muted`
|
||||
- [ERROR] `--blue-500`, `--red-600`, `--gray-200`
|
||||
|
||||
### HSL Color Space
|
||||
|
||||
Use HSL (or OKLCH when v4 is available) for better color manipulation:
|
||||
```css
|
||||
/* HSL: Hue Saturation Lightness */
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
|
||||
/* Usage in CSS */
|
||||
background: hsl(var(--primary));
|
||||
background: hsl(var(--primary) / 0.8); /* With alpha */
|
||||
```
|
||||
|
||||
## Checking for v4 Availability
|
||||
|
||||
```bash
|
||||
# Check installed version
|
||||
npm list tailwindcss
|
||||
|
||||
# Check latest available version
|
||||
npm view tailwindcss versions --json
|
||||
|
||||
# Install specific version
|
||||
npm install tailwindcss@4.0.0 # When available
|
||||
```
|
||||
|
||||
## V4-Specific Features to Watch For
|
||||
|
||||
### CSS-First Configuration
|
||||
- `@theme` directive for token definition
|
||||
- `@plugin` for extending functionality
|
||||
- Native CSS nesting support
|
||||
|
||||
### Improved Color System
|
||||
- OKLCH color space support
|
||||
- Better color mixing
|
||||
- Improved dark mode handling
|
||||
|
||||
### Performance Improvements
|
||||
- Faster build times
|
||||
- Smaller CSS output
|
||||
- Better JIT performance
|
||||
|
||||
### New Utilities
|
||||
- Container queries (better support)
|
||||
- Cascade layers
|
||||
- View transitions
|
||||
|
||||
## Resources
|
||||
|
||||
- **Tailwind CSS Docs**: https://tailwindcss.com/docs
|
||||
- **V4 Alpha Docs**: https://tailwindcss.com/docs/v4-alpha
|
||||
- **GitHub Discussions**: https://github.com/tailwindlabs/tailwindcss/discussions
|
||||
- **Upgrade Guide**: https://tailwindcss.com/docs/upgrade-guide (when v4 is stable)
|
||||
|
||||
## Notes for Skill Usage
|
||||
|
||||
When this skill runs:
|
||||
1. Check Tailwind version: `npm view tailwindcss version`
|
||||
2. If v4 stable is available: Use v4 configuration patterns
|
||||
3. If v4 is not available: Use v3 with forward-compatible CSS variables
|
||||
4. Add comments in generated files indicating v4 migration points:
|
||||
```ts
|
||||
// TODO: When upgrading to Tailwind v4, move these tokens to @theme directive
|
||||
```
|
||||
|
||||
This approach ensures the skill produces production-ready code today while being ready for v4 when it arrives.
|
||||
548
skills/tailwind-shadcn-ui-setup/references/theme-tokens.md
Normal file
548
skills/tailwind-shadcn-ui-setup/references/theme-tokens.md
Normal file
@@ -0,0 +1,548 @@
|
||||
# Theme Token System
|
||||
|
||||
## Overview
|
||||
|
||||
This document describes the CSS custom property-based design token system used for Tailwind + shadcn/ui theming.
|
||||
|
||||
## Token Philosophy
|
||||
|
||||
### Semantic Naming
|
||||
Tokens describe **purpose**, not appearance:
|
||||
- [OK] `--primary` (describes role)
|
||||
- [ERROR] `--blue-600` (describes appearance)
|
||||
|
||||
### Benefits
|
||||
- Easy theme switching
|
||||
- Consistent design system
|
||||
- Automatic dark mode support
|
||||
- Forward-compatible with Tailwind v4
|
||||
|
||||
## Color Token Structure
|
||||
|
||||
### HSL Format
|
||||
|
||||
All colors use HSL (Hue, Saturation, Lightness) format without the `hsl()` wrapper:
|
||||
|
||||
```css
|
||||
/* Define as space-separated values */
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
|
||||
/* Use with hsl() wrapper */
|
||||
background-color: hsl(var(--primary));
|
||||
|
||||
/* With alpha transparency */
|
||||
background-color: hsl(var(--primary) / 0.5);
|
||||
```
|
||||
|
||||
### Why HSL?
|
||||
- **Intuitive**: Easier to adjust than RGB
|
||||
- **Lightness control**: Simple to create shades
|
||||
- **Alpha transparency**: Works with modern CSS syntax
|
||||
- **Tooling**: Better design tool support
|
||||
|
||||
## Core Color Tokens
|
||||
|
||||
### Base Colors
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Background & Foreground */
|
||||
--background: 0 0% 100%; /* Pure white */
|
||||
--foreground: 222.2 84% 4.9%; /* Near black text */
|
||||
|
||||
/* Card (elevated surfaces) */
|
||||
--card: 0 0% 100%; /* White card background */
|
||||
--card-foreground: 222.2 84% 4.9%; /* Card text */
|
||||
|
||||
/* Popover (floating UI) */
|
||||
--popover: 0 0% 100%; /* White popover */
|
||||
--popover-foreground: 222.2 84% 4.9%; /* Popover text */
|
||||
}
|
||||
```
|
||||
|
||||
### Semantic Colors
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Primary (brand color, main actions) */
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
/* Secondary (less prominent actions) */
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
/* Muted (disabled states, subtle backgrounds) */
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
/* Accent (highlights, hover states) */
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
/* Destructive (errors, delete actions) */
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
}
|
||||
```
|
||||
|
||||
### UI Element Colors
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Borders */
|
||||
--border: 214.3 31.8% 91.4%; /* Subtle border */
|
||||
--input: 214.3 31.8% 91.4%; /* Input border */
|
||||
|
||||
/* Focus & Selection */
|
||||
--ring: 222.2 84% 4.9%; /* Focus ring */
|
||||
|
||||
/* Status Colors (optional) */
|
||||
--success: 142 76% 36%;
|
||||
--success-foreground: 0 0% 100%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 0 0% 100%;
|
||||
--info: 199 89% 48%;
|
||||
--info-foreground: 0 0% 100%;
|
||||
}
|
||||
```
|
||||
|
||||
## Dark Mode Tokens
|
||||
|
||||
### Dark Mode Strategy
|
||||
|
||||
Use `.dark` class to override tokens:
|
||||
|
||||
```css
|
||||
.dark {
|
||||
/* Base */
|
||||
--background: 222.2 84% 4.9%; /* Near black */
|
||||
--foreground: 210 40% 98%; /* Near white */
|
||||
|
||||
/* Card */
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
/* Primary */
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
/* Secondary */
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
/* Muted */
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
/* Accent */
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
/* Destructive */
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
/* Borders */
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
|
||||
/* Focus */
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
```
|
||||
|
||||
## Theme Presets
|
||||
|
||||
### Zinc (Default)
|
||||
|
||||
Cool, neutral gray tones. Professional and versatile.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--border: 240 5.9% 90%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
}
|
||||
```
|
||||
|
||||
### Slate
|
||||
|
||||
Slightly cooler than Zinc. Tech-focused feel.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
}
|
||||
```
|
||||
|
||||
### Neutral
|
||||
|
||||
True neutral grays. Clean and minimal.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--border: 0 0% 89.8%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--border: 0 0% 14.9%;
|
||||
}
|
||||
```
|
||||
|
||||
## Spacing & Sizing Tokens
|
||||
|
||||
### Border Radius
|
||||
|
||||
```css
|
||||
:root {
|
||||
--radius: 0.5rem; /* Base radius: 8px */
|
||||
}
|
||||
|
||||
/* Usage in Tailwind config */
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
}
|
||||
```
|
||||
|
||||
### Font Family (Optional)
|
||||
|
||||
```css
|
||||
:root {
|
||||
--font-sans: ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, 'Cascadia Code', monospace;
|
||||
}
|
||||
```
|
||||
|
||||
## Usage in Tailwind Config
|
||||
|
||||
### Extending Theme
|
||||
|
||||
```ts
|
||||
// tailwind.config.ts
|
||||
export default {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))'
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))'
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))'
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))'
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))'
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))'
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Using Tokens in Components
|
||||
|
||||
### In CSS
|
||||
|
||||
```css
|
||||
.custom-component {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* With alpha */
|
||||
.overlay {
|
||||
background-color: hsl(var(--background) / 0.8);
|
||||
}
|
||||
```
|
||||
|
||||
### With Tailwind Utilities
|
||||
|
||||
```tsx
|
||||
<div className="bg-background text-foreground border-border">
|
||||
<h1 className="text-primary">Heading</h1>
|
||||
<p className="text-muted-foreground">Subtitle</p>
|
||||
<Button variant="destructive">Delete</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Customization Guide
|
||||
|
||||
### Changing Primary Color
|
||||
|
||||
1. **Find your HSL values**: Use a color picker that shows HSL
|
||||
2. **Update light mode**:
|
||||
```css
|
||||
:root {
|
||||
--primary: 270 80% 45%; /* Purple example */
|
||||
--primary-foreground: 0 0% 100%; /* White text */
|
||||
}
|
||||
```
|
||||
3. **Update dark mode**:
|
||||
```css
|
||||
.dark {
|
||||
--primary: 270 80% 65%; /* Lighter purple */
|
||||
--primary-foreground: 240 10% 10%; /* Dark text */
|
||||
}
|
||||
```
|
||||
4. **Test contrast**: Use WebAIM contrast checker
|
||||
|
||||
### Creating Custom Tokens
|
||||
|
||||
```css
|
||||
/* Add to globals.css */
|
||||
:root {
|
||||
/* Custom tokens */
|
||||
--sidebar-width: 16rem;
|
||||
--header-height: 4rem;
|
||||
--brand-gradient: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
|
||||
}
|
||||
|
||||
/* Use in components */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
}
|
||||
```
|
||||
|
||||
### Adding More Semantic Colors
|
||||
|
||||
```css
|
||||
:root {
|
||||
--success: 142 76% 36%;
|
||||
--success-foreground: 0 0% 100%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 0 0% 100%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--success: 142 71% 45%;
|
||||
--warning: 38 92% 60%;
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
// Add to tailwind.config.ts
|
||||
colors: {
|
||||
success: {
|
||||
DEFAULT: 'hsl(var(--success))',
|
||||
foreground: 'hsl(var(--success-foreground))'
|
||||
},
|
||||
warning: {
|
||||
DEFAULT: 'hsl(var(--warning))',
|
||||
foreground: 'hsl(var(--warning-foreground))'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### 1. Always Pair Background/Foreground
|
||||
|
||||
```tsx
|
||||
[OK] Good
|
||||
<div className="bg-primary text-primary-foreground">
|
||||
Readable text
|
||||
</div>
|
||||
|
||||
[ERROR] Bad
|
||||
<div className="bg-primary text-foreground">
|
||||
Low contrast
|
||||
</div>
|
||||
```
|
||||
|
||||
### 2. Test Both Themes
|
||||
|
||||
Always verify colors in both light and dark mode:
|
||||
```bash
|
||||
# Use browser DevTools to toggle:
|
||||
document.documentElement.classList.toggle('dark')
|
||||
```
|
||||
|
||||
### 3. Use Semantic Tokens
|
||||
|
||||
```tsx
|
||||
[OK] Good (semantic)
|
||||
<p className="text-muted-foreground">Helper text</p>
|
||||
<Button variant="destructive">Delete</Button>
|
||||
|
||||
[ERROR] Bad (hard-coded)
|
||||
<p className="text-gray-500 dark:text-gray-400">Helper text</p>
|
||||
<Button className="bg-red-600">Delete</Button>
|
||||
```
|
||||
|
||||
### 4. Maintain Contrast Ratios
|
||||
|
||||
- Normal text: ≥ 4.5:1
|
||||
- Large text: ≥ 3:1
|
||||
- UI components: ≥ 3:1
|
||||
|
||||
## Tools for Theme Development
|
||||
|
||||
### Color Pickers with HSL
|
||||
- [HSL Color Picker](https://hslpicker.com/)
|
||||
- [Coolors](https://coolors.co/)
|
||||
- [Palettte App](https://palettte.app/)
|
||||
|
||||
### Contrast Checkers
|
||||
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
|
||||
- [Contrast Ratio](https://contrast-ratio.com/)
|
||||
- Chrome DevTools (Lighthouse)
|
||||
|
||||
### Theme Generators
|
||||
- [Realtime Colors](https://realtimecolors.com/)
|
||||
- [shadcn/ui Themes](https://ui.shadcn.com/themes)
|
||||
- [Tailwind Color Generator](https://uicolors.app/create)
|
||||
|
||||
## Example: Complete Theme
|
||||
|
||||
```css
|
||||
/* globals.css */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Base */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
|
||||
/* UI Elements */
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
|
||||
/* Primary Brand */
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
|
||||
/* Secondary Actions */
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
|
||||
/* Muted Elements */
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
|
||||
/* Accents */
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
|
||||
/* Destructive */
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
/* Borders & Inputs */
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 5.9% 10%;
|
||||
|
||||
/* Radius */
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Resources
|
||||
|
||||
- **HSL Color Space**: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
|
||||
- **shadcn/ui Theming**: https://ui.shadcn.com/docs/theming
|
||||
- **Tailwind CSS Customization**: https://tailwindcss.com/docs/customizing-colors
|
||||
- **Design Tokens**: https://www.w3.org/community/design-tokens/
|
||||
339
skills/tailwind-shadcn-ui-setup/scripts/setup_tailwind_shadcn.py
Normal file
339
skills/tailwind-shadcn-ui-setup/scripts/setup_tailwind_shadcn.py
Normal file
@@ -0,0 +1,339 @@
|
||||
#!/usr/bin/env python3
|
||||
# -*- coding: utf-8 -*-
|
||||
"""
|
||||
Tailwind CSS v4 + shadcn/ui Setup Automation Script
|
||||
|
||||
Configures Tailwind CSS and shadcn/ui for Next.js 16 App Router projects.
|
||||
Handles detection of existing setup, merging configurations, and installing dependencies.
|
||||
"""
|
||||
|
||||
import io
|
||||
import json
|
||||
import subprocess
|
||||
import sys
|
||||
from pathlib import Path
|
||||
from typing import Dict, List, Optional
|
||||
|
||||
# Configure stdout for UTF-8 encoding (prevents Windows encoding errors)
|
||||
if sys.platform == 'win32':
|
||||
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
|
||||
|
||||
|
||||
class SetupManager:
|
||||
"""Manages the Tailwind + shadcn/ui setup process."""
|
||||
|
||||
def __init__(self, project_root: Path):
|
||||
self.project_root = project_root
|
||||
self.package_json_path = project_root / "package.json"
|
||||
self.existing_tailwind = False
|
||||
self.existing_shadcn = False
|
||||
|
||||
def detect_existing_setup(self) -> Dict[str, bool]:
|
||||
"""Detect existing Tailwind and shadcn/ui installations."""
|
||||
print("[INFO] Detecting existing setup...")
|
||||
|
||||
if not self.package_json_path.exists():
|
||||
print("[ERROR] Error: package.json not found. Is this a Next.js project?")
|
||||
sys.exit(1)
|
||||
|
||||
with open(self.package_json_path) as f:
|
||||
package_data = json.load(f)
|
||||
|
||||
dependencies = {
|
||||
**package_data.get("dependencies", {}),
|
||||
**package_data.get("devDependencies", {})
|
||||
}
|
||||
|
||||
self.existing_tailwind = "tailwindcss" in dependencies
|
||||
self.existing_shadcn = "class-variance-authority" in dependencies
|
||||
|
||||
return {
|
||||
"tailwind": self.existing_tailwind,
|
||||
"shadcn": self.existing_shadcn,
|
||||
"nextjs": "next" in dependencies
|
||||
}
|
||||
|
||||
def install_dependencies(self, use_dark_mode: bool = True):
|
||||
"""Install required npm packages."""
|
||||
print("\n[INSTALL] Installing dependencies...")
|
||||
|
||||
# Core dependencies
|
||||
core_deps = [
|
||||
"tailwindcss",
|
||||
"postcss",
|
||||
"autoprefixer",
|
||||
"class-variance-authority",
|
||||
"clsx",
|
||||
"tailwind-merge",
|
||||
"lucide-react",
|
||||
"@tailwindcss/forms",
|
||||
"@tailwindcss/typography"
|
||||
]
|
||||
|
||||
if use_dark_mode:
|
||||
core_deps.append("next-themes")
|
||||
|
||||
# shadcn/ui peer dependencies
|
||||
shadcn_deps = [
|
||||
"@radix-ui/react-slot",
|
||||
"@radix-ui/react-dialog",
|
||||
"@radix-ui/react-dropdown-menu",
|
||||
"@radix-ui/react-separator",
|
||||
"sonner"
|
||||
]
|
||||
|
||||
all_deps = core_deps + shadcn_deps
|
||||
|
||||
print(f"Installing: {', '.join(all_deps)}")
|
||||
|
||||
try:
|
||||
subprocess.run(
|
||||
["npm", "install", "--save"] + all_deps,
|
||||
cwd=self.project_root,
|
||||
check=True,
|
||||
capture_output=True,
|
||||
text=True
|
||||
)
|
||||
print("[OK] Dependencies installed successfully")
|
||||
except subprocess.CalledProcessError as e:
|
||||
print(f"[ERROR] Error installing dependencies: {e.stderr}")
|
||||
sys.exit(1)
|
||||
|
||||
def check_shadcn_init(self) -> bool:
|
||||
"""Check if shadcn/ui has been initialized."""
|
||||
components_json = self.project_root / "components.json"
|
||||
return components_json.exists()
|
||||
|
||||
def init_shadcn(self):
|
||||
"""Initialize shadcn/ui configuration."""
|
||||
if self.check_shadcn_init():
|
||||
print("[OK] shadcn/ui already initialized (components.json found)")
|
||||
return
|
||||
|
||||
print("\n[SETUP] Initializing shadcn/ui...")
|
||||
print("Note: This will create components.json with default settings")
|
||||
|
||||
# Create a default components.json
|
||||
components_config = {
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "default",
|
||||
"rsc": True,
|
||||
"tsx": True,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.ts",
|
||||
"css": "app/globals.css",
|
||||
"baseColor": "zinc",
|
||||
"cssVariables": True
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
}
|
||||
}
|
||||
|
||||
components_json_path = self.project_root / "components.json"
|
||||
with open(components_json_path, 'w') as f:
|
||||
json.dump(components_config, f, indent=2)
|
||||
|
||||
print("[OK] Created components.json")
|
||||
|
||||
def add_shadcn_components(self, components: List[str]):
|
||||
"""Add shadcn/ui components."""
|
||||
print(f"\n[SETUP] Adding shadcn/ui components: {', '.join(components)}")
|
||||
|
||||
for component in components:
|
||||
try:
|
||||
print(f" Adding {component}...")
|
||||
subprocess.run(
|
||||
["npx", "shadcn-ui@latest", "add", component, "--yes"],
|
||||
cwd=self.project_root,
|
||||
check=True,
|
||||
capture_output=True,
|
||||
text=True
|
||||
)
|
||||
except subprocess.CalledProcessError as e:
|
||||
print(f" [WARN] Warning: Could not add {component}: {e.stderr}")
|
||||
print(f" You can add it manually later with: npx shadcn-ui add {component}")
|
||||
|
||||
print("[OK] shadcn/ui components added")
|
||||
|
||||
def copy_template_files(self, skill_dir: Path, theme_preset: str, use_dark_mode: bool, sidebar_layout: bool):
|
||||
"""Copy template files from assets directory."""
|
||||
print("\n[SETUP] Copying template files...")
|
||||
|
||||
assets_dir = skill_dir / "assets"
|
||||
|
||||
# Files to copy with their destinations
|
||||
template_mappings = {
|
||||
"tailwind.config.ts.template": self.project_root / "tailwind.config.ts",
|
||||
"postcss.config.js.template": self.project_root / "postcss.config.js",
|
||||
"globals.css.template": self.project_root / "app" / "globals.css",
|
||||
}
|
||||
|
||||
for template_name, dest_path in template_mappings.items():
|
||||
template_path = assets_dir / template_name
|
||||
if template_path.exists():
|
||||
dest_path.parent.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
# Read template and replace placeholders
|
||||
content = template_path.read_text()
|
||||
content = content.replace("{{THEME_PRESET}}", theme_preset)
|
||||
|
||||
dest_path.write_text(content)
|
||||
print(f" [OK] Created {dest_path.relative_to(self.project_root)}")
|
||||
|
||||
def create_utils_file(self):
|
||||
"""Create lib/utils.ts with cn helper."""
|
||||
utils_dir = self.project_root / "lib"
|
||||
utils_dir.mkdir(exist_ok=True)
|
||||
|
||||
utils_content = '''import { type ClassValue, clsx } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
'''
|
||||
|
||||
utils_path = utils_dir / "utils.ts"
|
||||
if not utils_path.exists():
|
||||
utils_path.write_text(utils_content)
|
||||
print("[OK] Created lib/utils.ts")
|
||||
else:
|
||||
print("[INFO] lib/utils.ts already exists, skipping")
|
||||
|
||||
def print_summary(self, config: Dict):
|
||||
"""Print setup summary."""
|
||||
print("\n" + "="*60)
|
||||
print("[OK] Tailwind CSS + shadcn/ui Setup Complete!")
|
||||
print("="*60)
|
||||
print(f"\n[CONFIG] Configuration:")
|
||||
print(f" • Theme Preset: {config['theme_preset']}")
|
||||
print(f" • Dark Mode: {'Enabled' if config['use_dark_mode'] else 'Disabled'}")
|
||||
print(f" • Sidebar Layout: {'Yes' if config['sidebar_layout'] else 'No'}")
|
||||
print(f" • Examples: {'Included' if config['include_examples'] else 'Not included'}")
|
||||
print(f"\n[FILES] Files Created/Updated:")
|
||||
print(f" • tailwind.config.ts")
|
||||
print(f" • postcss.config.js")
|
||||
print(f" • app/globals.css")
|
||||
print(f" • components.json")
|
||||
print(f" • lib/utils.ts")
|
||||
print(f"\n[NEXT] Next Steps:")
|
||||
print(f" 1. Review tailwind.config.ts and customize tokens")
|
||||
print(f" 2. Check app/globals.css for CSS variables")
|
||||
print(f" 3. Start your dev server: npm run dev")
|
||||
print(f" 4. Add more shadcn components: npx shadcn-ui add [component]")
|
||||
print(f"\n[TIP] Tip: Run the skill again to add example pages and components")
|
||||
print("="*60 + "\n")
|
||||
|
||||
|
||||
def get_user_input(prompt: str, default: str, options: Optional[List[str]] = None) -> str:
|
||||
"""Get user input with validation."""
|
||||
while True:
|
||||
if options:
|
||||
prompt_with_options = f"{prompt} ({'/'.join(options)}) [{default}]: "
|
||||
else:
|
||||
prompt_with_options = f"{prompt} [{default}]: "
|
||||
|
||||
response = input(prompt_with_options).strip() or default
|
||||
|
||||
if options and response not in options:
|
||||
print(f"Invalid option. Please choose from: {', '.join(options)}")
|
||||
continue
|
||||
|
||||
return response
|
||||
|
||||
|
||||
def main():
|
||||
"""Main setup function."""
|
||||
print("==> Tailwind CSS v4 + shadcn/ui Setup")
|
||||
print("="*60)
|
||||
|
||||
# Detect project root
|
||||
project_root = Path.cwd()
|
||||
|
||||
# Initialize setup manager
|
||||
manager = SetupManager(project_root)
|
||||
|
||||
# Detect existing setup
|
||||
existing = manager.detect_existing_setup()
|
||||
|
||||
if not existing["nextjs"]:
|
||||
print("[ERROR] Error: This doesn't appear to be a Next.js project")
|
||||
print(" Make sure you're in the project root with package.json")
|
||||
sys.exit(1)
|
||||
|
||||
if existing["tailwind"]:
|
||||
print("[OK] Existing Tailwind CSS installation detected")
|
||||
if existing["shadcn"]:
|
||||
print("[OK] Existing shadcn/ui installation detected")
|
||||
|
||||
print("\n[CONFIG] Configuration Options\n")
|
||||
|
||||
# Get user preferences
|
||||
use_dark_mode = get_user_input(
|
||||
"Enable dark mode?",
|
||||
"yes",
|
||||
["yes", "no"]
|
||||
) == "yes"
|
||||
|
||||
theme_preset = get_user_input(
|
||||
"Theme preset",
|
||||
"zinc",
|
||||
["zinc", "slate", "neutral"]
|
||||
)
|
||||
|
||||
sidebar_layout = get_user_input(
|
||||
"Include sidebar layout?",
|
||||
"yes",
|
||||
["yes", "no"]
|
||||
) == "yes"
|
||||
|
||||
include_examples = get_user_input(
|
||||
"Include example pages?",
|
||||
"yes",
|
||||
["yes", "no"]
|
||||
) == "yes"
|
||||
|
||||
config = {
|
||||
"use_dark_mode": use_dark_mode,
|
||||
"theme_preset": theme_preset,
|
||||
"sidebar_layout": sidebar_layout,
|
||||
"include_examples": include_examples
|
||||
}
|
||||
|
||||
print("\n" + "="*60)
|
||||
print("Starting setup with your configuration...")
|
||||
print("="*60 + "\n")
|
||||
|
||||
# Install dependencies
|
||||
manager.install_dependencies(use_dark_mode)
|
||||
|
||||
# Initialize shadcn/ui
|
||||
manager.init_shadcn()
|
||||
|
||||
# Add base shadcn components
|
||||
base_components = ["button", "card", "input", "label", "dialog", "separator"]
|
||||
manager.add_shadcn_components(base_components)
|
||||
|
||||
# Create utils file
|
||||
manager.create_utils_file()
|
||||
|
||||
# Note: Template file copying requires the skill's asset directory
|
||||
# This would be handled by the SKILL.md instructions to copy files
|
||||
print("\n[INFO] Note: Template files should be copied by the skill instructions")
|
||||
print(" This script handles dependency installation and shadcn/ui setup")
|
||||
|
||||
# Print summary
|
||||
manager.print_summary(config)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
try:
|
||||
main()
|
||||
except KeyboardInterrupt:
|
||||
print("\n\n[WARN] Setup cancelled by user")
|
||||
sys.exit(1)
|
||||
except Exception as e:
|
||||
print(f"\n[ERROR] Error: {e}")
|
||||
sys.exit(1)
|
||||
Reference in New Issue
Block a user