🎯

jp-ui-components

🎯Skill

from yumehiko/jp-ui

VibeIndex|
What it does

jp-ui-components skill from yumehiko/jp-ui

jp-ui-components

Installation

📋 No install commands found in docs. Showing default command. Check GitHub for actual instructions.
Quick InstallInstall with npx
npx add-skill yumehiko/jp-ui --skill jp-ui-components
2
-
Last UpdatedJan 27, 2026

Skill Details

SKILL.md

Overview

# jp-ui

[Base UI](https://base-ui.com/) をベースに構築したUIコンポーネントライブラリです。日本語圏での利用を前提に、和文向けのコンポーネント、日本語組版を補助するテキストスタイル、一貫した色彩設計を提供します。

特長

  • Base UIの体験を保ったラッパーコンポーネント
  • 日本語組版を補助するテキストスタイル
  • 一貫した色彩設計のトークン

インストール

  • pnpm add @yumehiko/jp-ui @base-ui/react @tabler/icons-react react react-dom

使い方

```tsx

import '@yumehiko/jp-ui/style.css';

import { Button } from '@yumehiko/jp-ui';

export function App() {

return ;

}

```

プロバイダー / テーマ

```tsx

import {

TooltipProvider,

ToastProvider,

ToastViewport,

createToastManager,

} from '@yumehiko/jp-ui';

const toastManager = createToastManager();

export function AppProviders({ children }: { children: React.ReactNode }) {

return (

{children}

);

}

```

ライトトークンはデフォルトで適用されます。ダークトークンを有効にするには、ルート要素に theme-dark を付与してください。必要に応じて theme-light を使うと、ライトテーマをサブツリーに限定できます。

カスタムテーマ(3色指定)

Primary / Secondary / Tertiary の3色からトーンとRoleを生成できます。HEXに加えてHCT指定も利用できます。@yumehiko/jp-ui/style.css の後に適用してください。

```tsx

import '@yumehiko/jp-ui/style.css';

import { createTheme } from '@yumehiko/jp-ui';

const { css } = createTheme({

primary: '#4f46e5',

secondary: '#f97316',

tertiary: { h: 145, c: 55, t: 65 },

});

const style = document.createElement('style');

style.textContent = css;

document.head.append(style);

```

ドキュメント

  • [概要](docs/overview.md)
  • [使い方](docs/usage.md)
  • [コンポーネント](docs/components.md)
  • [トークン](docs/tokens.md)
  • [アイコン](docs/icons.md)
  • [Storybook(GitHub Pages)](https://yumehiko.github.io/jp-ui/)

Codexスキル(任意)

コーディングエージェントがjp-uiの利用ガイドを読み込めるように、スキルをプロジェクトにコピーします。

```sh

mkdir -p .codex/skills && cp -R node_modules/@yumehiko/jp-ui/docs/skills/jp-ui-consumer .codex/skills/

```

開発者向け

このセクションはリポジトリ開発用です。パッケージ利用者が実行する必要はありません。

スクリプト

  • pnpm dev
  • pnpm build
  • pnpm lint
  • pnpm typecheck
  • pnpm storybook (コンポーネント例)
  • pnpm build-storybook
  • pnpm gen:tones
  • pnpm gen:roles
  • pnpm gen:roles-css