component-design

majiayu000

更新日 Yesterday

17 閲覧

メタreactdesign

について

このスキルは、アトミックデザイン原則とコンポジションパターンを用いてReact/Vueコンポーネントを設計します。コンパウンドコンポーネントやレンダープロップなどのパターンを通じて、一貫性のある再利用可能なUIコンポーネント作成のガイダンスを提供します。スケーラブルなフロントエンド開発のためのコンポーネントライブラリを構築・構築する際にご利用ください。

クイックインストール

Claude Code

推奨

プラグインコマンド推奨

/plugin add https://github.com/majiayu000/claude-skill-registry

Git クローン代替

git clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/component-design

このコマンドをClaude Codeにコピー＆ペーストしてスキルをインストールします

ドキュメント

Component Design Skill

Purpose

Create consistent, reusable UI components.

Atomic Design

Reference: patterns/atomic-design.md

Hierarchy

Atoms: Basic elements (Button, Input, Label)
Molecules: Simple groups (FormField, SearchBox)
Organisms: Complex sections (Header, Form, Card)
Templates: Page layouts
Pages: Specific instances

Component Patterns

Reference: patterns/composition.md

Compound Components

<Select>
  <Select.Trigger />
  <Select.Content>
    <Select.Item value="1">Option 1</Select.Item>
  </Select.Content>
</Select>

Render Props

<DataFetcher url="/api/users">
  {({ data, loading }) => (
    loading ? <Spinner /> : <UserList users={data} />
  )}
</DataFetcher>

Custom Hooks

function useUser(id: string) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  // ...
  return { user, loading, error };
}

Props Interface

interface ButtonProps {
  /** Visual variant of the button */
  variant?: 'primary' | 'secondary' | 'ghost';
  /** Size of the button */
  size?: 'sm' | 'md' | 'lg';
  /** Whether button is disabled */
  disabled?: boolean;
  /** Click handler */
  onClick?: () => void;
  /** Button content */
  children: React.ReactNode;
}

Component Template

Use: templates/component-template.tsx

State Management

Reference: patterns/state-management.md

Decision Tree

UI-only state → useState
Complex local state → useReducer
Shared between siblings → Lift to parent
Shared across app → Context or global store
Server state → React Query/SWR

GitHub リポジトリ

majiayu000/claude-skill-registry

パス: skills/component-design