コロケーションパターンに基づくファイル分割とscaffdogテンプレート生成を支援する。コンポーネント・機能単位でファイルをグループ化し、一貫した構造を維持する。
From scaffdog-colocationnpx claudepluginhub utakatakyosui/c2lab --plugin scaffdog-colocationThis skill uses the workspace's default tool permissions.
colocation-patterns.mdfile-naming-conventions.mdframework-examples.mdscaffdog-syntax.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Reviews prose for communication issues impeding comprehension, outputs minimal fixes in a three-column table per Microsoft Writing Style Guide. Useful for 'review prose' or 'improve prose' requests.
関連するファイルを同じディレクトリに配置するパターン。コンポーネントのソースコード、テスト、スタイル、型定義などを1つのディレクトリにまとめることで、見通しと保守性を向上させる。
| ファイル種別 | 命名パターン | 例 |
|---|---|---|
| メインファイル | {Name}.{tsx,vue,svelte,ts} | Button.tsx |
| テスト | {Name}.test.{ts,tsx} | Button.test.tsx |
| スタイル | {Name}.module.css or {Name}.css.ts | Button.module.css |
| 型定義 | {Name}.types.ts | Button.types.ts |
| バレル | index.ts | index.ts |
| フック | use{Name}.ts | useButton.ts |
| ユーティリティ | {Name}.utils.ts | Button.utils.ts |
| 定数 | {Name}.constants.ts | Button.constants.ts |
| ストーリー | {Name}.stories.tsx | Button.stories.tsx |
src/components/Button/
├── index.ts # バレルエクスポート(公開API)
├── Button.tsx # メインコンポーネント
├── Button.test.tsx # テスト
├── Button.module.css # スタイル
├── Button.types.ts # 型定義
└── Button.stories.tsx # Storybook(オプション)
.scaffdog/component.md の最小構成:
---
name: "component"
root: "src/components"
output: "**/*"
questions:
name: "Component name (PascalCase):"
---
# `{{ inputs.name }}/index.ts`
\```ts
export { {{ inputs.name }} } from './{{ inputs.name }}';
export type { {{ inputs.name }}Props } from './{{ inputs.name }}.types';
\```
# `{{ inputs.name }}/{{ inputs.name }}.tsx`
\```tsx
import type { {{ inputs.name }}Props } from './{{ inputs.name }}.types';
export const {{ inputs.name }} = (props: {{ inputs.name }}Props) => {
return <div>{{ inputs.name }}</div>;
};
\```