jp-ui-foundations — community jp-ui-foundations, community, ide skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

このスキルについて

Foundationトークンのストリームライン化されたUIコンポーネントの実装が必要なフロントエンドエージェントに最適 jp-uiのFoundation（色/タイポ/アイコン/形状/影）を参照して実装するためのスキル。Foundationトークンや関連ファイルが更新されたらこのスキルも更新する。

yumehiko yumehiko
[0]
[0]
Updated: 3/12/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 7/11

This page remains useful for operators, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution
Review Score
7/11
Quality Score
20
Canonical Locale
ja
Detected Body Locale
ja

Foundationトークンのストリームライン化されたUIコンポーネントの実装が必要なフロントエンドエージェントに最適 jp-uiのFoundation（色/タイポ/アイコン/形状/影）を参照して実装するためのスキル。Foundationトークンや関連ファイルが更新されたらこのスキルも更新する。

このスキルを使用する理由

エージェントにトークン、ロール、トーンを自動更新する能力を付与し、generate-tones.mjsやextract-roles.mjsなどのスクリプトを使用し、tokens/source.jsonやtokens/tones.jsonなどのJSONファイルを使用してシームレスなUI開発を行う

おすすめ

Foundationトークンのストリームライン化されたUIコンポーネントの実装が必要なフロントエンドエージェントに最適

↓ 実現可能なユースケース for jp-ui-foundations

Foundationトークンを自動更新してカラー、タイポグラフィー、アイコンの一貫性を実現する
scripts/generate-tones.mjsやscripts/extract-roles.mjsなどのスクリプトを使用してライトモードとダークモードのトーンやロールを生成する
tokens/source.jsonなどの真実のファイルを参照して正確なカラー入力を取得する

! セキュリティと制限

  • FoundationトークンのスクリプトやJSONファイルへのアクセスが必要
  • Foundationトークンを使用したUIコンポーネントの実装に限定される

Why this page is reference-only

  • - Current locale does not satisfy the locale-governance contract.
  • - The underlying skill quality score is below the review floor.

Source Boundary

The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is jp-ui-foundations?

Foundationトークンのストリームライン化されたUIコンポーネントの実装が必要なフロントエンドエージェントに最適 jp-uiのFoundation（色/タイポ/アイコン/形状/影）を参照して実装するためのスキル。Foundationトークンや関連ファイルが更新されたらこのスキルも更新する。

How do I install jp-ui-foundations?

Run the command: npx killer-skills add yumehiko/jp-ui/jp-ui-foundations. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for jp-ui-foundations?

Key use cases include: Foundationトークンを自動更新してカラー、タイポグラフィー、アイコンの一貫性を実現する, scripts/generate-tones.mjsやscripts/extract-roles.mjsなどのスクリプトを使用してライトモードとダークモードのトーンやロールを生成する, tokens/source.jsonなどの真実のファイルを参照して正確なカラー入力を取得する.

Which IDEs are compatible with jp-ui-foundations?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for jp-ui-foundations?

FoundationトークンのスクリプトやJSONファイルへのアクセスが必要. Foundationトークンを使用したUIコンポーネントの実装に限定される.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add yumehiko/jp-ui/jp-ui-foundations. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use jp-ui-foundations immediately in the current project.

! Reference-Only Mode

This page remains useful for installation and reference, but Killer-Skills no longer treats it as a primary indexable landing page. Read the review above before relying on the upstream repository instructions.

Imported Repository Instructions

The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

Supporting Evidence

jp-ui-foundations

Install jp-ui-foundations, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly
Imported Repository Instructions
The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.
Supporting Evidence

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

関連スキル

Looking for an alternative to jp-ui-foundations or another community skill for your workflow? Explore these related open-source skills.

すべて表示

openclaw-release-maintainer

Logo of openclaw
openclaw

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

★ 333.8k
⑂ 0
AI

widget-generator

Logo of f
f

カスタマイズ可能なウィジェットプラグインをprompts.chatのフィードシステム用に生成する

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

React フレームワーク

★ 138.4k
⑂ 0
ブラウザ

pr-review

Logo of pytorch
pytorch

Pythonにおけるテンソルと動的ニューラルネットワーク（強力なGPUアクセラレーション）

★ 98.6k
⑂ 0
開発者