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

0•

设计工具

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

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.

主要功能

01Reference standardized typography including Hiragino Sans and specialized typesetting roles

02Implement standardized shapes using predefined border-radius values (XS to XL)

03Access light and dark theme color roles, palettes, and surface tokens

04Apply consistent elevation-based shadows across five distinct levels

05Integrate generated icon maps and React components into frontend development

060 GitHub stars

使用场景

01Building new React components that must strictly follow the JP-UI design system

02Updating design tokens and regenerating CSS/JSON files across the repository

03Migrating legacy hardcoded styles to standardized design system tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yumehiko/jp-ui jp-ui-foundations

For use in Claude.ai and ChatGPT