knorq

Claude Code 用 vibe coding プラグイン。エンジニアでなくても、自然言語で本格的な Web アプリを構築できる。

概要

knorq は Claude Code をプロダクション品質のエンジニアリングパートナーに変える。ユーザーが作りたいものを日本語で伝えるだけで、Claude が設計から実装・デプロイまで対応する。

• 12 のスキル — プロジェクトの新規作成からデザイン、レビュー、デプロイまでカバー
• エージェント — セキュリティ、アーキテクチャ、UX パターン、コスト意識を組み込んだ開発パートナー
• Design Gallery 連携 — 18 レイアウト × 12 カラーテーマをワンクリックで適用
• 日本語ファースト — 会話も UI ラベルもすべて日本語

技術スタック

knorq で作るプロジェクトは以下のスタックを使う：

• Next.js (App Router) + TypeScript
• Firebase (Firestore, Auth, Storage)
• shadcn/ui + Tailwind CSS
• Vercel（デプロイ）

スターターコードの配布ではなく、常に最新の安定版でスキャフォールドする。

インストール（公開後）

/plugin marketplace add knorq-ai/vibe-code
/plugin install knorq@knorq

ローカル開発 & テスト

前提条件

• Claude Code CLI がインストール済み
• Node.js 18+、npm、Git

セットアップ

git clone https://github.com/knorq-ai/vibe-code.git
cd vibe-code

ローカルでプラグインをテストする

--plugin-dir フラグでローカルのプラグインディレクトリを指定して Claude Code を起動する：

# テスト用の空ディレクトリを作って、そこでプラグインを読み込む
mkdir -p ~/test-app && cd ~/test-app
claude --plugin-dir /path/to/vibe-code

起動後、以下のコマンドが使えることを確認：

/knorq:preflight     # 環境チェック（最初にこれを実行）
/knorq:start         # フルのオンボーディングフロー
/knorq:design        # デザインリサーチ単体テスト

テスト手順

1. プラグイン検証

claude plugin validate /path/to/vibe-code

エラーなしで Validation passed が出ること。

2. /knorq:preflight テスト

プラグインを読み込んだ Claude Code で /knorq:preflight を実行。Node.js、npm、Git の検出結果が表示されること。

3. /knorq:start フルフロー テスト

空ディレクトリで /knorq:start を実行し、以下が正常に動作するか確認：

• ヒアリング（アプリ種類・ターゲット・機能の質問が AskUserQuestion で表示される）
• PROJECT.md が生成される
• npx create-next-app@latest でスキャフォールドされる
• shadcn/ui のコンポーネントがインストールされる
• src/lib/firebase.ts が作成される
• .env.example が作成される
• .claude/settings.json が作成される（npm コマンドの許可設定）
• .claude/rules/ ディレクトリが作成される

4. /knorq:design テスト

スキャフォールド済みのプロジェクトで /knorq:design を実行：

• レイアウト一覧が表示される（API: GET https://www.knorq.com/api/design-gallery/layouts）
• テーマ一覧が表示される（API: GET https://www.knorq.com/api/design-gallery/styles）
• 選択後、globals.css の CSS 変数が更新される
• .claude/rules/design-system.md にスタイル情報が書き込まれる

ワンクリック適用もテスト：

/knorq:design layout=analytics-dashboard theme=clean-minimal

対話がスキップされ、直接適用されること。

5. その他のスキル

• /knorq:build — npm run build が実行される
• /knorq:design-check — デザインシステム準拠チェックが走る
• /knorq:deep-review — 8 次元のコードレビューが出力される
• /knorq:todo-prod — TODO(prod) コメントがスキャンされる

プラグイン構造

vibe-code/
├── .claude-plugin/
│   ├── plugin.json          # プラグインマニフェスト
│   └── marketplace.json     # マーケットプレイス定義
├── agents/
│   └── vcode-fde.md         # メインエージェント（デフォルト人格）
├── hooks/
│   ├── hooks.json           # Chrome 自動フォーカス hook
│   └── focus-chrome.js      # macOS/Windows/Linux 対応
├── skills/
│   ├── start/SKILL.md       # プロジェクト新規作成
│   ├── design/SKILL.md      # デザインリサーチ
│   ├── design-check/SKILL.md
│   ├── deep-review/SKILL.md
│   ├── firebase-setup/SKILL.md
│   ├── deploy/SKILL.md
│   ├── preflight/SKILL.md
│   ├── fix/SKILL.md
│   ├── dev/SKILL.md
│   ├── stop/SKILL.md
│   ├── build/SKILL.md
│   └── todo-prod/SKILL.md
├── settings.json            # エージェント指定
├── .mcp.json                # Firebase MCP サーバー
├── README.md
├── CHANGELOG.md
└── LICENSE

変更を加える場合

• スキルの修正: skills/<name>/SKILL.md を編集 → --plugin-dir で再起動して確認
• エージェントの修正: agents/vcode-fde.md を編集 → 再起動して確認
• 新しいスキルを追加: skills/<name>/SKILL.md を作成。frontmatter に description を記述
• 検証: 変更後は claude plugin validate . を実行してエラーがないことを確認

--plugin-dir で起動した場合、プラグインファイルはキャッシュされずに直接読まれるため、ファイルを編集して Claude Code を再起動するだけで変更が反映される。

既知の注意点

• settings.json の agent フィールドでデフォルトエージェントを指定しているが、bash コマンドの許可（permissions）はプラグイン経由では配布できない。/knorq:start のスキャフォールド時にユーザーのプロジェクトに .claude/settings.json を作成して対応している
• Design Gallery API（www.knorq.com/api/design-gallery/*）が down の場合、/knorq:design スキルにフォールバックのハードコード一覧がある
• Chrome 自動フォーカス hook は mcp__claude-in-chrome__ ツールに反応する。Chrome MCP が未設定の環境では無視される

スキル一覧

コマンド	説明
/knorq:start	プロジェクト新規作成（ヒアリング → 設計 → 実装）
/knorq:design	Design Gallery でレイアウト・テーマを選択
/knorq:design-check	デザインシステム準拠チェック
/knorq:deep-review	8 次元コードレビュー
/knorq:firebase-setup	Firebase セットアップガイド
/knorq:deploy	Vercel デプロイガイド
/knorq:preflight	開発環境チェック
/knorq:fix	よくあるエラーのデバッグ
/knorq:dev	開発サーバー起動 + ブラウザ表示
/knorq:stop	開発サーバー停止
/knorq:build	ビルドチェック
/knorq:todo-prod	TODO(prod) コメントのスキャン

Design Gallery

knorq.com/design-gallery でレイアウトとテーマをプレビューできる。

「この組み合わせを使う」ボタンをクリックすると /knorq:design layout=X theme=Y がコピーされる。Claude Code に貼り付けるだけでデザインシステムが自動適用される。

ライセンス

MIT