design-systems

Name: design-systems
Author: dralgorhythm

github.com/dralgorhythmデザイン・UI12960 回インストール14 週間前に更新

リポジトリ

design-systems について

再利用可能な UI コンポーネントで一貫性のあるアプリを構築するためのデザインシステムスキルです。アトミックな構成、デザイントークン、コンポーネント API、ドキュメント作成を扱います。

主な機能

01アトミックデザインによる構成
02再利用可能なデザイントークンの定義
03コンポーネント API の記述
04用途とアクセシビリティの文書化

活用シーン

01コンポーネントライブラリの階層設計
02共通カラーとコンポーネントのバリアント指定
03プロパティと利用ガイドの作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill design-systems

インストール後、Claude Code で/design-systemsを入力して読み込まれたか確認します。

詳細

デザインシステム

デザインシステムとは？

明確な基準に沿った再利用可能なコンポーネントの集合で、組み合わせてアプリケーションを構築できます。

コンポーネント

アトミックデザイン

アトム：基本的な構成要素

ボタン、入力フィールド、ラベル、アイコン

モレキュール：シンプルな組み合わせ

検索バー（入力フィールド＋ボタン）
フォームフィールド（ラベル＋入力フィールド＋エラー）

オーガニズム：複雑なコンポーネント

ヘッダー、サイドバー、カード

テンプレート：ページレイアウト

ダッシュボード、設定ページ

ページ：具体的なインスタンス

ユーザーダッシュボード、管理者設定

デザイントークン

{
  "color": {
    "primary": {
      "50": "#f0f9ff",
      "500": "#0ea5e9",
      "900": "#0c4a6e"
    },
    "neutral": {
      "100": "#f5f5f5",
      "900": "#171717"
    }
  },
  "spacing": {
    "1": "0.25rem",
    "2": "0.5rem",
    "4": "1rem",
    "8": "2rem"
  },
  "font": {
    "family": {
      "sans": "Inter, sans-serif",
      "mono": "JetBrains Mono, monospace"
    },
    "size": {
      "sm": "0.875rem",
      "base": "1rem",
      "lg": "1.125rem"
    }
  },
  "radius": {
    "sm": "0.25rem",
    "md": "0.375rem",
    "lg": "0.5rem"
  }
}

コンポーネント API

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