Can I use this skill to update the design system itself?

Yes, the skill includes commands and rules for running pnpm scripts to regenerate tones, roles, and CSS when source tokens change.

What is the primary purpose of the JP-UI Foundations skill?

It serves as a reference and implementation guide for the JP-UI design system, ensuring consistency in colors, typography, and layout during development.

How does this skill handle light and dark modes?

It references specific role files like roles.light.json and roles.dark.json, allowing Claude to apply the correct theme-specific tokens.

What typography standards are included?

It includes Hiragino Sans as the base font and various typesetting roles such as display, headline, title, and caption styles.

Does it support icon management?

Yes, it tracks the source of truth for icons located in the React icon components and the generated icon map files.

JP-UI Design Foundations

Name: JP-UI Design Foundations
Author: yumehiko

byyumehiko

Design Tools

Implements and maintains the JP-UI design system foundations including colors, typography, shapes, and shadows.

About

This skill provides Claude with direct access to the JP-UI design system's source of truth, enabling the consistent implementation of UI components. It bridges the gap between raw token files and React development, ensuring that typography, color roles, elevation shadows, and border radii adhere strictly to the project's visual standards. It also facilitates the maintenance of design tokens by providing clear pathways to update scripts for tones, roles, and CSS generation.

Key Features

Reference standardized typography including Hiragino Sans and specialized typesetting roles
Implement standardized shapes using predefined border-radius values (XS to XL)
Access light and dark theme color roles, palettes, and surface tokens
Apply consistent elevation-based shadows across five distinct levels
Integrate generated icon maps and React components into frontend development
0 GitHub stars

Use Cases

Building new React components that must strictly follow the JP-UI design system
Updating design tokens and regenerating CSS/JSON files across the repository
Migrating legacy hardcoded styles to standardized design system tokens

About

Key Features

Reference standardized typography including Hiragino Sans and specialized typesetting roles
Implement standardized shapes using predefined border-radius values (XS to XL)
Access light and dark theme color roles, palettes, and surface tokens
Apply consistent elevation-based shadows across five distinct levels
Integrate generated icon maps and React components into frontend development
0 GitHub stars

Use Cases

Building new React components that must strictly follow the JP-UI design system
Updating design tokens and regenerating CSS/JSON files across the repository
Migrating legacy hardcoded styles to standardized design system tokens