菜单
Use Lucide React icons correctly. Reference file contains all 1,671 valid icon names — always verify against it before using an icon.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Set up GitHub Actions CI for lint, typecheck, and tests.
Set up and run Playwright end-to-end tests.
Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.
Configure Biome linting/formatting and Husky pre-commit hooks via Ultracite.
Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.
| name | lucide-icons |
| description | Use Lucide React icons correctly. Reference file contains all 1,671 valid icon names — always verify against it before using an icon. |
bun add lucide-react
import { ArrowRight, Check, Loader2 } from "lucide-react";
// Basic usage
<ArrowRight />
// With props
<ArrowRight size={16} strokeWidth={1.5} className="text-muted-foreground" />
arrow-right → ArrowRight, circle-check → CircleCheckBefore using any icon, verify it exists in references/icon-names.txt (1,671 icons, kebab-case).
To find icons by keyword, search the reference file:
grep "arrow" references/icon-names.txt
grep "chart" references/icon-names.txt
| Purpose | Icon |
|---|---|
| Close/dismiss | x |
| Menu | menu |
| Search | search |
| Settings | settings |
| User | user |
| Loading | loader-2 (add animate-spin) |
| Check/success | check, circle-check |
| Error | circle-x, triangle-alert |
| Info | info |
| Add | plus |
| Delete | trash-2 |
| Edit | pencil |
| Copy | copy |
| External link | external-link |
| Chevrons | chevron-up, chevron-down, chevron-left, chevron-right |
| Arrows | arrow-up, arrow-down, arrow-left, arrow-right |
| Sort | arrow-up-down |
| Filter | filter |
| Calendar | calendar |
mail | |
| Home | house |
Lucide is the default icon library for shadcn/ui. Icons work directly in Button, DropdownMenu, etc:
import { Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
<Button>
<Plus /> New Item
</Button>
shadcn/ui Button automatically sizes icons — no need to pass size prop.
references/icon-names.txtcircle-check over check for status indicatorssize prop across a component