sparkle-design 0.9.0 → 1.0.1

package/README.en.md

@@ -24,52 +24,72 @@ It implements [Goodpatch](https://goodpatch.com/)'s "Sparkle Design" system on t
 - 🎨 **Customizability** ... A dedicated CLI tool lets you apply the same customizations found in the Figma files. This makes it easy to spin up code for design systems built on Sparkle Design.
 - 🤖 **AI Friendly** ... Ships with skills and guard configurations for Claude Code, Cursor, and Codex. Maintain design system quality even during AI-assisted coding.
 
-## Usage
+## Quick Start
 
-### Install the package
+### 1. Set up
 
-The package is already published on npm. Install it with the steps below.
+In an existing Next.js / Vite project, a single command completes the integration:
 
 ```bash
-npm install sparkle-design
-# or
-pnpm add sparkle-design
-# or
-yarn add sparkle-design
+npx --yes sparkle-design-cli setup --assistant claude
 ```
 
-> This package does not bundle CSS. Run `sparkle-design-cli generate` in the consuming app and use the generated `sparkle-design.css` / `SparkleHead.tsx` files there. The CLI automatically inserts `@source` directives into your Tailwind entrypoint CSS (`globals.css`, `index.css`, etc.).
+This automatically:
 
-> **Using with Server Components**: For components that contain `"use client"`, use subpath imports. Each component's [README](src/components/ui/) includes Server Component / Client Component information.
->
-> ```tsx
-> import { Button } from "sparkle-design/button";
-> ```
+1. Detects your package manager (pnpm / npm / yarn / bun)
+2. Adds `sparkle-design` to dependencies and `tailwindcss` + `@tailwindcss/postcss` to devDependencies
+3. Generates `sparkle.config.json` / `postcss.config.mjs` / Tailwind entry CSS (Next.js: `globals.css`, Vite: `index.css`) if missing
+4. Adds a Sparkle Design guard block and `lint:sparkle` script to `CLAUDE.md`
+5. Generates `sparkle-design.css` and `SparkleHead.tsx`
 
-### Install individual components
+`--assistant` accepts `claude` / `cursor` / `codex` / `generic`. Existing files are never overwritten.
 
-Sparkle Design works with the shadcn/ui registry. You can copy the registry URL from Storybook.<br />
-Refer to the [official documentation](https://ui.shadcn.com/docs/registry/getting-started) for details on the shadcn/ui registry.
+Once the setup is complete, place the generated `SparkleHead` in the `<head>` of your root layout.
 
-```bash
-pnpm dlx shadcn@latest add [registry URL]
-```
-
-You can also specify [namespaces](https://ui.shadcn.com/docs/registry/namespace) in `components.json` to install components by name.
+```tsx
+import { SparkleHead } from "./SparkleHead";
 
-```json
-{
-  "registries": {
-    "@sparkle-design": "https://sparkle-design.goodpatch.com/r/{name}.json"
-  }
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <head>
+        <SparkleHead />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
 }
 ```
 
+> **`@next/next/no-head-element` in Next.js App Router**: If your project extends `next/core-web-vitals`, placing a `<head>` element directly in `layout.tsx` may trigger a lint error. Add `// eslint-disable-next-line @next/next/no-head-element` to suppress it, or consider using `next/font` as an alternative.
+
+Customize primary color, fonts, border radius, and more via `sparkle.config.json`. To tweak settings inside Figma, the [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364/sparkle-design-theme-settings) plugin is available. See `sparkle-design-cli generate --help` for details.
+
+> **⚠️ Note for TailwindCSS v4 when using sparkle-design as an npm package:** TailwindCSS v4 does not automatically scan utility classes inside `node_modules`. When consuming `sparkle-design` as an npm package, your entry CSS needs an `@source` directive like the one below:
+>
+> ```css
+> @import "tailwindcss";
+> @source "../../node_modules/sparkle-design/dist";
+> @import "./sparkle-design.css";
+> ```
+>
+> From `sparkle-design-cli` v2.0.6 onward, `generate` / `setup` **auto-scans your `package.json`** (dependencies / devDependencies) and automatically inserts the matching `@source` directives when it detects `sparkle-design` or `@goodpatch/sparkle-design-internal`. No manual config is required. If you want to include additional design system packages, add them to `extend.source-packages` in `sparkle.config.json`; the detected packages and your explicit list will be merged.
+
+#### Installing as an AI Agent Skill (optional)
+
+If you use an AI agent such as Claude Code, Codex, or Cursor, you can also install the Sparkle Design skills with [Vercel's skills CLI](https://github.com/vercel-labs/skills) to have the agent walk you through setup.
+
 ```bash
-pnpm dlx shadcn@latest add @sparkle-design/button
+# Install only the setup-sparkle-design skill
+npx skills add goodpatch/sparkle-design -s setup-sparkle-design
+
+# Install all skills (setup / add-component / accessibility-checker)
+npx skills add goodpatch/sparkle-design --all
 ```
 
-### Basic example
+After installation, asking the agent to "install Sparkle Design" triggers the `setup-sparkle-design` skill, which inspects the project and guides you through only the missing steps. Use `-a claude-code` / `-a codex` etc. to target a specific agent.
+
+### 2. Use components
 
 ```tsx
 import React from "react";
@@ -92,96 +112,56 @@ function App() {
 export default App;
 ```
 
-### About the style files
-
-- **Tailwind entrypoint CSS** (`globals.css` / `index.css`, etc.): Base Tailwind CSS and reset styles
-- **`sparkle-design.css`**: Sparkle Design design tokens (color, typography, border radius, shadows, and more)
-- **`SparkleHead.tsx`**: Font-loading React component
-
-Import these files to take advantage of everything Sparkle Design offers.
-
-#### Using as an npm package
-
-When using `sparkle-design` as an npm package, TailwindCSS v4 needs `@source` directives to detect utility classes inside the package.
-
-`sparkle-design-cli generate` auto-detects CSS files containing `@import "tailwindcss"` and inserts `@source` directives. This works with any filename (`globals.css`, `index.css`, etc.). If auto-detection fails, specify the path via `extend.globals-path` in `sparkle.config.json` or the `--globals-path` CLI option.
-
-To configure manually, add the following to your Tailwind entrypoint CSS:
-
-```css
-@import "tailwindcss";
-/* Scan sparkle-design classes */
-/* Adjust the path relative to the CSS file (example for src/app/globals.css) */
-@source "../../node_modules/sparkle-design/dist";
-/* Sparkle Design custom definitions (import after Tailwind) */
-@import "./sparkle-design.css";
-```
-
-> **Note**: The relative path for `@source` depends on where your CSS file is located. The example above assumes `src/app/globals.css`.
+> **Using with Server Components**: For components that contain `"use client"`, use subpath imports. Each component's [README](src/components/ui/) includes Server Component / Client Component information.
+>
+> ```tsx
+> import { Button } from "sparkle-design/button";
+> ```
 
-#### Generating Sparkle Design CSS and SparkleHead
+### 3. Update settings and check for anti-patterns
 
-Generate design-system-compliant CSS and a font-loading component based on `sparkle.config.json`.
+After editing `sparkle.config.json`, regenerate the CSS:
 
 ```bash
 npx sparkle-design-cli generate
 ```
 
-This generates:
-- `sparkle-design.css` — Design token CSS
-- `SparkleHead.tsx` — Font loading React component
-
-Place `SparkleHead` in the `<head>` of your root layout:
-
-```tsx
-import { SparkleHead } from "./SparkleHead";
+After making Sparkle Design-related code changes, check for anti-patterns:
 
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <head>
-        <SparkleHead />
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
+```bash
+npx sparkle-design-cli check src
 ```
 
-> `SparkleHead` loads fonts via `<link rel="preconnect">` and `<link rel="stylesheet">`, enabling earlier font discovery compared to CSS `@import`. This improves icon rendering especially on mobile.
-
-> **`@next/next/no-head-element` in Next.js App Router**: If your project extends `next/core-web-vitals`, a `<head>` element in `layout.tsx` may trigger a lint error. In that case, use `eslint-disable` on the relevant line or consider alternative approaches with `next/font`.
+### Manual installation (advanced)
 
-Core configuration options for `sparkle.config.json`:
+If you prefer a step-by-step installation without CLI setup, see the [CLI documentation](https://github.com/goodpatch/sparkle-design-cli#readme).
 
-- `primary`: Primary color (blue, red, orange, green, purple, pink, yellow)
-- `font-pro`: Proportional font ([Google Fonts](https://fonts.google.com/) name)
-- `font-mono`: Monospace font ([Google Fonts](https://fonts.google.com/) name)
-- `radius`: Border radius preset (none, sm, md, lg, xl, full)
+## Install individual components
 
-You can export this configuration from the [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364/sparkle-design-theme-settings) Figma plugin.
-
-Extended options (per-font weight customization, fallback chains, custom token CSS) can be configured in the `extend` section of `sparkle.config.json`. See `sparkle-design-cli generate --help` for details.
+Sparkle Design works with the shadcn/ui registry. You can copy the registry URL from Storybook.<br />
+Refer to the [official documentation](https://ui.shadcn.com/docs/registry/getting-started) for details on the shadcn/ui registry.
 
 ```bash
-# Generate CSS
-npx sparkle-design-cli generate
+pnpm dlx shadcn@latest add [registry URL]
+```
 
-# Check for anti-patterns
-npx sparkle-design-cli check src --strict
+You can also specify [namespaces](https://ui.shadcn.com/docs/registry/namespace) in `components.json` to install components by name.
 
-# Set up AI assistant guard in your project
-npx sparkle-design-cli setup --assistant claude
+```json
+{
+  "registries": {
+    "@sparkle-design": "https://sparkle-design.goodpatch.com/r/{name}.json"
+  }
+}
 ```
 
-`setup` adds `lint:sparkle` scripts to the consuming project's `package.json` and injects a Sparkle Design quality check guide into AI assistant instruction files (`CLAUDE.md`, `AGENTS.md`, `.cursor/rules/`, etc.). See `sparkle-design-cli setup --help` for details.
+```bash
+pnpm dlx shadcn@latest add @sparkle-design/button
+```
 
 ## Development Guide
 
-### Development environment
-
-- Node.js 22.14.0 or later
-- pnpm 10 or later
+For environment setup, component creation, testing, and contribution guidelines, see [CONTRIBUTING.md](./CONTRIBUTING.md).
 
 ### Directory structure
 
@@ -196,58 +176,6 @@ npx sparkle-design-cli setup --assistant claude
 └─ .github/           # GitHub configuration
 ```
 
-### Build the package
-
-```bash
-pnpm build:package
-```
-
-### Start Storybook
-
-```bash
-pnpm storybook
-```
-
-### Run tests
-
-```bash
-pnpm test
-```
-
-Refer to `docs/ai-instructions/testing.md` for testing guidelines.
-
-### Code formatting
-
-```bash
-# Check formatting
-pnpm format:check
-
-# Format automatically
-pnpm format
-
-# ESLint check (via Next.js)
-pnpm lint:check
-# or
-pnpm lint
-
-# ESLint auto-fix (via Next.js)
-pnpm lint:fix
-
-# Type check
-pnpm type-check
-```
-
-**Note**: ESLint uses the `next lint` command, applying rules optimized for Next.js projects.
-
-### About the Makefile
-
-The Makefile defines the following targets:
-
-- `registry` ... Generate the registry and copy files to the public directory
-- `new-component` ... Interactive flow for creating a new component
-
-Run `make help` for details.
-
 ### Sparkle Design badge
 
 The Sparkle Design badge indicates that a component uses Sparkle Design. Add the following snippet to your README:
@@ -256,14 +184,6 @@ The Sparkle Design badge indicates that a component uses Sparkle Design. Add the
 [![Sparkle Design](https://img.shields.io/badge/made%20with-Sparkle%20Design-0969DA)](https://sparkle-design.goodpatch.com/)
 ```
 
-### Miscellaneous
-
-- Follow `docs/ai-instructions/comment-style.md` for comment conventions.
-- Follow `.github/copilot-commit-message-instructions.md` for commit message format.
-- Refer to `CHANGELOG.md` for release notes.
-- If the public registry domain changes, run `pnpm update:public-domain -- --to https://new-domain.example.com --dry-run` to preview the impact, then rerun without `--dry-run` to apply the replacement.
-- See the `docs/ai-instructions/` directory for additional development, testing, and AI guidelines.
-
 ## Component status
 
 Please refer to the table on [README.md](./README.md#コンポーネント公開状況) for the current implementation status of components.

package/README.md

@@ -24,52 +24,72 @@ shadcn/ui をベースに、[グッドパッチ](https://goodpatch.com/)のデ
 - 🎨 **カスタマイズ性** ... 専用CLIツールを利用し、Figmaファイルと同等のカスタマイズを適用することが出来ます。これによりSparkle Designをベースとしたデザインシステムのコードを素早く用意することが出来ます。
 - 🤖 **AI フレンドリー** ... Claude Code / Cursor / Codex 向けのスキルとガード設定を同梱。AI コーディングでもデザインシステムの品質を維持できます。
 
-## 使用方法
+## クイックスタート
 
-### パッケージのインストール
+### 1. セットアップ
 
-npm パッケージとして公開済みです。以下の手順でインストールできます。
+既存の Next.js / Vite プロジェクトで次の 1 コマンドを実行するだけで導入が完了します。
 
 ```bash
-npm install sparkle-design
-# または
-pnpm add sparkle-design
-# または
-yarn add sparkle-design
+npx --yes sparkle-design-cli setup --assistant claude
 ```
 
-> このパッケージには CSS は同梱されません。利用側で `sparkle-design-cli generate` を実行し、生成された `sparkle-design.css` / `SparkleHead.tsx` を自分のアプリに配置して利用してください。Tailwind エントリポイント CSS（`globals.css` 等）には `@source` ディレクティブが自動挿入されます。
+これで以下が自動で行われます:
 
-> **Server Component で使う場合**: `"use client"` を含むコンポーネントは個別 import を推奨します。各コンポーネントの [README](src/components/ui/) に Server Component / Client Component の情報が記載されています。
->
-> ```tsx
-> import { Button } from "sparkle-design/button";
-> ```
+1. パッケージマネージャー（pnpm / npm / yarn / bun）を自動検出
+2. `sparkle-design` を dependencies、`tailwindcss` + `@tailwindcss/postcss` を devDependencies に追加
+3. `sparkle.config.json` / `postcss.config.mjs` / Tailwind エントリ CSS（Next.js: `globals.css`、Vite: `index.css`）を必要に応じて生成
+4. `CLAUDE.md` に Sparkle Design ガードブロックと `lint:sparkle` スクリプトを追加
+5. `sparkle-design.css` と `SparkleHead.tsx` を生成
 
-### 個別コンポーネントの導入
+`--assistant` は `claude` / `cursor` / `codex` / `generic` から選択できます。既存ファイルは上書きされません。
 
-Sparkle Design は shadcn/ui registry に対応しています。レジストリの URL は Storybook からコピーすることができます。<br />
-shadcn/ui registry の詳細な情報は [公式ドキュメント](https://ui.shadcn.com/docs/registry/getting-started) を参照してください。
+セットアップが完了したら、生成された `SparkleHead` をルートレイアウトの `<head>` に配置してください。
 
-```bash
-pnpm dlx shadcn@latest add [registry URL]
-```
-
-また[Namespaces](https://ui.shadcn.com/docs/registry/namespace)を`components.json`に指定することで、コンポーネント名でのインストールも可能になります。
+```tsx
+import { SparkleHead } from "./SparkleHead";
 
-```json
-{
-  "registries": {
-    "@sparkle-design": "https://sparkle-design.goodpatch.com/r/{name}.json"
-  }
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <head>
+        <SparkleHead />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
 }
 ```
 
+> **Next.js App Router で `@next/next/no-head-element` が出る場合**: `next/core-web-vitals` を使用しているプロジェクトでは、`layout.tsx` に `<head>` を直接書くと lint エラーになることがあります。該当行に `// eslint-disable-next-line @next/next/no-head-element` を追加するか、`next/font` による代替方法を検討してください。
+
+`sparkle.config.json` でプライマリカラー・フォント・角丸などをカスタマイズできます。Figma 上で設定を調整したい場合は [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364/sparkle-design-theme-settings) プラグインを利用できます。詳細は `sparkle-design-cli generate --help` を参照してください。
+
+> **⚠️ TailwindCSS v4 で npm package として使う場合の注意:** TailwindCSS v4 は `node_modules` 内のユーティリティクラスを自動スキャンしないため、`sparkle-design` を npm package として使うときはエントリ CSS に以下のような `@source` ディレクティブが必要です。
+>
+> ```css
+> @import "tailwindcss";
+> @source "../../node_modules/sparkle-design/dist";
+> @import "./sparkle-design.css";
+> ```
+>
+> `sparkle-design-cli` v2.0.6 以降は、`generate` / `setup` 実行時に **`package.json` の dependencies / devDependencies を自動スキャン** し、`sparkle-design` や `@goodpatch/sparkle-design-internal` が含まれていれば該当する `@source` を自動挿入します。`sparkle.config.json` 側で何も設定しなくても動きます。独自のデザインシステムパッケージを併用したい場合のみ `extend.source-packages` に追記すると、自動検出分と合算されます。
+
+#### AI エージェントに Skill として導入する場合（任意）
+
+Claude Code / Codex / Cursor などの AI エージェントを使っている場合は、[Vercel の skills CLI](https://github.com/vercel-labs/skills) 経由で Sparkle Design のスキルセットを導入しておくと、会話から誘導してもらうこともできます。
+
 ```bash
-pnpm dlx shadcn@latest add @sparkle-design/button
+# setup-sparkle-design スキルだけを導入
+npx skills add goodpatch/sparkle-design -s setup-sparkle-design
+
+# 全スキル（setup / add-component / accessibility-checker）を導入
+npx skills add goodpatch/sparkle-design --all
 ```
 
-### 基本的な使用例
+導入後に「Sparkle Design を導入して」と依頼すると `setup-sparkle-design` スキルが発動し、プロジェクト状態に合わせて不足ステップだけ案内してくれます。`-a claude-code` / `-a codex` などで対象エージェントを指定することもできます。
+
+### 2. コンポーネントの使用
 
 ```tsx
 import React from "react";
@@ -92,96 +112,56 @@ function App() {
 export default App;
 ```
 
-### スタイルファイルについて
-
-- **Tailwind エントリポイント CSS**（`globals.css` / `index.css` 等）: 基本的な Tailwind CSS とリセットスタイル
-- **`sparkle-design.css`**: Sparkle Design のデザイントークン（カラー、フォント、角丸、シャドウなど）
-- **`SparkleHead.tsx`**: フォント読み込み用 React コンポーネント
-
-これらのファイルをインポートすることで、Sparkle Design の全機能を利用できます。
-
-#### npm パッケージとして利用する場合
-
-`sparkle-design` を npm パッケージとしてインストールして利用する場合、TailwindCSS v4 がパッケージ内のユーティリティクラスを検出できるよう `@source` ディレクティブが必要です。
-
-`sparkle-design-cli generate` を実行すると、`@import "tailwindcss"` を含む CSS ファイルを自動検出し、`@source` ディレクティブを挿入します。`globals.css` 以外のファイル名（Vite の `index.css` 等）にも対応しています。自動検出がうまく動かない場合は `sparkle.config.json` の `extend.globals-path` か CLI の `--globals-path` オプションで明示的に指定できます。
-
-手動で設定する場合は、Tailwind エントリポイント CSS に以下を追加してください:
-
-```css
-@import "tailwindcss";
-/* sparkle-design のクラスをスキャン対象にする */
-/* パスは CSS ファイルの配置に応じて調整（src/app/globals.css なら ../../node_modules/...） */
-@source "../../node_modules/sparkle-design/dist";
-/* Sparkle Design のカスタム定義（Tailwindの後にインポート） */
-@import "./sparkle-design.css";
-```
-
-> **注意**: `@source` の相対パスは CSS ファイルの配置場所に依存します。上記は `src/app/globals.css` の場合の例です。
+> **Server Component で使う場合**: `"use client"` を含むコンポーネントは個別 import を推奨します。各コンポーネントの [README](src/components/ui/) に Server Component / Client Component の情報が記載されています。
+>
+> ```tsx
+> import { Button } from "sparkle-design/button";
+> ```
 
-#### Sparkle Design CSS と SparkleHead の生成
+### 3. 設定の更新とアンチパターンの検査
 
-`sparkle.config.json` の設定に基づいて、デザインシステムに準拠した CSS とフォント読み込み用コンポーネントを生成します。
+`sparkle.config.json` を編集した後は以下で CSS を再生成できます。
 
 ```bash
 npx sparkle-design-cli generate
 ```
 
-このコマンドは以下のファイルを生成します:
-- `sparkle-design.css` — デザイントークン CSS
-- `SparkleHead.tsx` — フォント読み込み用 React コンポーネント
-
-`SparkleHead` はルートレイアウトの `<head>` 内に配置してください:
-
-```tsx
-import { SparkleHead } from "./SparkleHead";
+Sparkle Design に関するコード変更後は、アンチパターンを検出できます。
 
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <head>
-        <SparkleHead />
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
+```bash
+npx sparkle-design-cli check src
 ```
 
-> **Next.js App Router で `@next/next/no-head-element` が出る場合**: `next/core-web-vitals` を使用しているプロジェクトでは、`layout.tsx` に `<head>` を直接書くと lint エラーになることがあります。その場合は `eslint-disable` で該当行を除外するか、`next/font` による代替方法を検討してください。
-
-> `SparkleHead` は `<link rel="preconnect">` と `<link rel="stylesheet">` でフォントを読み込みます。CSS の `@import` に比べてフォントの発見が早く、特にモバイル環境でのアイコン表示が改善されます。
+### 手動インストール（高度な利用）
 
-設定ファイル (`sparkle.config.json`) の基本設定：
+CLI setup を使わずに段階的に導入したい場合は、[CLI ドキュメント](https://github.com/goodpatch/sparkle-design-cli#readme) を参照してください。
 
-- `primary`: プライマリカラー（blue, red, orange, green, purple, pink, yellow）
-- `font-pro`: プロポーショナルフォント（[Google Fonts](https://fonts.google.com/) の名前）
-- `font-mono`: モノスペースフォント（[Google Fonts](https://fonts.google.com/) の名前）
-- `radius`: 角丸設定（none, sm, md, lg, xl, full）
+## 個別コンポーネントの導入
 
-設定ファイルは [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364/sparkle-design-theme-settings) Figma プラグインから書き出すことができます。
-
-フォントウェイトのカスタマイズ、フォールバックチェーン、カスタムトークン CSS などの拡張設定は `sparkle.config.json` の `extend` セクションで指定できます。詳細は `sparkle-design-cli generate --help` を参照してください。
+Sparkle Design は shadcn/ui registry に対応しています。レジストリの URL は Storybook からコピーすることができます。<br />
+shadcn/ui registry の詳細な情報は [公式ドキュメント](https://ui.shadcn.com/docs/registry/getting-started) を参照してください。
 
 ```bash
-# CSS を生成
-npx sparkle-design-cli generate
+pnpm dlx shadcn@latest add [registry URL]
+```
 
-# アンチパターンを検査
-npx sparkle-design-cli check src --strict
+また[Namespaces](https://ui.shadcn.com/docs/registry/namespace)を`components.json`に指定することで、コンポーネント名でのインストールも可能になります。
 
-# AI アシスタント向けの guard 設定を導入先プロジェクトに差し込む
-npx sparkle-design-cli setup --assistant claude
+```json
+{
+  "registries": {
+    "@sparkle-design": "https://sparkle-design.goodpatch.com/r/{name}.json"
+  }
+}
 ```
 
-`setup` は導入先の `package.json` に `lint:sparkle` スクリプトを追加し、AI アシスタント向けの指示ファイル（`CLAUDE.md` / `AGENTS.md` / `.cursor/rules/` 等）に Sparkle Design の品質チェックガイドを差し込みます。詳細は `sparkle-design-cli setup --help` を参照してください。
+```bash
+pnpm dlx shadcn@latest add @sparkle-design/button
+```
 
 ## 開発ガイド
 
-### 開発環境
-
-- Node.js 22.14.0 以上
-- pnpm 10 以上
+開発環境のセットアップ・コンポーネントの作成・テスト・コントリビューション方法は [CONTRIBUTING.md](./CONTRIBUTING.md) を参照してください。
 
 ### ディレクトリ構成
 
@@ -196,58 +176,6 @@ npx sparkle-design-cli setup --assistant claude
 └─ .github/           # GitHub関連の設定ファイル
 ```
 
-### Package のビルド
-
-```bash
-pnpm build:package
-```
-
-### Storybook の起動
-
-```bash
-pnpm storybook
-```
-
-### テストの実行
-
-```bash
-pnpm test
-```
-
-テストガイドラインについては `docs/ai-instructions/testing.md` を参照してください。
-
-### コードフォーマット
-
-```bash
-# フォーマットチェック
-pnpm format:check
-
-# 自動フォーマット
-pnpm format
-
-# ESLint チェック (Next.js 経由)
-pnpm lint:check
-# または
-pnpm lint
-
-# ESLint 自動修正 (Next.js 経由)
-pnpm lint:fix
-
-# 型チェック
-pnpm type-check
-```
-
-**注意**: ESLintは`next lint`コマンドを使用しており、Next.jsプロジェクトに最適化された設定とルールが適用されます。
-
-### Makefile について
-
-Makefile では次のターゲットが定義されています。
-
-- `registry` ... レジストリの生成と公開ファイルへのコピー
-- `new-component` ... 対話形式で新規コンポーネントを作成
-
-`make help` で詳細は確認してください。
-
 ### Sparkle Design バッジ
 
 Sparkle Design のバッジは、コンポーネントが Sparkle Design を使用していることを示します。README に次のように追加してください。
@@ -256,14 +184,6 @@ Sparkle Design のバッジは、コンポーネントが Sparkle Design を使
 [![Sparkle Design](https://img.shields.io/badge/made%20with-Sparkle%20Design-0969DA)](https://sparkle-design.goodpatch.com/)
 ```
 
-### その他
-
-- コメントの書き方は `docs/ai-instructions/comment-style.md` を参照してください。
-- コミットメッセージの形式は `.github/copilot-commit-message-instructions.md` のルールに従います。
-- 変更履歴は `CHANGELOG.md` を参照してください。
-- 公開用ドメインを切り替える場合は `pnpm update:public-domain -- --to https://new-domain.example.com --dry-run` で影響範囲を確認し、その後 `--dry-run` を外して一括更新できます。
-- その他開発・テスト・AI関連のガイドラインは `docs/ai-instructions/` ディレクトリを参照してください。
-
 ## コンポーネント公開状況
 
 現在公開されているコンポーネントの一覧です。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design",
-  "version": "0.9.0",
+  "version": "1.0.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -53,7 +53,6 @@
     "update:public-domain": "node scripts/update-public-domain.mjs"
   },
   "dependencies": {
-    "@figma/code-connect": "^1.3.4",
     "@hookform/resolvers": "^5.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -71,6 +70,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.1",
+    "@figma/code-connect": "^1.3.4",
     "@storybook/addon-a11y": "^10.3.5",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/addon-onboarding": "^10.3.5",
@@ -101,6 +101,36 @@
     "vite": "6.4.2",
     "vitest": "^3.0.9"
   },
+  "pnpm": {
+    "overrides": {
+      "lodash": "^4.17.23",
+      "path-to-regexp": "^8.4.0",
+      "brace-expansion@>=2.0.0 <2.0.3": "^2.0.3",
+      "picomatch": "^4.0.4",
+      "flatted": "^3.4.2",
+      "undici": "^6.24.0",
+      "tar": "^7.5.11",
+      "minimatch@>=7.0.0 <7.4.8": "^7.4.8",
+      "minimatch@>=9.0.0 <9.0.7": "^9.0.7",
+      "minimatch@>=10.0.0 <10.2.3": "^10.2.3",
+      "minimatch@<3.1.3": "^3.1.3",
+      "ajv@<6.14.0": "^6.14.0",
+      "qs@<6.14.2": "^6.14.2",
+      "@modelcontextprotocol/sdk": "^1.26.0",
+      "@isaacs/brace-expansion": "^5.0.1",
+      "diff@>=5.0.0 <5.2.2": "^5.2.2",
+      "body-parser@>=2.2.0 <2.2.1": "^2.2.1",
+      "glob@>=10.2.0 <10.5.0": "^10.5.0",
+      "glob@>=11.0.0 <11.1.0": "^11.1.0",
+      "js-yaml@>=4.0.0 <4.1.1": "^4.1.1",
+      "playwright": "^1.59.1",
+      "form-data": "^4.0.4",
+      "hono": "^4.12.14",
+      "yaml@>=2.0.0 <2.8.3": "^2.8.3",
+      "@eslint/plugin-kit": "^0.3.4",
+      "brace-expansion@<1.1.13": "^1.1.13"
+    }
+  },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {