Storybook 10 マイグレーション + パッケージ名変更 (sparkle-design 0.9.0)

.claude/skills/add-sparkle-component/references/css-structure.md

@@ -81,7 +81,7 @@ Location: `src/app/globals.css`
 
 /* npm パッケージとして利用する場合は @source が必要（sparkle-design-cli が自動挿入） */
 /* パスは globals.css の配置に応じて調整（例: src/app/ なら ../../node_modules/...） */
-/* @source "../../node_modules/@goodpatch/sparkle-design/dist"; */
+/* @source "../../node_modules/sparkle-design/dist"; */
 
 /* Import Sparkle Design CSS SECOND */
 @import "./sparkle-design.css";
@@ -96,7 +96,7 @@ Location: `src/app/globals.css`
 
 **Important:** Import order matters! Tailwind must come before Sparkle Design CSS.
 
-> npm パッケージとして `@goodpatch/sparkle-design` を利用する場合、`sparkle.config.json` の `extend.source-packages` を設定すると、`sparkle-design-cli` が `@source` ディレクティブを自動挿入する。
+> npm パッケージとして `sparkle-design` を利用する場合、`sparkle.config.json` の `extend.source-packages` を設定すると、`sparkle-design-cli` が `@source` ディレクティブを自動挿入する。
 
 ### 3. Import in Root Layout
 

.claude/skills/setup-sparkle-design/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: setup-sparkle-design
 description: >
-  @goodpatch/sparkle-design（React コンポーネントライブラリ）の導入・セットアップ・
+  sparkle-design（React コンポーネントライブラリ）の導入・セットアップ・
   テーマカスタマイズ・コンポーネント選択を支援するスキル。
   npm インストール、sparkle-design-cli による CSS 生成、sparkle.config.json のテーマ設定、
   アンチパターンガードの導入までをカバーする。
@@ -19,9 +19,9 @@ description: >
 
 # Skill: setup-sparkle-design
 
-プロジェクトに `@goodpatch/sparkle-design` を npm パッケージとして導入し、コンポーネントを利用できる状態にするためのスキル。
+プロジェクトに `sparkle-design` を npm パッケージとして導入し、コンポーネントを利用できる状態にするためのスキル。
 
-> **社内版との違い**: 社内版 `@goodpatch/sparkle-design-internal` を導入する場合は `install-sparkle-design` スキルを使ってください。こちらは公開版 `@goodpatch/sparkle-design` 用です。
+> **社内版との違い**: 社内版 `@goodpatch/sparkle-design-internal` を導入する場合は `install-sparkle-design` スキルを使ってください。こちらは公開版 `sparkle-design` 用です。
 
 ---
 
@@ -62,16 +62,16 @@ description: >
 
 ```bash
 # npm
-npm install @goodpatch/sparkle-design
+npm install sparkle-design
 
 # pnpm
-pnpm add @goodpatch/sparkle-design
+pnpm add sparkle-design
 
 # yarn
-yarn add @goodpatch/sparkle-design
+yarn add sparkle-design
 ```
 
-> **認証不要**: `@goodpatch/sparkle-design` は npmjs.com で公開されているため、`.npmrc` の設定やトークンは不要です。
+> **認証不要**: `sparkle-design` は npmjs.com で公開されているため、`.npmrc` の設定やトークンは不要です。
 
 ### Step 2: CSS セットアップ
 
@@ -157,7 +157,7 @@ export default function RootLayout({ children }) {
 ### Step 3: コンポーネントを使う
 
 ```tsx
-import { Button, Card, Input } from "@goodpatch/sparkle-design";
+import { Button, Card, Input } from "sparkle-design";
 
 export function MyPage() {
   return (

.claude/skills/setup-sparkle-design/references/component-catalog.md

@@ -1,6 +1,6 @@
 # Component Catalog
 
-`@goodpatch/sparkle-design` が提供する全 27 コンポーネントのリファレンス。
+`sparkle-design` が提供する全 27 コンポーネントのリファレンス。
 
 ## 目次
 
@@ -13,7 +13,7 @@ badge | breadcrumb | button | card | checkbox | dialog | divider | form | icon |
 ## import 例
 
 ```tsx
-import { Button, Card, Input, cn } from "@goodpatch/sparkle-design";
+import { Button, Card, Input, cn } from "sparkle-design";
 ```
 
 ---
@@ -25,7 +25,7 @@ import { Button, Card, Input, cn } from "@goodpatch/sparkle-design";
 `clsx` + `tailwind-merge` を組み合わせたクラス名結合ユーティリティ。
 
 ```tsx
-import { cn } from "@goodpatch/sparkle-design";
+import { cn } from "sparkle-design";
 
 cn("px-4 py-2", isActive && "bg-blue-500", className);
 ```
@@ -42,7 +42,7 @@ cn("px-4 py-2", isActive && "bg-blue-500", className);
 - **使いどころ**: 未読件数、ステータス表示、カテゴリタグ
 
 ```tsx
-import { Badge } from "@goodpatch/sparkle-design";
+import { Badge } from "sparkle-design";
 
 <Badge variant="destructive">3</Badge>;
 ```
@@ -62,7 +62,7 @@ import {
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbSeparator,
-} from "@goodpatch/sparkle-design";
+} from "sparkle-design";
 ```
 
 ---
@@ -77,7 +77,7 @@ import {
 - **注意**: アイコンだけのアクションは `Button` + `prefixIcon` ではなく `IconButton` を使う。`asChild` では `prefixIcon` / `suffixIcon` / `isLoading` は反映されない
 
 ```tsx
-import { Button } from "@goodpatch/sparkle-design";
+import { Button } from "sparkle-design";
 
 <Button variant="default" size="lg">保存する</Button>
 <Button variant="destructive">削除</Button>
@@ -102,7 +102,7 @@ import {
   CardControl,
   CardContent,
   CardFooter,
-} from "@goodpatch/sparkle-design";
+} from "sparkle-design";
 ```
 
 ---
@@ -115,7 +115,7 @@ import {
 - **使いどころ**: 複数選択フィルタ、同意確認
 
 ```tsx
-import { Checkbox } from "@goodpatch/sparkle-design";
+import { Checkbox } from "sparkle-design";
 ```
 
 ---
@@ -135,7 +135,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogFooter,
-} from "@goodpatch/sparkle-design";
+} from "sparkle-design";
 ```
 
 ---
@@ -149,7 +149,7 @@ import {
 - **使いどころ**: セクション区切り、リストアイテム間の区切り
 
 ```tsx
-import { Divider } from "@goodpatch/sparkle-design";
+import { Divider } from "sparkle-design";
 
 <Divider emphasis="low" lineStyle="solid" />;
 ```
@@ -171,7 +171,7 @@ import {
   FormLabel,
   FormControl,
   FormErrorMessage,
-} from "@goodpatch/sparkle-design";
+} from "sparkle-design";
 ```
 
 ---
@@ -185,7 +185,7 @@ Material Symbols Rounded アイコンを表示。
 - **注意**: `material-symbols-rounded` を `span` に直書きせず `Icon` を使う
 
 ```tsx
-import { Icon } from "@goodpatch/sparkle-design";
+import { Icon } from "sparkle-design";
 
 <Icon>home</Icon>
 <Icon size={6} fill={1}>favorite</Icon>
@@ -202,7 +202,7 @@ import { Icon } from "@goodpatch/sparkle-design";
 - **使いどころ**: ツールバー、閉じるボタン、編集ボタン。アクセシビリティのため `aria-label` を必ず付与する
 
 ```tsx
-import { IconButton } from "@goodpatch/sparkle-design";
+import { IconButton } from "sparkle-design";
 
 <IconButton icon="close" aria-label="閉じる" variant="ghost" />;
 ```
@@ -223,7 +223,7 @@ import {
   InlineMessage,
   InlineMessageTitle,
   InlineMessageDescription,
-} from "@goodpatch/sparkle-design";
+} from "sparkle-design";
 
 <InlineMessage status="negative">
   <InlineMessageTitle>エラーが発生しました</InlineMessageTitle>
@@ -245,7 +245,7 @@ import {
 - **注意**: disabled 系は `isDisabled` を優先する
 
 ```tsx
-import { Input } from "@goodpatch/sparkle-design";
+import { Input } from "sparkle-design";
 
 <Input placeholder="検索..." />;
 <Input isTrigger triggerIcon="search" triggerAriaLabel="検索" onIconButtonClick={handleSearch} />;
@@ -258,7 +258,7 @@ import { Input } from "@goodpatch/sparkle-design";
 パスワード入力フィールド。表示/非表示のトグルボタン付き。
 
 ```tsx
-import { InputPassword } from "@goodpatch/sparkle-design";
+import { InputPassword } from "sparkle-design";
 
 <InputPassword placeholder="パスワードを入力" />;
 ```
@@ -274,7 +274,7 @@ import { InputPassword } from "@goodpatch/sparkle-design";
 - **button との違い**: ページ遷移には `link`、アクション実行には `button`
 
 ```tsx
-import { Link } from "@goodpatch/sparkle-design";
+import { Link } from "sparkle-design";
 
 <Link href="/about">詳細を見る</Link>;
 <Link href="https://example.com" isOpenInNew>外部リンク</Link>;
@@ -291,7 +291,7 @@ import { Link } from "@goodpatch/sparkle-design";
 - **dialog との違い**: `modal` は `Dialog` ベースの汎用オーバーレイ。フォーム入力や詳細表示はこちらを使う
 
 ```tsx
-import { Modal } from "@goodpatch/sparkle-design";
+import { Modal } from "sparkle-design";
 ```
 
 ---
@@ -301,7 +301,7 @@ import { Modal } from "@goodpatch/sparkle-design";
 システムモードの変更（ローディング中など）を示す半透明オーバーレイ。
 
 ```tsx
-import { Overlay } from "@goodpatch/sparkle-design";
+import { Overlay } from "sparkle-design";
 ```
 
 ---
@@ -314,7 +314,7 @@ import { Overlay } from "@goodpatch/sparkle-design";
 - **使いどころ**: 排他的な単一選択（配送方法、プラン選択など）
 
 ```tsx
-import { Radio, RadioItem } from "@goodpatch/sparkle-design";
+import { Radio, RadioItem } from "sparkle-design";
 ```
 
 ---
@@ -332,7 +332,7 @@ import {
   SelectTrigger,
   SelectContent,
   SelectItem,
-} from "@goodpatch/sparkle-design";
+} from "sparkle-design";
 ```
 
 ---
@@ -342,7 +342,7 @@ import {
 コンテンツ読み込み中のアニメーションプレースホルダ。
 
 ```tsx
-import { Skeleton } from "@goodpatch/sparkle-design";
+import { Skeleton } from "sparkle-design";
 
 <Skeleton className="h-4 w-48" />;
 ```
@@ -354,7 +354,7 @@ import { Skeleton } from "@goodpatch/sparkle-design";
 指定範囲内の値をスライダーで選択。
 
 ```tsx
-import { Slider } from "@goodpatch/sparkle-design";
+import { Slider } from "sparkle-design";
 
 <Slider min={0} max={100} step={1} />;
 ```
@@ -366,7 +366,7 @@ import { Slider } from "@goodpatch/sparkle-design";
 処理の進行中を視覚的に示すインジケータ。
 
 ```tsx
-import { Spinner } from "@goodpatch/sparkle-design";
+import { Spinner } from "sparkle-design";
 
 <Spinner />;
 ```
@@ -380,7 +380,7 @@ import { Spinner } from "@goodpatch/sparkle-design";
 - **sizes**: `sm` / `md` / `lg`
 
 ```tsx
-import { Switch } from "@goodpatch/sparkle-design";
+import { Switch } from "sparkle-design";
 
 <Switch size="md" />;
 ```
@@ -399,7 +399,7 @@ import {
   TabsList,
   TabsTrigger,
   TabsContent,
-} from "@goodpatch/sparkle-design";
+} from "sparkle-design";
 ```
 
 ---
@@ -411,7 +411,7 @@ import {
 - **badge との違い**: `tag` はカテゴリ・属性の表現。`badge` は数値や通知数
 
 ```tsx
-import { Tag } from "@goodpatch/sparkle-design";
+import { Tag } from "sparkle-design";
 
 <Tag>デザイン</Tag>;
 ```
@@ -423,7 +423,7 @@ import { Tag } from "@goodpatch/sparkle-design";
 複数行のテキスト入力フィールド。
 
 ```tsx
-import { Textarea } from "@goodpatch/sparkle-design";
+import { Textarea } from "sparkle-design";
 
 <Textarea placeholder="詳細を入力してください" rows={4} />;
 ```
@@ -437,7 +437,7 @@ import { Textarea } from "@goodpatch/sparkle-design";
 - **inline-message との違い**: `toast` は自動消去される一時表示。ページ固定通知は `inline-message`
 
 ```tsx
-import { useToast } from "@goodpatch/sparkle-design";
+import { useToast } from "sparkle-design";
 
 const { toast } = useToast();
 toast({ title: "保存しました", variant: "success" });
@@ -455,7 +455,7 @@ import {
   TooltipTrigger,
   TooltipContent,
   IconButton,
-} from "@goodpatch/sparkle-design";
+} from "sparkle-design";
 
 <Tooltip>
   <TooltipTrigger asChild>

.claude/skills/setup-sparkle-design/references/component-selection.md

@@ -4,7 +4,7 @@
 
 UI コンポーネントは以下の優先順位で選択する:
 
-1. **Sparkle Design コンポーネント**（`@goodpatch/sparkle-design`）
+1. **Sparkle Design コンポーネント**（`sparkle-design`）
 2. **shadcn/ui コンポーネント**（Sparkle Design が提供していないもののみ）
 3. **独自実装**（上記で対応できない場合のみ）
 
@@ -56,7 +56,7 @@ npx --yes sparkle-design-cli check src --format json
    import { Button } from "@/components/ui/button";
 
    // After
-   import { Button } from "@goodpatch/sparkle-design";
+   import { Button } from "sparkle-design";
    ```
 
 2. **shadcn/ui 既定トークンを Sparkle Design トークンに置き換え**

.claude/skills/setup-sparkle-design/references/troubleshooting.md

@@ -1,6 +1,6 @@
 # Install Troubleshooting
 
-`@goodpatch/sparkle-design` を npm package として導入したときに起きやすい問題と、その回避策をまとめます。
+`sparkle-design` を npm package として導入したときに起きやすい問題と、その回避策をまとめます。
 
 ## Next.js で `createContext is not a function`
 
@@ -15,7 +15,7 @@ barrel export 経由の import では、各 component file の `"use client"` 
 ```tsx
 "use client";
 
-export { Button, Dialog, Input } from "@goodpatch/sparkle-design";
+export { Button, Dialog, Input } from "sparkle-design";
 ```
 
 Server Component ではこの wrapper をまたいで import せず、必要な箇所で client boundary を明示してください。
@@ -28,7 +28,7 @@ TailwindCSS v4 は `node_modules` 内のクラスを自動スキャンしませ
 
 ### 回避策
 
-`sparkle-design-cli generate` で CSS を生成すると、`globals.css` に `@source` ディレクティブが自動挿入されます。`@goodpatch/sparkle-design` はデフォルトで含まれるため、通常は追加設定不要です。
+`sparkle-design-cli generate` で CSS を生成すると、`globals.css` に `@source` ディレクティブが自動挿入されます。`sparkle-design` はデフォルトで含まれるため、通常は追加設定不要です。
 
 ```bash
 npx --yes sparkle-design-cli generate