claude

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: claude
description: Use this skill whenever building, editing, or reviewing user-facing software — web apps, mobile, dashboards, marketing sites, internal tools, design systems, component libraries — or any code change that produces visual output. Triggers on requests to "build a UI", "design a page", "make a component", "improve the look", "polish this", "make it nicer", "make it production-ready", "ship-quality", or whenever you're scaffolding a new app/screen/feature with visible surface area. Encodes opinionated defaults for typography, spacing, color, motion, accessibility, component states, and the code patterns that hold up under real users.
version: 1.0.0
triggers:
  - build a UI
  - design a page
  - make a component
  - improve the look
  - polish this
  - make it nicer
  - make it production-ready
  - ship-quality
  - create interface
stack:
  - React
  - Tailwind CSS
  - shadcn/ui
  - TypeScript
  - Next.js
---

# Claude Design & Development Skill

A field guide for producing software that looks and feels professionally designed — not "AI-generated." The job is restraint plus rigor: most decisions are about what to leave out and what to handle when things go wrong.

Read the whole document before starting a non-trivial UI task. For small edits, scan the **Pre-Ship Checklist** at the end.

---

## Table of Contents

1. [Operating Principles](#1-operating-principles)
2. [Visual Language](#2-visual-language)
   - [Typography](#21-typography)
   - [Color System](#22-color-system)
   - [Spacing](#23-spacing)
   - [Layout](#24-layout)
   - [Borders, Radii & Shadows](#25-borders-radii--shadows)
   - [Iconography](#26-iconography)
   - [Imagery](#27-imagery)
3. [Motion](#3-motion)
4. [Component Patterns](#4-component-patterns)
   - [Buttons](#41-buttons)
   - [Forms](#42-forms)
   - [Tables](#43-tables)
   - [Modals & Dialogs](#44-modals--dialogs)
   - [Empty / Error / Loading States](#45-empty--error--loading-states)
   - [Navigation](#46-navigation)
   - [Toasts & Notifications](#47-toasts--notifications)
5. [Accessibility](#5-accessibility)
6. [Performance](#6-performance)
7. [Code Quality](#7-code-quality)
8. [Tailwind CSS Patterns](#8-tailwind-css-patterns)
9. [Common Patterns](#9-common-patterns)
10. [Anti-Patterns](#10-anti-patterns)
11. [Pre-Ship Checklist](#11-pre-ship-checklist)
12. [Quick Reference](#12-quick-reference)

---

## 1. Operating Principles

These are load-bearing. Internalize them — they resolve most micro-decisions.

1. **Restraint over abundance.** Fewer colors, fewer fonts, fewer effects, fewer words. Every element earns its place. When in doubt, remove it.
2. **Hierarchy through space and weight, not decoration.** Borders, boxes, dividers, and gradients are last resorts. Whitespace and typographic weight are first resorts.
3. **Content shapes layout.** Don't design empty containers and pour content in. Start from the longest realistic string, the worst-case empty state, the largest realistic dataset.
4. **Every interactive element has five states.** Default, hover, active, focus-visible, disabled. Async ones add loading and error. Forms add validation. Plan all of them; don't ship only "default."
5. **The error/empty/loading states are the product.** Demos show happy paths. Real software lives in the unhappy paths. Design them with the same care as the primary view.
6. **Accessibility is not a layer.** It's structural. Semantic HTML, keyboard reachability, visible focus, sufficient contrast — these are baseline correctness, not polish.
7. **Performance is a feature.** Slow UI feels broken regardless of how it looks. Budget in the first design pass, not the last.
8. **Consistency beats local optimization.** A component that's slightly worse but matches the system is better than a one-off that's slightly better.
9. **Match the medium.** A B2B admin tool should not look like a consumer landing page. A landing page should not look like a Linear clone. Pick a register and hold it.
10. **Wri