jp-ui-foundations — jp-ui-foundations install jp-ui-foundations, community, jp-ui-foundations install, ide skills, jp-ui-foundations foundation token management, jp-ui-foundations UI development, jp-ui-foundations automated token updates, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing streamlined UI component implementation with Foundation tokens jp-ui-foundations is a technical skill that provides a foundation for UI development by managing tokens, including color, typography, icons, shapes, and shadows.

Features

Generates color tones using scripts/generate-tones.mjs
Extracts roles via scripts/extract-roles.mjs
Updates role CSS with scripts/generate-roles-css.mjs
Manages color input and output via tokens/source.json and tokens/tones.json
Produces role output files including tokens/roles.light.json and tokens/roles.dark.json
Utilizes basic CSS tokens from src/index.css

# Core Topics

jp-ui-foundations install jp-ui-foundations foundation token management jp-ui-foundations UI development jp-ui-foundations automated token updates
yumehiko yumehiko
[0]
[0]
Updated: 3/8/2026

Agent Capability Analysis

The jp-ui-foundations skill by yumehiko is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for jp-ui-foundations install, jp-ui-foundations foundation token management, jp-ui-foundations UI development.

Ideal Agent Persona

Perfect for Frontend Agents needing streamlined UI component implementation with Foundation tokens

Core Value

Empowers agents to automate updates to tokens, roles, and tones, leveraging scripts like generate-tones.mjs and extract-roles.mjs, and utilizing JSON files such as tokens/source.json and tokens/tones.json for seamless UI development

↓ Capabilities Granted for jp-ui-foundations

Automating Foundation token updates for color, typography, and icon consistency
Generating tones and roles for light and dark modes using scripts/generate-tones.mjs and scripts/extract-roles.mjs
Referencing source of truth files like tokens/source.json for accurate color input

! Prerequisites & Limits

  • Requires access to Foundation token scripts and JSON files
  • Limited to UI component implementation with Foundation tokens
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

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

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

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?

Perfect for Frontend Agents needing streamlined UI component implementation with Foundation tokens jp-ui-foundations is a technical skill that provides a foundation for UI development by managing tokens, including color, typography, icons, shapes, and shadows.

How do I install jp-ui-foundations?

Run the command: npx killer-skills add yumehiko/jp-ui. 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: Automating Foundation token updates for color, typography, and icon consistency, Generating tones and roles for light and dark modes using scripts/generate-tones.mjs and scripts/extract-roles.mjs, Referencing source of truth files like tokens/source.json for accurate color input.

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?

Requires access to Foundation token scripts and JSON files. Limited to UI component implementation with Foundation tokens.

↓ 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. 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.

Related Skills

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

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI