Claude Code Plugins

Community-maintained marketplace

Feedback

jp-ui-foundations

@yumehiko/jp-ui
0
0

jp-uiのFoundation（色/タイポ/アイコン/形状/影）を参照して実装するためのスキル。Foundationトークンや関連ファイルが更新されたらこのスキルも更新する。

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name jp-ui-foundations
description jp-uiのFoundation（色/タイポ/アイコン/形状/影）を参照して実装するためのスキル。Foundationトークンや関連ファイルが更新されたらこのスキルも更新する。
metadata [object Object]

jp-ui Foundations

使いどころ

  • コンポーネント実装時に Foundation トークン（色/タイポ/アイコン/形状/影）を参照する
  • Tokens/roles/tones の更新があった場合に内容を追随

参照先（Source of Truth）

  • 色トーン生成: scripts/generate-tones.mjs
  • Role抽出: scripts/extract-roles.mjs
  • Role CSS生成: scripts/generate-roles-css.mjs
  • 色入力: tokens/source.json
  • 色トーン出力: tokens/tones.json, tokens/tones.css
  • Role出力: tokens/roles.light.json, tokens/roles.dark.json, tokens/roles.css
  • 基本CSSトークン: src/index.css

Foundation トークン

Typography

  • ベースフォント: "Hiragino Sans", sans-serif
  • typesetting-body / typesetting-betagumi / typesetting-tsumegumi
  • 見出し: typesetting-display, typesetting-headline, typesetting-title
  • ラベル: typesetting-label (tsumegumi), typesetting-editable-label (betagumi)
  • キャプション: typesetting-caption (betagumi)

Color

  • 役割色: tokens/roles.css から --surface, --on-surface, --primary, --on-primary など
  • パレット色: --red, --on-red, --red-container, --on-red-container, --inverse-red など
  • Fixed: --true-white, --true-black
  • テーマクラス: .theme-light, .theme-dark

Shape

  • --radius-none: 0
  • --radius-xs: 4px
  • --radius-s: 8px
  • --radius-m: 12px
  • --radius-l: 16px
  • --radius-xl: 28px
  • --radius-full: 8192px

Shadow

  • --shadow-rgb: 0 0 0
  • --elevation-0..5
  • --elevation-1: 0 0 8px 0 rgb(var(--shadow-rgb) / 0.2), 1px 1px 4px 0 rgb(var(--shadow-rgb) / 0.1)
  • --elevation-2: 0 0 12px 0 rgb(var(--shadow-rgb) / 0.2), 1px 1px 6px 0 rgb(var(--shadow-rgb) / 0.15)
  • --elevation-3: 0 0 16px 0 rgb(var(--shadow-rgb) / 0.2), 2px 2px 8px 0 rgb(var(--shadow-rgb) / 0.2)
  • --elevation-4: 0 0 20px 0 rgb(var(--shadow-rgb) / 0.2), 3px 3px 12px 0 rgb(var(--shadow-rgb) / 0.2)
  • --elevation-5: 0 0 24px 0 rgb(var(--shadow-rgb) / 0.2), 4px 4px 16px 0 rgb(var(--shadow-rgb) / 0.3)

Icons

  • アイコン: src/assets/icons/Icon.tsx
  • 生成マップ: src/assets/icons/iconMap.generated.ts
  • アイコン一覧: src/pages/IconsPage.tsx

更新時のルール

  • Foundation トークンを更新したら、このスキルの記載も更新する
  • 新しい参照先ファイルを追加したら 参照先 セクションに追加

スクリプト実行コマンド

  • pnpm gen:tones
  • pnpm gen:roles
  • pnpm gen:roles-css