diff --git a/.claude/skills/add-sparkle-component/SKILL.md b/.claude/skills/add-sparkle-component/SKILL.md index 4d3ac3c6..9333d289 100644 --- a/.claude/skills/add-sparkle-component/SKILL.md +++ b/.claude/skills/add-sparkle-component/SKILL.md @@ -100,7 +100,7 @@ Ensure `components.json` contains the Sparkle Design registry: ```json { "registries": { - "@sparkle-design": "https://sparkle-design.vercel.app/r/{name}.json" + "@sparkle-design": "https://sparkle-design.goodpatch.com/r/{name}.json" } } ``` @@ -316,7 +316,7 @@ Sparkle Design components provide: ### Official Documentation -- [Sparkle Design](https://sparkle-design.vercel.app/) +- [Sparkle Design](https://sparkle-design.goodpatch.com/) - [shadcn/ui CLI](https://ui.shadcn.com/docs/cli) - [Tailwind CSS](https://tailwindcss.com/docs) - [Radix UI](https://www.radix-ui.com/) diff --git a/.claude/skills/add-sparkle-component/references/css-structure.md b/.claude/skills/add-sparkle-component/references/css-structure.md index ed7d872a..a9075974 100644 --- a/.claude/skills/add-sparkle-component/references/css-structure.md +++ b/.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 diff --git a/.claude/skills/add-sparkle-component/references/sparkle-design-features.md b/.claude/skills/add-sparkle-component/references/sparkle-design-features.md index beb790ac..3ed79499 100644 --- a/.claude/skills/add-sparkle-component/references/sparkle-design-features.md +++ b/.claude/skills/add-sparkle-component/references/sparkle-design-features.md @@ -802,7 +802,7 @@ Button, Input, Checkbox, IconButton など `isDisabled` prop を持つコンポ ## Resources -- **Official Documentation:** https://sparkle-design.vercel.app/ +- **Official Documentation:** https://sparkle-design.goodpatch.com/ - **shadcn/ui Documentation:** https://ui.shadcn.com/docs - **Tailwind CSS Documentation:** https://tailwindcss.com/docs - **Radix UI Documentation:** https://www.radix-ui.com/ diff --git a/.claude/skills/add-sparkle-component/references/troubleshooting.md b/.claude/skills/add-sparkle-component/references/troubleshooting.md index a9b45a95..d47f0e97 100644 --- a/.claude/skills/add-sparkle-component/references/troubleshooting.md +++ b/.claude/skills/add-sparkle-component/references/troubleshooting.md @@ -138,7 +138,7 @@ Registry not found: @sparkle-design/ ```json { "registries": { - "@sparkle-design": "https://sparkle-design.vercel.app/r/{name}.json" + "@sparkle-design": "https://sparkle-design.goodpatch.com/r/{name}.json" } } ``` @@ -169,7 +169,7 @@ pnpm dlx shadcn@latest add @sparkle-design/ **Solution C:** Verify component name -Check available components at: https://sparkle-design.vercel.app/ +Check available components at: https://sparkle-design.goodpatch.com/ Common component names: @@ -397,7 +397,7 @@ If you're still experiencing problems after trying these solutions: Check if others have encountered the same problem: - - Sparkle Design documentation: https://sparkle-design.vercel.app/ + - Sparkle Design documentation: https://sparkle-design.goodpatch.com/ - shadcn/ui documentation: https://ui.shadcn.com/docs 5. **Create a minimal reproduction:** diff --git a/.claude/skills/add-sparkle-component/scripts/install_component.py b/.claude/skills/add-sparkle-component/scripts/install_component.py index 4f7c29a1..311cd510 100755 --- a/.claude/skills/add-sparkle-component/scripts/install_component.py +++ b/.claude/skills/add-sparkle-component/scripts/install_component.py @@ -253,7 +253,7 @@ def main() -> int: print(f"❌ Configuration error: {error_msg}\n", file=sys.stderr) print("💡 Tip: Make sure components.json has the @sparkle-design registry configured:") print(' "registries": {') - print(' "@sparkle-design": "https://sparkle-design.vercel.app/r/{name}.json"') + print(' "@sparkle-design": "https://sparkle-design.goodpatch.com/r/{name}.json"') print(" }") return 1 diff --git a/.claude/skills/add-sparkle-component/scripts/validate_config.py b/.claude/skills/add-sparkle-component/scripts/validate_config.py index 241e8fa0..e0332f90 100755 --- a/.claude/skills/add-sparkle-component/scripts/validate_config.py +++ b/.claude/skills/add-sparkle-component/scripts/validate_config.py @@ -22,7 +22,7 @@ from typing import Any -REQUIRED_REGISTRY_URL = "https://sparkle-design.vercel.app/r/{name}.json" +REQUIRED_REGISTRY_URL = "https://sparkle-design.goodpatch.com/r/{name}.json" def check_components_json(project_path: Path) -> tuple[bool, list[str]]: diff --git a/.claude/skills/setup-sparkle-design/SKILL.md b/.claude/skills/setup-sparkle-design/SKILL.md index 843fcbb5..c87e77e8 100644 --- a/.claude/skills/setup-sparkle-design/SKILL.md +++ b/.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 ( diff --git a/.claude/skills/setup-sparkle-design/references/component-catalog.md b/.claude/skills/setup-sparkle-design/references/component-catalog.md index 9c331799..a3670d6d 100644 --- a/.claude/skills/setup-sparkle-design/references/component-catalog.md +++ b/.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"; 3; ``` @@ -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"; @@ -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"; ; ``` @@ -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"; home favorite @@ -202,7 +202,7 @@ import { Icon } from "@goodpatch/sparkle-design"; - **使いどころ**: ツールバー、閉じるボタン、編集ボタン。アクセシビリティのため `aria-label` を必ず付与する ```tsx -import { IconButton } from "@goodpatch/sparkle-design"; +import { IconButton } from "sparkle-design"; ; ``` @@ -223,7 +223,7 @@ import { InlineMessage, InlineMessageTitle, InlineMessageDescription, -} from "@goodpatch/sparkle-design"; +} from "sparkle-design"; エラーが発生しました @@ -245,7 +245,7 @@ import { - **注意**: disabled 系は `isDisabled` を優先する ```tsx -import { Input } from "@goodpatch/sparkle-design"; +import { Input } from "sparkle-design"; ; ; @@ -258,7 +258,7 @@ import { Input } from "@goodpatch/sparkle-design"; パスワード入力フィールド。表示/非表示のトグルボタン付き。 ```tsx -import { InputPassword } from "@goodpatch/sparkle-design"; +import { InputPassword } from "sparkle-design"; ; ``` @@ -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"; 詳細を見る; 外部リンク; @@ -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"; ; ``` @@ -354,7 +354,7 @@ import { Skeleton } from "@goodpatch/sparkle-design"; 指定範囲内の値をスライダーで選択。 ```tsx -import { Slider } from "@goodpatch/sparkle-design"; +import { Slider } from "sparkle-design"; ; ``` @@ -366,7 +366,7 @@ import { Slider } from "@goodpatch/sparkle-design"; 処理の進行中を視覚的に示すインジケータ。 ```tsx -import { Spinner } from "@goodpatch/sparkle-design"; +import { Spinner } from "sparkle-design"; ; ``` @@ -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"; ; ``` @@ -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"; デザイン; ``` @@ -423,7 +423,7 @@ import { Tag } from "@goodpatch/sparkle-design"; 複数行のテキスト入力フィールド。 ```tsx -import { Textarea } from "@goodpatch/sparkle-design"; +import { Textarea } from "sparkle-design";