Skip to content
cccskills
FreePublished on GitHub

prototype

アイデアの壁打ちから、動くプロトタイプ+デモ一式(起動確認・スクショ・デモ手順)まで一気通貫で伴走する。

The English summary is being prepared. Showing the original description.

Works withFirebase
See how to install

Files included (1)

  • SKILL.md4.9 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

アイデア( $ARGUMENTS )を、壁打ちで磨いた上で動くプロトタイプに仕立てる。research / plan などの重いプロセスは踏まず、スピードと「本実装の種になる品質」の両立を狙う。

引数

$ARGUMENTS はアイデアの自由記述(例: レシピ共有アプリ)。省略時はステップ 1 の壁打ちをゼロから始める。

config.json

~/.agents/.skills-config/prototype/config.json に、ユーザーの定番設定を蓄積する(ファイルやディレクトリが無ければ初回に作成する)。

  • prototypes_dir: プロトタイプ置き場のデフォルト(例: ~/dev/prototypes)
  • preferred_stacks: 過去に選ばれたスタックの傾向(スタック提案時の推奨度に反映する)
  • stack_skills: スタック別に有用だった Agent Skill の蓄積(ステップ 4 の定番表に加えて参照する)

手順

1. 壁打ち(発散 → 収束)

  1. 発散: アイデアに対して、拡張案・類似サービスとの比較・差別化ポイント・想定ユーザーを提示し、AskUserQuestion で 1 テーマずつ対話して膨らませる(一度に大量の質問を並べない)
  2. 収束: 出てきた要素から コア体験を 1 つ に絞り込む。プロトタイプで検証したいことを一文で言語化し、ユーザーの合意を得る

2. 簡易スペック合意

目的(コア体験)・画面/コマンド一覧・機能リスト・ダミーデータ方針を短い仕様メモにまとめ、ユーザーの OK を得てから着手する。詳細な設計書は書かない。

3. スタック提案

コア体験に適した技術スタックを 2〜3 案、推奨度(5 段階)と理由付きで提示し、ユーザーが選択する。Web / CLI / モバイルのいずれも候補にしてよい。config.json の preferred_stacks があれば推奨度に反映する。

4. Agent Skill の導入

選んだスタックに合う Agent Skill を find-skills で探し、有用なものがあれば導入する。

  1. まず下表の スタック別定番スキル を確認し、該当するものは検索を待たず導入候補に含める(config.json の stack_skills に蓄積があればそちらも加える)

    スタックスキル導入コマンド
    Webmodern-web-guidancenpx skills add https://github.com/googlechrome/modern-web-guidance --skill modern-web-guidance
    Webchrome-devtools-clinpx skills add https://github.com/ChromeDevTools/chrome-devtools-mcp --skill chrome-devtools-cli
    Firebase 利用時firebase/agent-skillsnpx skills add firebase/agent-skills で対話選択(firebase-basics + 使うプロダクトのスキルを選ぶ。例: firestore / auth / hosting)
  2. find-skills 未導入なら: npx skills add https://github.com/vercel-labs/skills --skill find-skills

  3. npx skills find <スタック名や用途> で検索する(skills.sh の leaderboard 上位・公式プロバイダを優先)

  4. 定番+検索結果の候補をユーザーに提示し、了承を得て npx skills add <package> で導入する。適切なものが無ければ導入せず先に進む

5. セットアップ

  1. 置き場所を AskUserQuestion で確認する(config.json の prototypes_dir 配下に新規作成をデフォルト候補にする)
  2. プロジェクトを scaffold し、git init + 初回 commit を行う

6. 実装

簡易スペックの機能リストを実装する。品質方針:

  • 本実装の種になる品質: ディレクトリ構造・命名・責務分離はまともに保つ
  • テスト・厳密なエラー処理・エッジケース対応は省略してよい
  • ダミーデータで成立させ、外部サービス連携はモックを優先する

7. 動作確認とデモ整備

  1. 実際に起動して(dev サーバ / CLI 実行 / シミュレータ)コア体験が動くことを確認する
  2. スクリーンショット(または録画)を docs/screenshots/ に保存する
  3. README.md に起動方法、docs/ に仕様メモ・デモ手順(見せる順番と操作)を書く
  4. 節目として commit する

8. フィードバックループ

  1. ユーザーに触ってもらい、感想・修正要望を聞く
  2. 修正して動作確認し、節目ごとに commit する
  3. ユーザーが満足するまで繰り返す。終了時、スタックの選択結果を config.json の preferred_stacks に、今回有用だった Agent Skill を stack_skills に追記する

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

chrome-devtools-mcp の CLI (`chrome-devtools`) を使ったブラウザ操作の総合スキル。既存ブラウザへの attach / 使い捨てテストブラウザ / ログイン状態を保持する永続プロファイルのいずれかをユーザーに必ず確認した上でサーバを立ち上げ、スナップショット取得・クリック・入力・ナビゲーション・スクショ・ネットワーク監視などを行う。

The English summary is being prepared. Showing the original description.

tanabee/skills3Updated Oct 17, 2026

checklist の「UI 撮影台本」に沿って UI のスクリーンショットを撮影し、前後比較(compare.html)用の before / after 素材を保存する。「実装前の UI を撮っておいて」「after のスクショを撮って」などの依頼で発火する。

The English summary is being prepared. Showing the original description.

tanabee/skills3Updated Oct 17, 2026

Read and analyze log entries from Cloud Logging using the gcloud CLI.

The English summary is being prepared. Showing the original description.

tanabee/skills3Updated Oct 17, 2026

Codex 公式プラグイン (codex-plugin-cc) のネイティブレビューでコードレビューを実施する。PR 番号指定時は PR を、無指定時は現在ブランチとベースブランチの差分をレビューする。

The English summary is being prepared. Showing the original description.

tanabee/skills3Updated Oct 17, 2026

copy

Free

指定された内容をクリップボードにコピーするスキル。ファイルパスならその中身を、テキストならそのまま、会話中の直前の出力(コマンド結果・生成コード・URL など)を指す場合はその内容を pbcopy でコピーする。ユーザーが「コピーして」「クリップボードに入れて」などコピーの意図を示したら必ず使用する。

The English summary is being prepared. Showing the original description.

tanabee/skills3Updated Oct 17, 2026

GitHub issue から PR のタイトルと説明文を作成する。

The English summary is being prepared. Showing the original description.

tanabee/skills3Updated Oct 17, 2026

See all skills by tanabee

Report a problem with this skill