jpskill.com
🎨 デザイン コミュニティ

ui-component-creation

shadcn/uiとデザインシステムのパターンを活用し、洗練されたUIコンポーネントを効率的に作成することで、より魅力的で使いやすいWebアプリケーションを開発するSkill。

📜 元の英語説明(参考)

Creates UI components using shadcn/ui and design system patterns

🇯🇵 日本人クリエイター向け解説

一言でいうと

shadcn/uiとデザインシステムのパターンを活用し、洗練されたUIコンポーネントを効率的に作成することで、より魅力的で使いやすいWebアプリケーションを開発するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o ui-component-creation.zip https://jpskill.com/download/17920.zip && unzip -o ui-component-creation.zip && rm ui-component-creation.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17920.zip -OutFile "$d\ui-component-creation.zip"; Expand-Archive "$d\ui-component-creation.zip" -DestinationPath $d -Force; ri "$d\ui-component-creation.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して ui-component-creation.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → ui-component-creation フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

UIコンポーネント作成スキル

shadcn/ui + デザインシステムパターン

いつ使うか: 新しいUIコンポーネントを作成するとき

重要: 最初にデザインシステムを読む

UIを生成する前に: /DESIGN-SYSTEM.md を読んでください。

品質ゲート: 以下の項目で最低9/10:

  • 視覚的な独自性
  • ブランドとの整合性
  • アクセシビリティ

パターン: shadcn/ui コンポーネント

'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export function MyComponent({ data }: { data: any }) {
  return (
    <Card className="p-6 border-border-subtle bg-bg-card">
      <h2 className="text-xl font-semibold text-text-primary mb-4">
        {data.title}
      </h2>
      <p className="text-text-secondary mb-4">
        {data.description}
      </p>
      <Button variant="default" className="bg-accent-500 hover:bg-accent-600">
        Action
      </Button>
    </Card>
  );
}

デザイン トークン (必須)

生の値ではなく、これらを使用してください:

色:

  • bg-bg-card ( bg-white ではない)
  • text-text-primary ( text-gray-900 ではない)
  • accent-500 (#ff6b35 オレンジ)
  • border-border-subtle

間隔:

  • Tailwind クラス (p-4, mb-6, など)

禁止パターン

❌ bg-white ( bg-bg-card を使用) ❌ text-gray-600 ( text-text-secondary を使用) ❌ レスポンシブ対応なしの grid grid-cols-3 gap-4 ( md:, lg: を追加)

必須パターン

✅ システムからのデザイントークン ✅ すべての状態 (hover, focus, disabled) ✅ レスポンシブブレークポイント ✅ アクセシビリティ (aria-labels)

標準: デザイントークンを使用し、すべての状態を実装し、アクセシビリティを確保します。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

UI Component Creation Skill

shadcn/ui + Design System Patterns

When to Use: Creating new UI components

CRITICAL: Read Design System First

BEFORE generating any UI: Read /DESIGN-SYSTEM.md

Quality Gate: 9/10 minimum on:

  • Visual distinctiveness
  • Brand alignment
  • Accessibility

Pattern: shadcn/ui Component

'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export function MyComponent({ data }: { data: any }) {
  return (
    <Card className="p-6 border-border-subtle bg-bg-card">
      <h2 className="text-xl font-semibold text-text-primary mb-4">
        {data.title}
      </h2>
      <p className="text-text-secondary mb-4">
        {data.description}
      </p>
      <Button variant="default" className="bg-accent-500 hover:bg-accent-600">
        Action
      </Button>
    </Card>
  );
}

Design Tokens (Required)

Use these, not raw values:

Colors:

  • bg-bg-card (not bg-white)
  • text-text-primary (not text-gray-900)
  • accent-500 (#ff6b35 orange)
  • border-border-subtle

Spacing:

  • Tailwind classes (p-4, mb-6, etc.)

Forbidden Patterns

❌ bg-white (use bg-bg-card) ❌ text-gray-600 (use text-text-secondary) ❌ grid grid-cols-3 gap-4 without responsive (add md:, lg:)

Required Patterns

✅ Design tokens from system ✅ All states (hover, focus, disabled) ✅ Responsive breakpoints ✅ Accessibility (aria-labels)

Standard: Use design tokens, implement all states, ensure accessibility