component-architecture

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Component Architecture

组件架构

Overview

概述

Components are the building blocks of modern interfaces. A well-designed component system enables consistency, speeds up development, and makes maintenance easier. This skill teaches you to think about components systematically: designing for reusability, managing complexity, documenting thoroughly, and building a library that your team loves to use.

组件是现代界面的构建块。设计精良的组件系统能够确保一致性、加速开发并简化维护工作。本技能将教你系统性地思考组件设计：面向复用性设计、管理复杂度、完善文档编写，以及打造团队乐于使用的组件库。

Core Methodology: Atomic Design

核心方法论：原子设计（Atomic Design）

Atomic Design is a methodology for creating design systems by breaking down interfaces into fundamental building blocks.

Atomic Design是一种通过将界面分解为基础构建块来创建设计系统的方法论。

The Five Levels

五个层级

1. Atoms The smallest, most basic components. They can't be broken down further without losing their meaning.

Examples: Button, Input, Label, Icon, Badge, Spinner

Characteristics:

Single responsibility
Highly reusable
No dependencies on other components (except styling)
Fully self-contained

Example Atom: Button

typescript

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  onClick,
  children,
}) => {
  return (
    <button
      className={`button button--${variant} button--${size}`}
      disabled={disabled || loading}
      onClick={onClick}
    >
      {loading && <Spinner size="sm" />}
      {children}
    </button>
  );
};

2. Molecules Groups of atoms bonded together to form relatively simple functional units.

Examples: Form Input (Label + Input + Error Message), Search Bar (Icon + Input + Button), Card Header (Avatar + Name + Date)

Characteristics:

Composed of atoms
Serve a specific purpose
Reusable across the product
Have a clear interface (props)

Example Molecule: Form Input

typescript

interface FormInputProps {
  label: string;
  placeholder?: string;
  error?: string;
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
}

export const FormInput: React.FC<FormInputProps> = ({
  label,
  placeholder,
  error,
  value,
  onChange,
  disabled,
}) => {
  return (
    <div className="form-input">
      <Label>{label}</Label>
      <Input
        placeholder={placeholder}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
        aria-invalid={!!error}
      />
      {error && <ErrorMessage>{error}</ErrorMessage>}
    </div>
  );
};

3. Organisms Relatively complex UI sections composed of groups of molecules and/or atoms and/or other organisms.

Examples: Navigation Bar, Form, Card, Modal, Sidebar

Characteristics:

Composed of molecules and atoms
Serve a specific business purpose
More complex interfaces
Often have state management

Example Organism: Card

typescript

interface CardProps {
  title: string;
  description?: string;
  image?: string;
  action?: {
    label: string;
    onClick: () => void;
  };
  children?: React.ReactNode;
}

export const Card: React.FC<CardProps> = ({
  title,
  description,
  image,
  action,
  children,
}) => {
  return (
    <div className="card">
      {image && <img src={image} alt={title} className="card-image" />}
      <div className="card-content">
        <h3 className="card-title">{title}</h3>
        {description && <p className="card-description">{description}</p>}
        {children}
        {action && (
          <Button onClick={action.onClick} variant="secondary">
            {action.label}
          </Button>
        )}
      </div>
    </div>
  );
};

4. Templates Page-level objects that place components into a layout and articulate the design's underlying content structure.

Examples: Blog Post Template, Product Page Template, Dashboard Template

Characteristics:

Composed of organisms, molecules, and atoms
Define page structure and layout
Show how components work together
Not typically reusable (specific to page type)

Example Template: Blog Post

typescript

export const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({
  title,
  author,
  date,
  image,
  content,
  relatedPosts,
}) => {
  return (
    <div className="blog-post-template">
      <Header />
      <article className="blog-post">
        <div className="blog-post-hero">
          <img src={image} alt={title} />
        </div>
        <div className="blog-post-content">
          <h1>{title}</h1>
          <div className="blog-post-meta">
            <Avatar src={author.avatar} alt={author.name} />
            <span>{author.name}</span>
            <span>{formatDate(date)}</span>
          </div>
          <div className="blog-post-body">{content}</div>
        </div>
      </article>
      <section className="related-posts">
        <h2>Related Posts</h2>
        <div className="related-posts-grid">
          {relatedPosts.map((post) => (
            <Card key={post.id} {...post} />
          ))}
        </div>
      </section>
      <Footer />
    </div>
  );
};

5. Pages Specific instances of templates that show what the UI looks like with real data.

Examples: Homepage, Product Page, User Profile, Dashboard

Characteristics:

Instances of templates with real data
Used for testing and demonstration
Show how components behave with actual content
Help identify edge cases and issues

1. Atoms（原子） 最小、最基础的组件。它们无法再被拆分，否则会失去其意义。

示例：Button、Input、Label、Icon、Badge、Spinner

特点：

单一职责
高度可复用
不依赖其他组件（样式依赖除外）
完全自包含

示例原子：Button

typescript

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  onClick,
  children,
}) => {
  return (
    <button
      className={`button button--${variant} button--${size}`}
      disabled={disabled || loading}
      onClick={onClick}
    >
      {loading && <Spinner size="sm" />}
      {children}
    </button>
  );
};

2. Molecules（分子） 由多个原子组合而成的相对简单的功能单元。

示例：表单输入框（Label + Input + 错误提示）、搜索栏（Icon + Input + Button）、卡片头部（Avatar + 名称 + 日期）

特点：

由原子组合而成
具备特定功能
可在产品中复用
拥有清晰的属性接口

示例分子：Form Input

typescript

interface FormInputProps {
  label: string;
  placeholder?: string;
  error?: string;
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
}

export const FormInput: React.FC<FormInputProps> = ({
  label,
  placeholder,
  error,
  value,
  onChange,
  disabled,
}) => {
  return (
    <div className="form-input">
      <Label>{label}</Label>
      <Input
        placeholder={placeholder}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
        aria-invalid={!!error}
      />
      {error && <ErrorMessage>{error}</ErrorMessage>}
    </div>
  );
};

3. Organisms（有机体） 由多个分子、原子或其他有机体组合而成的相对复杂的UI区域。

示例：导航栏、表单、卡片、模态框、侧边栏

特点：

由分子和原子组合而成
具备特定业务功能
界面复杂度更高
通常包含状态管理

示例有机体：Card

typescript

interface CardProps {
  title: string;
  description?: string;
  image?: string;
  action?: {
    label: string;
    onClick: () => void;
  };
  children?: React.ReactNode;
}

export const Card: React.FC<CardProps> = ({
  title,
  description,
  image,
  action,
  children,
}) => {
  return (
    <div className="card">
      {image && <img src={image} alt={title} className="card-image" />}
      <div className="card-content">
        <h3 className="card-title">{title}</h3>
        {description && <p className="card-description">{description}</p>}
        {children}
        {action && (
          <Button onClick={action.onClick} variant="secondary">
            {action.label}
          </Button>
        )}
      </div>
    </div>
  );
};

4. Templates（模板） 页面级别的对象，用于将组件放置到布局中，并明确设计的底层内容结构。

示例：博客文章模板、产品页面模板、仪表盘模板

特点：

由有机体、分子和原子组合而成
定义页面结构和布局
展示组件如何协同工作
通常不可复用（针对特定页面类型）

示例模板：博客文章

typescript

export const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({
  title,
  author,
  date,
  image,
  content,
  relatedPosts,
}) => {
  return (
    <div className="blog-post-template">
      <Header />
      <article className="blog-post">
        <div className="blog-post-hero">
          <img src={image} alt={title} />
        </div>
        <div className="blog-post-content">
          <h1>{title}</h1>
          <div className="blog-post-meta">
            <Avatar src={author.avatar} alt={author.name} />
            <span>{author.name}</span>
            <span>{formatDate(date)}</span>
          </div>
          <div className="blog-post-body">{content}</div>
        </div>
      </article>
      <section className="related-posts">
        <h2>Related Posts</h2>
        <div className="related-posts-grid">
          {relatedPosts.map((post) => (
            <Card key={post.id} {...post} />
          ))}
        </div>
      </section>
      <Footer />
    </div>
  );
};

5. Pages（页面） 模板的具体实例，展示了真实数据下的UI效果。

示例：首页、产品页、用户资料页、仪表盘

特点：

带有真实数据的模板实例
用于测试和演示
展示组件在实际内容中的表现
帮助识别边缘情况和问题

Component Design Principles

组件设计原则

Principle 1: Single Responsibility

原则1：单一职责

Each component should have one clear purpose. If a component does too much, break it down.

Bad:

typescript

// Does too much: rendering, data fetching, form handling, validation
const UserProfile = () => {
  const [user, setUser] = useState(null);
  const [formData, setFormData] = useState({});
  const [errors, setErrors] = useState({});
  
  useEffect(() => {
    fetchUser().then(setUser);
  }, []);
  
  const handleSubmit = () => {
    // validation logic
    // submission logic
  };
  
  return (
    // complex JSX
  );
};

Good:

typescript

// UserProfile: Orchestrates the page
const UserProfile = () => {
  const { user } = useUser();
  return (
    <>
      <UserHeader user={user} />
      <UserEditForm user={user} />
      <UserActivity user={user} />
    </>
  );
};

// UserHeader: Displays user info
const UserHeader = ({ user }) => (
  <div className="user-header">
    <Avatar src={user.avatar} />
    <h1>{user.name}</h1>
  </div>
);

// UserEditForm: Handles form state and submission
const UserEditForm = ({ user }) => {
  // form logic
};

// UserActivity: Displays user activity
const UserActivity = ({ user }) => {
  // activity logic
};

每个组件应具备明确的单一职责。如果一个组件承担过多功能，应将其拆分。

反面示例：

typescript

// 职责过多：渲染、数据获取、表单处理、验证
const UserProfile = () => {
  const [user, setUser] = useState(null);
  const [formData, setFormData] = useState({});
  const [errors, setErrors] = useState({});
  
  useEffect(() => {
    fetchUser().then(setUser);
  }, []);
  
  const handleSubmit = () => {
    // 验证逻辑
    // 提交逻辑
  };
  
  return (
    // 复杂JSX
  );
};

正面示例：

typescript

// UserProfile：负责页面编排
const UserProfile = () => {
  const { user } = useUser();
  return (
    <>
      <UserHeader user={user} />
      <UserEditForm user={user} />
      <UserActivity user={user} />
    </>
  );
};

// UserHeader：展示用户信息
const UserHeader = ({ user }) => (
  <div className="user-header">
    <Avatar src={user.avatar} />
    <h1>{user.name}</h1>
  </div>
);

// UserEditForm：处理表单状态和提交
const UserEditForm = ({ user }) => {
  // 表单逻辑
};

// UserActivity：展示用户活动
const UserActivity = ({ user }) => {
  // 活动逻辑
};

Principle 2: Composition Over Inheritance

原则2：组合优于继承

Build complex components by composing simpler ones, not by inheritance.

Bad:

typescript

// Inheritance approach (avoid)
class Button extends React.Component {}
class PrimaryButton extends Button {}
class LargeButton extends Button {}
class LargePrimaryButton extends Button {}

Good:

typescript

// Composition approach (prefer)
const Button = ({ variant = 'primary', size = 'md', ...props }) => (
  <button className={`button button--${variant} button--${size}`} {...props} />
);

// Use composition to create variants
const PrimaryButton = (props) => <Button variant="primary" {...props} />;
const LargeButton = (props) => <Button size="lg" {...props} />;
const LargePrimaryButton = (props) => <Button variant="primary" size="lg" {...props} />;

通过组合简单组件来构建复杂组件，而非使用继承。

反面示例：

typescript

// 继承方式（应避免）
class Button extends React.Component {}
class PrimaryButton extends Button {}
class LargeButton extends Button {}
class LargePrimaryButton extends Button {}

正面示例：

typescript

// 组合方式（推荐）
const Button = ({ variant = 'primary', size = 'md', ...props }) => (
  <button className={`button button--${variant} button--${size}`} {...props} />
);

// 通过组合创建变体
const PrimaryButton = (props) => <Button variant="primary" {...props} />;
const LargeButton = (props) => <Button size="lg" {...props} />;
const LargePrimaryButton = (props) => <Button variant="primary" size="lg" {...props} />;

Principle 3: Props Interface Design

原则3：属性接口设计

Design component props carefully. Props should be:

Intuitive — Props should be self-explanatory
Flexible — Props should support common use cases
Constrained — Props should prevent invalid states
Documented — Props should be clearly documented

Example: Well-Designed Props

typescript

interface ButtonProps {
  // Variant and size are constrained to valid options
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  
  // Boolean props are explicit
  disabled?: boolean;
  loading?: boolean;
  fullWidth?: boolean;
  
  // Callbacks are clearly named
  onClick?: () => void;
  onHover?: () => void;
  
  // Content is flexible
  children: React.ReactNode;
  icon?: React.ReactNode;
  
  // HTML attributes can be passed through
  className?: string;
  'aria-label'?: string;
}

精心设计组件的属性接口。属性应具备：

直观性 — 属性应具备自解释性
灵活性 — 属性应支持常见使用场景
约束性 — 属性应防止无效状态
文档化 — 属性应具备清晰的文档

示例：设计精良的属性接口

typescript

interface ButtonProps {
  // 变体和大小被约束为有效选项
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  
  // 布尔属性明确清晰
  disabled?: boolean;
  loading?: boolean;
  fullWidth?: boolean;
  
  // 回调函数命名清晰
  onClick?: () => void;
  onHover?: () => void;
  
  // 内容具备灵活性
  children: React.ReactNode;
  icon?: React.ReactNode;
  
  // 可传递HTML属性
  className?: string;
  'aria-label'?: string;
}

Principle 4: Controlled vs. Uncontrolled

原则4：受控与非受控组件

Be explicit about whether a component is controlled (parent manages state) or uncontrolled (component manages state).

Controlled Component:

typescript

const ControlledInput = ({ value, onChange }) => (
  <input value={value} onChange={(e) => onChange(e.target.value)} />
);

// Parent manages state
const Parent = () => {
  const [value, setValue] = useState('');
  return <ControlledInput value={value} onChange={setValue} />;
};

Uncontrolled Component:

typescript

const UncontrolledInput = ({ defaultValue, onSubmit }) => {
  const inputRef = useRef(null);
  
  return (
    <>
      <input ref={inputRef} defaultValue={defaultValue} />
      <button onClick={() => onSubmit(inputRef.current.value)}>Submit</button>
    </>
  );
};

// Parent doesn't manage state
const Parent = () => {
  return <UncontrolledInput onSubmit={(value) => console.log(value)} />;
};

明确组件是受控组件（由父组件管理状态）还是非受控组件（由组件自身管理状态）。

受控组件：

typescript

const ControlledInput = ({ value, onChange }) => (
  <input value={value} onChange={(e) => onChange(e.target.value)} />
);

// 父组件管理状态
const Parent = () => {
  const [value, setValue] = useState('');
  return <ControlledInput value={value} onChange={setValue} />;
};

非受控组件：

typescript

const UncontrolledInput = ({ defaultValue, onSubmit }) => {
  const inputRef = useRef(null);
  
  return (
    <>
      <input ref={inputRef} defaultValue={defaultValue} />
      <button onClick={() => onSubmit(inputRef.current.value)}>Submit</button>
    </>
  );
};

// 父组件不管理状态
const Parent = () => {
  return <UncontrolledInput onSubmit={(value) => console.log(value)} />;
};

Component Variants

组件变体

Defining Variants

定义变体

Variants are different versions of a component for different contexts. Define them clearly:

typescript

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  state?: 'default' | 'hover' | 'active' | 'disabled' | 'loading';
}

// Variants matrix
const Button = ({ variant = 'primary', size = 'md', state = 'default', ...props }) => {
  const variantClass = `button--${variant}`;
  const sizeClass = `button--${size}`;
  const stateClass = `button--${state}`;
  
  return (
    <button className={`button ${variantClass} ${sizeClass} ${stateClass}`} {...props} />
  );
};

// Usage
<Button variant="primary" size="md" state="default">Primary</Button>
<Button variant="secondary" size="lg" state="hover">Secondary Large</Button>
<Button variant="danger" size="sm" state="disabled">Delete</Button>

变体是组件在不同场景下的不同版本。需清晰定义：

typescript

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  state?: 'default' | 'hover' | 'active' | 'disabled' | 'loading';
}

// 变体矩阵
const Button = ({ variant = 'primary', size = 'md', state = 'default', ...props }) => {
  const variantClass = `button--${variant}`;
  const sizeClass = `button--${size}`;
  const stateClass = `button--${state}`;
  
  return (
    <button className={`button ${variantClass} ${sizeClass} ${stateClass}`} {...props} />
  );
};

// 使用示例
<Button variant="primary" size="md" state="default">Primary</Button>
<Button variant="secondary" size="lg" state="hover">Secondary Large</Button>
<Button variant="danger" size="sm" state="disabled">Delete</Button>

Variant Documentation

变体文档

Document all variants with examples:

markdown

undefined

为所有变体编写文档并提供示例：

markdown

undefined

Button Component

Variants

Variant: primary

Default button style
Used for primary actions
Example: "Save", "Submit", "Create"

默认按钮样式
用于主要操作
示例："Save"、"Submit"、"Create"

Variant: secondary

Secondary button style
Used for secondary actions
Example: "Cancel", "Back", "Skip"

次要按钮样式
用于次要操作
示例："Cancel"、"Back"、"Skip"

Variant: ghost

Minimal button style
Used for tertiary actions
Example: "Learn More", "View Details"

极简按钮样式
用于 tertiary 操作
示例："Learn More"、"View Details"

Variant: danger

Danger button style
Used for destructive actions
Example: "Delete", "Remove", "Discard"

危险按钮样式
用于破坏性操作
示例："Delete"、"Remove"、"Discard"

Sizes

Size: sm

32px height
12px font size
Used in compact spaces

32px 高度
12px 字体大小
用于紧凑空间

Size: md

40px height
14px font size
Default size

40px 高度
14px 字体大小
默认尺寸

Size: lg

48px height
16px font size
Used for prominent actions

48px 高度
16px 字体大小
用于突出显示的操作

States

State: default

Normal appearance

正常外观

State: hover

Slightly darker or lighter
Indicates interactivity

颜色略深或略浅
表示可交互

State: active

Pressed appearance
Indicates the button is being clicked

按下状态外观
表示按钮正在被点击

State: disabled

Grayed out
Cursor is not-allowed
Not clickable

灰度显示
光标为 not-allowed
不可点击

State: loading

Shows spinner
Indicates action in progress
Not clickable

undefined

显示加载动画
表示操作进行中
不可点击

undefined

Component Documentation

组件文档

What to Document

文档内容

Purpose — What does this component do?
Props — What props does it accept?
Variants — What variants are available?
States — What states can it be in?
Examples — How do you use it?
Accessibility — What accessibility features does it have?
Edge Cases — What edge cases should you be aware of?

用途 — 该组件的作用是什么？
属性 — 它接受哪些属性？
变体 — 有哪些可用变体？
状态 — 它可以处于哪些状态？
示例 — 如何使用它？
可访问性 — 它具备哪些可访问性特性？
边缘情况 — 需要注意哪些边缘情况？

Documentation Template

文档模板

markdown

undefined

markdown

undefined

Component Name

组件名称

Purpose

用途

Brief description of what this component does and when to use it.

简要描述该组件的作用及使用场景。

Props

属性

Prop	Type	Default	Description
`variant`	'primary' \| 'secondary'	'primary'	Visual variant
`size`	'sm' \| 'md' \| 'lg'	'md'	Component size
`disabled`	boolean	false	Disable the component
`children`	ReactNode	-	Component content

属性	类型	默认值	描述
`variant`	'primary' \| 'secondary'	'primary'	视觉变体
`size`	'sm' \| 'md' \| 'lg'	'md'	组件尺寸
`disabled`	boolean	false	禁用组件
`children`	ReactNode	-	组件内容

Variants

变体

Primary

Used for primary actions.

jsx

<Button variant="primary">Primary Action</Button>

用于主要操作。

jsx

<Button variant="primary">Primary Action</Button>

Secondary

Used for secondary actions.

jsx

<Button variant="secondary">Secondary Action</Button>

用于次要操作。

jsx

<Button variant="secondary">Secondary Action</Button>

States

状态

Default

Normal appearance.

正常外观。

Disabled

Grayed out, not clickable.

jsx

<Button disabled>Disabled</Button>

灰度显示，不可点击。

jsx

<Button disabled>Disabled</Button>

Loading

Shows spinner, not clickable.

jsx

<Button loading>Loading...</Button>

显示加载动画，不可点击。

jsx

<Button loading>Loading...</Button>

Accessibility

可访问性

Keyboard accessible (Enter, Space to activate)
Screen reader friendly (announces button text)
Focus visible (outline on focus)
Aria-label support for icon-only buttons

支持键盘操作（Enter、Space键激活）
适配屏幕阅读器（朗读按钮文本）
聚焦可见（聚焦时显示轮廓）
仅图标按钮支持aria-label属性

Examples

示例

Basic Button

基础按钮

jsx

<Button onClick={() => alert('Clicked!')}>Click Me</Button>

jsx

<Button onClick={() => alert('Clicked!')}>Click Me</Button>

With Icon

带图标按钮

jsx

<Button icon={<SaveIcon />}>Save</Button>

jsx

<Button icon={<SaveIcon />}>Save</Button>

Full Width

全宽按钮

jsx

<Button fullWidth>Full Width Button</Button>

jsx

<Button fullWidth>Full Width Button</Button>

Edge Cases

边缘情况

Icon-only buttons must have aria-label
Disabled buttons should not be clickable
Loading state should show spinner
Very long text should wrap or truncate

undefined

仅图标按钮必须设置aria-label
禁用按钮不应可点击
加载状态应显示加载动画
过长文本应自动换行或截断

undefined

How to Use This Skill with Claude Code

如何结合Claude Code使用本技能

Audit Your Components

组件审计

"I'm using the component-architecture skill. Can you audit my components?
- Identify components that violate single responsibility
- Suggest component composition improvements
- Check component documentation completeness
- Identify reusable patterns I'm missing
- Suggest component library structure"

"我正在使用组件架构技能。能否帮我审计我的组件？
- 识别违反单一职责原则的组件
- 提出组件组合的改进建议
- 检查组件文档的完整性
- 识别我遗漏的可复用模式
- 提出组件库结构建议"

Design a Component System

设计组件系统

"Can you help me design a component system?
- Define atomic components (atoms, molecules, organisms)
- Create component architecture
- Design component props interfaces
- Define variants for each component
- Create component documentation"

"能否帮我设计一个组件系统？
- 定义原子组件（atoms、molecules、organisms）
- 创建组件架构
- 设计组件属性接口
- 为每个组件定义变体
- 创建组件文档"

Refactor Components

重构组件

"Can you help me refactor my components?
- Break down complex components
- Improve component composition
- Simplify prop interfaces
- Add missing variants
- Improve documentation"

"能否帮我重构我的组件？
- 拆分复杂组件
- 改进组件组合
- 简化属性接口
- 添加缺失的变体
- 完善文档"

Generate Component Library

生成组件库

"Can you generate a component library?
- Create all atomic components (Button, Input, Label, etc.)
- Create molecules (FormInput, SearchBar, etc.)
- Create organisms (Card, Modal, etc.)
- Include TypeScript types
- Include Tailwind CSS styling
- Include comprehensive documentation"

"能否帮我生成一个组件库？
- 创建所有原子组件（Button、Input、Label等）
- 创建分子组件（FormInput、SearchBar等）
- 创建有机体组件（Card、Modal等）
- 包含TypeScript类型定义
- 包含Tailwind CSS样式
- 包含全面的文档"

Design Critique: Evaluating Your Components

设计评审：评估你的组件

Claude Code can critique your components:

"Can you evaluate my component architecture?
- Are my components following single responsibility?
- Is my component composition good?
- Are my prop interfaces well-designed?
- Is my documentation comprehensive?
- What's one thing I could improve immediately?"

Claude Code可以对你的组件进行评审：

"能否评估我的组件架构？
- 我的组件是否遵循单一职责原则？
- 我的组件组合是否合理？
- 我的属性接口设计是否精良？
- 我的文档是否全面？
- 我可以立即改进的一点是什么？"

Integration with Other Skills

与其他技能的集成

design-foundation — Component tokens and styling
layout-system — Component layout patterns
typography-system — Component typography
color-system — Component colors
accessibility-excellence — Component accessibility
interaction-design — Component interactions

design-foundation — 组件令牌与样式
layout-system — 组件布局模式
typography-system — 组件排版
color-system — 组件颜色
accessibility-excellence — 组件可访问性
interaction-design — 组件交互

Key Principles

核心原则

1. Single Responsibility Each component should have one clear purpose.

2. Composition Over Inheritance Build complex components by composing simpler ones.

3. Props Interface Design Design props carefully for clarity and flexibility.

4. Variants Enable Reusability Well-designed variants make components reusable across contexts.

5. Documentation Enables Adoption Comprehensive documentation helps your team use components effectively.

1. 单一职责 每个组件应具备明确的单一职责。

2. 组合优于继承 通过组合简单组件来构建复杂组件。

3. 属性接口设计 精心设计属性接口以确保清晰性和灵活性。

4. 变体提升复用性 设计精良的变体使组件能够在不同场景下复用。

5. 文档促进采用 全面的文档有助于团队有效使用组件。