tailwind-shadcn-ui-setup（Tailwind CSS shadcn/ui UI 设置） Skills下载安装命令和教程

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：tailwind-shadcn-ui-setup（Tailwind CSS shadcn/ui UI 设置）
来源仓库：https://github.com/hopeoverture/worldbuilding-app-skills
仓库路径：skills/tailwind-shadcn-ui-setup
安装命令：
npx skills add https://github.com/hopeoverture/worldbuilding-app-skills --skill tailwind-shadcn-ui-setup
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/hopeoverture/worldbuilding-app-skills --skill tailwind-shadcn-ui-setup

简介

为 Next.js App Router 项目提供完整的 Tailwind CSS + shadcn/ui 生产级配置。

包含依赖安装、深色模式、无障碍支持与示例页面等全套初始化内容。
与 Tailwind v4 兼容，遵循 Anthropic 官方技能开发规范。
部署后建议运行本地预览以验证样式与交互效果是否正常。
tailwind-shadcn-ui-setup 属于前端设计类 Skill，可作为该场景下的辅助能力补充。

SKILL.md

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:

Next.js 16 project exists with App Router (app/ directory)
Package manager: npm (script uses npm install)
Project structure: Valid package.json at project root
TypeScript: Recommended (all templates use .tsx/.ts)

To verify:

# 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:

Enable dark mode? (default: yes)

- Installs next-themes, adds ThemeProvider, creates mode toggle

Theme preset (zinc | slate | neutral, default: zinc)

- Determines base color palette in CSS variables

Include sidebar layout? (default: yes)

- Adds responsive sidebar navigation using Sheet component

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:

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:

Tailwind Configuration # Copy and create cp assets/tailwind.config.ts.template project/tailwind.config.ts cp assets/postcss.config.js.template project/postcss.config.js
Global Styles # Copy and replace {{THEME_PRESET}} with user's choice cp assets/globals.css.template project/app/globals.css # Replace: {{THEME_PRESET}} → zinc | slate | neutral
Utility Functions cp assets/lib/utils.ts project/lib/utils.ts

Step 4: Add Core Components

Copy theme and layout components from assets/components/:

Theme Provider (if dark mode enabled) cp assets/components/theme-provider.tsx project/components/theme-provider.tsx cp assets/components/mode-toggle.tsx project/components/mode-toggle.tsx
App Shell (if sidebar layout enabled) cp assets/components/app-shell.tsx project/components/app-shell.tsx

Step 5: Update App Layout

Update or create app/layout.tsx:

# 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:

# 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:

# 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:

# 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:

## Design System & UI

This project uses Tailwind CSS and shadcn/ui for styling and components.

### Customizing Colors

Edit CSS variables in `app/globals.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

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:

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:

--primary: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;

Slate - Slightly cooler, tech-focused:

--primary: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;

Neutral - True neutral grays:

--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:

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:

<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:

# 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:

# 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:

Verify <html suppressHydrationWarning> in layout
Ensure ThemeProvider wraps {children}
Check tailwind.config.ts has darkMode: 'class'

Issue: shadcn components not found

Cause: components.json misconfigured or components not installed

Solution:

# 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:

# From skill directory
cat references/theme-tokens.md

Scripts (Executable)

setup_tailwind_shadcn.py: Main automation script for dependency installation and configuration

Execute directly:

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

[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:

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:

Customize brand colors

- Edit --primary in app/globals.css - Test contrast ratios

Add more components

- Run npx shadcn-ui add [component] as needed - See references/shadcn-component-list.md for options

Configure responsive breakpoints

- Adjust Tailwind screens in tailwind.config.ts if needed

Set up linting

- Install eslint-plugin-jsx-a11y for accessibility linting - Add Prettier + Tailwind plugin for formatting

Test production build 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.

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

35.02%

按下载量换算46

Claude

29.87%

按下载量换算39

Cursor

19.27%

按下载量换算25

Gemini CLI

8.55%

按下载量换算11

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/hopeoverture/worldbuilding-app-skills

SKILL.md 来源

github.com

/hopeoverture/worldbuilding-app-skills/tree/main/skills/tailwind-shadcn-ui-setup

skills-sh

skills.sh

/hopeoverture/worldbuilding-app-skills/tailwind-shadcn-ui-setup

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

tailwind-shadcn（Tailwind CSS shadcn/ui 前端）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

下一个 Skill

tailwind-ssr（Tailwind CSS SSR 前端）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。