From 925b2de0f6510ac3073ccfaa87e1362df96142a0 Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sat, 29 Nov 2025 18:46:58 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 12 + README.md | 3 + plugin.lock.json | 113 ++++ skills/tailwind-shadcn-ui-setup/SKILL.md | 493 ++++++++++++++++ .../assets/app/examples/dialogs/page.tsx | 266 +++++++++ .../assets/app/examples/forms/page.tsx | 195 +++++++ .../assets/app/examples/layout.tsx | 32 + .../assets/app/examples/theme/page.tsx | 303 ++++++++++ .../assets/app/layout.tsx.template | 40 ++ .../assets/app/page.tsx.template | 141 +++++ .../assets/components/app-shell.tsx | 162 ++++++ .../assets/components/mode-toggle.tsx | 40 ++ .../assets/components/theme-provider.tsx | 9 + .../assets/globals.css.template | 97 ++++ .../assets/postcss.config.js.template | 6 + .../assets/tailwind.config.ts.template | 75 +++ .../references/accessibility-checklist.md | 484 ++++++++++++++++ .../references/shadcn-component-list.md | 370 ++++++++++++ .../references/tailwind-v4-migration.md | 206 +++++++ .../references/theme-tokens.md | 548 ++++++++++++++++++ .../scripts/setup_tailwind_shadcn.py | 339 +++++++++++ 21 files changed, 3934 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 plugin.lock.json create mode 100644 skills/tailwind-shadcn-ui-setup/SKILL.md create mode 100644 skills/tailwind-shadcn-ui-setup/assets/app/examples/dialogs/page.tsx create mode 100644 skills/tailwind-shadcn-ui-setup/assets/app/examples/forms/page.tsx create mode 100644 skills/tailwind-shadcn-ui-setup/assets/app/examples/layout.tsx create mode 100644 skills/tailwind-shadcn-ui-setup/assets/app/examples/theme/page.tsx create mode 100644 skills/tailwind-shadcn-ui-setup/assets/app/layout.tsx.template create mode 100644 skills/tailwind-shadcn-ui-setup/assets/app/page.tsx.template create mode 100644 skills/tailwind-shadcn-ui-setup/assets/components/app-shell.tsx create mode 100644 skills/tailwind-shadcn-ui-setup/assets/components/mode-toggle.tsx create mode 100644 skills/tailwind-shadcn-ui-setup/assets/components/theme-provider.tsx create mode 100644 skills/tailwind-shadcn-ui-setup/assets/globals.css.template create mode 100644 skills/tailwind-shadcn-ui-setup/assets/postcss.config.js.template create mode 100644 skills/tailwind-shadcn-ui-setup/assets/tailwind.config.ts.template create mode 100644 skills/tailwind-shadcn-ui-setup/references/accessibility-checklist.md create mode 100644 skills/tailwind-shadcn-ui-setup/references/shadcn-component-list.md create mode 100644 skills/tailwind-shadcn-ui-setup/references/tailwind-v4-migration.md create mode 100644 skills/tailwind-shadcn-ui-setup/references/theme-tokens.md create mode 100644 skills/tailwind-shadcn-ui-setup/scripts/setup_tailwind_shadcn.py diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..c5278f4 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -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" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..be97b84 --- /dev/null +++ b/README.md @@ -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 diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..9318de7 --- /dev/null +++ b/plugin.lock.json @@ -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": [] + } +} \ No newline at end of file diff --git a/skills/tailwind-shadcn-ui-setup/SKILL.md b/skills/tailwind-shadcn-ui-setup/SKILL.md new file mode 100644 index 0000000..29edc4a --- /dev/null +++ b/skills/tailwind-shadcn-ui-setup/SKILL.md @@ -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 `` 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 `` 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 + + {children} + +``` + +## 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 `` 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) +
+ +[ERROR] Bad (hard-coded) +
+``` + +### 3. Maintain Type Safety + +Use TypeScript for all components: +```tsx +interface ButtonProps extends React.ButtonHTMLAttributes { + 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. diff --git a/skills/tailwind-shadcn-ui-setup/assets/app/examples/dialogs/page.tsx b/skills/tailwind-shadcn-ui-setup/assets/app/examples/dialogs/page.tsx new file mode 100644 index 0000000..6c25199 --- /dev/null +++ b/skills/tailwind-shadcn-ui-setup/assets/app/examples/dialogs/page.tsx @@ -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 ( +
+
+

Dialog Examples

+

+ Modal dialogs with focus trapping and keyboard navigation +

+
+ +
+ {/* Basic Dialog */} + + + Basic Dialog + Simple dialog with title and content + + + + + + + + + Welcome! + + This is a basic dialog example. Press ESC or click outside to + close. + + +
+

+ Dialogs automatically handle: +

+
    +
  • Focus trapping
    • +
  • Keyboard navigation (ESC to close)
    • +
  • Backdrop click to dismiss
    • +
  • Return focus on close
    • +
+
+ + + + + + + + + {/* Dialog with Form */} + + + Dialog with Form + Dialog containing a form with inputs + + + + + + + + + Edit Profile + + Make changes to your profile here. Click save when you're + done. + + +
+
+ + +
+
+ + +
+
+ + + + + + + + + + {/* Confirmation Dialog */} + + + Confirmation Dialog + Destructive action confirmation + + + + + + + + + Are you absolutely sure? + + This action cannot be undone. This will permanently delete + your item and remove your data from our servers. + + + + + + + + + + + + {/* Info Dialog */} + + + Information Dialog + Display information without actions + + + + + + + + + About This App + + Built with modern web technologies + + +
+
+

Stack

+
    +
  • • Next.js 16 with App Router
    • +
  • • React 19
    • +
  • • Tailwind CSS v3/v4
    • +
  • • shadcn/ui components
    • +
  • • TypeScript
    • +
+
+
+

Features

+
    +
  • • Dark mode support
    • +
  • • Fully accessible (WCAG 2.1 AA)
    • +
  • • Type-safe
    • +
  • • Production-ready
    • +
+
+
+ + + + +
+ + {/* Accessibility Info */} + + + Dialog Accessibility + + shadcn/ui dialogs are built on Radix UI with full accessibility + + + +
+
+

Keyboard Navigation

+
    +
  • + ESC - + Close dialog +
    • +
  • + Tab - + Move focus forward +
    • +
  • + + Shift + Tab + {' '} + - Move focus backward +
    • +
+
+ +
+

Screen Reader Support

+
    +
  • + Dialog title is announced via{' '} + aria-labelledby +
    • +
  • + Description is read via{' '} + aria-describedby +
    • +
  • Focus is trapped within dialog when open
    • +
  • Focus returns to trigger element on close
    • +
+
+ +
+

Mouse/Touch Support

+
    +
  • Click backdrop to dismiss (optional)
    • +
  • Close button in top-right corner
    • +
  • Scroll content if overflowing
    • +
+
+
+ + +
+ ) +} diff --git a/skills/tailwind-shadcn-ui-setup/assets/app/examples/forms/page.tsx b/skills/tailwind-shadcn-ui-setup/assets/app/examples/forms/page.tsx new file mode 100644 index 0000000..735a0cd --- /dev/null +++ b/skills/tailwind-shadcn-ui-setup/assets/app/examples/forms/page.tsx @@ -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) => { + 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 ( +
+
+

Form Examples

+

+ Accessible form components with HTML5 validation +

+
+ +
+ {/* Basic Form */} + + + Contact Form + + Basic form with HTML5 validation and toast notifications + + +
+ +
+ + +
+ +
+ + +
+ +
+ +