Claude Codeのハーネスで作ってみた設定ファイル生成ツール - ConfigDeck

 (configdeck.dev)
3 ポイント 投稿者 weedroot 28 일 전 | 1件のコメント | WhatsAppで共有

ConfigDeck (https://configdeck.dev/ko) という小さなツールを作ってみました。
設定ファイル生成ツール自体はよくあるテーマですが、作り方が少し実験的だったので、その経験を共有してみたいと思いました。

何か

プロジェクトを始めるたびに .eslintrc、prettier.config、tsconfig のような設定ファイルを以前のプロジェクトからコピペするのが面倒だったので、オプションを選んでダウンロードする形で作ってみました。

  • 9種類の設定ファイルをサポート: ESLint, Prettier, TSConfig, Vite, Vitest, Next.js,
    .gitignore, .editorconfig, .env.example
  • スタックプリセット: React+Vite, Next.js, Astro, Node.js など、複数ファイルをまとめて生成
  • .eslintrc → eslint.config.mjs へのマイグレーション (Flat Config 変換)
  • 日本語 / 英語対応
  • 100% 静的サイト (Cloudflare Pages、コンテンツページ JS 0KB)
  • 入力値はブラウザ内でのみ処理され、外部送信なし

技術スタック: Astro 6 + Svelte 5 (Runes) + Tailwind 4 + TypeScript strict

作り方 — AIにかなり任せてみました

今回は Claude Code を活用して、開発プロセス自体を整理する試みをしてみました。
企画の方向性を定めたり途中でチェックしたりする程度が人間の担当で、実装はできるだけ AI に任せてみました。うまくいった部分もあり、試行錯誤も多かったのですが、プロセスを公開すれば似たような試みをしている方の参考になるかもしれないと思い、整理してみました。

リポジトリの .claude/ ディレクトリに、使用した設定をすべて公開しています:
https://github.com/jsg3121/configDeck/tree/main/.claude

  • ハーネス文書 (CLAUDE.md, conventions, ADR など)
  • ドメイン別エージェント (config-maker, ui-publisher, ux-designer,
    qa-agent, seo-specialist など)
  • スラッシュスキル (/lint-check, /code-review, /seo-audit, /research など)
  • ADR による技術的意思決定の記録
  • 自動化 Hook (PostToolUse フォーマット、Stop でのビルド/lint 検証)

書きながら意識したのは「Why-First」くらいです。ルールだけを書くより、なぜそうするのかも一緒に書くことで、AI がエッジケースでもより一貫して判断するように感じました。

エージェントはおおよそ次のような流れで協業するように構成しました:

product-planner → ux-designer → ui-publisher → qa-agent
(企画) (設計) (実装) (検証)

QA は unit-tester / e2e-tester / static-analyzer のサブエージェントを置き、qa-agent が結果を集約してレポートを作る形です。

試行錯誤

良かった点

  • ADR で意思決定を残しておくことで、時間が経っても「なぜこう書いたのか?」を振り返りやすくなりました。
  • ハーネスにコンベンションを書いておくと、セッションが変わっても成果物が比較的一貫して出るようです。
  • ドメインごとにエージェントを分けておくことで、企画と実装が1つのコンテキストに混ざらず、追いやすかったです。

難しかった点

  • 最初はハーネスがなかったため成果物のスタイルが毎回ぶれ、今の形に整理されるまで何度も手直ししました。
  • トークンコストが思ったより負担だったので、作業規模に応じてメイン会話 / スキル / エージェントを使い分けるガイドを別途作って使っています。
  • AI がうまくできたかのように報告することがあるため、Stop hook でビルド / lint を自動検証するようにしたのが役立ちました。

まだ正解を見つけたとは言いづらく、もっと良い方法がある気がします。

リンク

関連記事

1件のコメント

 
heycalmdown 27 일 전

面白いアイデアですね。いつもグリーンフィールドのプロジェクトばかりやるわけではないので、逆に既存のぐちゃぐちゃになったconfigファイルを入れると、どのオプションなのかを説明して、オン・オフできるようにしてくれても面白そうですね。