ayushxx7/project-showcase-skill

Project Showcase スキル

このスキルは開発の「ラストマイル」、つまりあなたの作業を世界に公開する工程を自動化します。主要なUIコンポーネントを特定し、自動的にキャプチャし、プロフェッショナルなドキュメントを生成します。

コマンド

• /showcase: 魔法の一手（デフォルト）。UIキャプチャ＋ターミナル録画＋README更新＋GitHubリリース＋メタデータ（About/ラベル）を実行します。
• /select: 実行する特定の機能を選択するためのインタラクティブUIを開きます。
• /capture: Playwrightを使用して高忠実度のUIキャプチャをトリガーします。
• /record: VHSを使用してターミナルデモを録画します。
• /audit: リポジトリ健全性診断（スコアリングと修復計画）を実行します。
• /readme: READMEを視覚ギャラリーとバッジで外科的に更新します。
• /release: 公式GitHubリリースを作成します（v0.1.0-alpha）。
• /metadata: GitHubの「About」と「Topics」を自動検出して更新します。
• /socials: LinkedInとReddit向けのすぐに投稿できるコンテンツを生成します。
• /scan: プライバシー重視のセキュリティスキャンを実行し、秘密鍵や.envの漏洩をチェックします。
• /license: MITライセンスを確認または追加します。
• /setup: すべての依存関係（Playwright、VHS、ffmpeg）がインストールされていることを確認します。

コアワークフロー

1. 初期分析と自動セットアップ

• 目標: プロジェクトタイプを特定し、環境が準備できていることを確認します。
• 自律的なアセット生成:
  • UIキャプチャまたはターミナル録画がない場合、エージェントはそれらをスキップしたり、壊れたリンクを残したりしてはいけません。
  • ステップ1: Playwright/VHSで実際のキャプチャを試みます。
  • ステップ2: ステップ1が失敗した場合、高忠実度の「ビジュアルアーキテクチャ」図や、プロジェクトのロジックを表現したスタイライズドSVGを生成します。
  • 成果: ショーケースされたすべてのリポジトリには、実際のものか生成されたものかを問わず、視覚要素が必須です。
• フレームワーク検出と秘密管理:
  • Streamlitプロジェクト: streamlit_app.py または requirements.txt 内の streamlit で検出します。
  • 秘密鍵の移行: 検出された場合、.env キーを .streamlit/secrets.toml に移行することを提案し、Streamlit Cloud の標準に準拠させます。
• セキュリティとプライバシースキャン（/scan）:
  • キャプチャの前に、エージェントはプロジェクト内の一般的なAPIキーパターン（OpenAI、Anthropic、Google、AWSなど）をスキャンする必要があります。
  • ソースコードまたは .env ファイルに秘密鍵が見つかった場合、エージェントはユーザーに警告し、.gitignore に追加することを提案する必要があります。
• ライセンス確認（/license）:
  • プロジェクトに LICENSE ファイルがあるか確認します。ない場合は、MITライセンスの追加を提案します。
• 依存関係チェック（/setup）:
  • キャプチャの前に、エージェントは playwright（Python）、vhs（システム）、および ffmpeg がインストールされているか確認する必要があります。

2. 自動キャプチャ（/capture、/record）

• UIキャプチャ: scripts/capture.py を使用します。レスポンシブ、全ページ、マスキング、ダークモードに対応しています。
• ターミナル録画: scripts/record_cli.tape と VHS を使用します。
• 検証と自動修正:
  • キャプチャ後、生成されたアセットを検査します。
  • 失敗検出: 404ページ、空白画面、または vhs パーサーエラーがないか確認します。
• クリーンアップ:
  • ショーケースが検証され、README が更新されたら、すべての一時ファイルを削除します。
  • showcase/ フォルダに最終的な高品質アセット（例：landing.png、demo.gif）のみが残るようにします。

3. READMEドキュメントと衛生管理（/readme）

• 目標: 「最初に見せ、次に説明する」プロフェッショナルなREADMEを構築します。
• Read the Docs（オプション/非UI向け）:
  • 検出: プロジェクトがCLIツール、ライブラリ、またはバックエンドAPI（非UI）の場合、エージェントはMkDocsを使用した「Read the Docs」のセットアップを提案すべきです。
  • アクション: 基本的な mkdocs.yml と docs/ 構造の作成を提案します。
  • ユーザーの選択: 常に質問します：「これは[CLI/ライブラリ]ですが、'Read the Docs'スタイルのドキュメントサイトもセットアップしますか？」
• アセットの整合性:
  • 絶対に壊れた画像リンクやプレースホルダー（存在しない landing.png など）を含めてはいけません。
  • 実際のキャプチャが不可能な場合、エージェントは高忠実度の代替案（例：Mermaid図）を生成しなければなりません。
• 「Vibe優先」README:
  • メタデータの排除: 診断用の健全性テーブルやチェックマーク/パーセンテージ行（例：✅ Secure | ✅ 92/100）を削除します。これらは機械的で雑然としています。
  • 自然なコンテキスト文: キーワードの代わりに、プロジェクトの本質、技術スタック、目的を自然に織り交ぜた、単一の高シグナル文を生成します。
    • 例: 「ReactとTypeScriptで構築された、自動UI監査のためのプライバシー第一のAIエージェント」
    • ルール: この文は監査レポートではなく、人間が書いたサブタイトルのように感じられるべきです。
  • 外部健全性診断: 詳細なスコアリング、健全性テーブル、診断データはすべて、専用の外部リポジトリ/ファイル（例：ayush-repos-health）に移動するか、別の REPO_HEALTH.md の最下部に保持する必要があります。メインのREADMEは、製品と「Vibe」に厳密に焦点を当てたままにします。
• 外科的注入と重複排除:
  • 決して重複させない: セクションがすでに存在する場合（例：「アーキテクチャ」「機能」「インストール」）、エージェントは2つ目のバージョンを追加してはいけません。
  • 優越性の選択: 既存のコンテンツと生成されたコンテンツを比較します。生成されたバージョンの方が優れている場合（より明確で視覚的）、古いものを置き換えます。
  • ハイブリッドマージ: 両方に固有の価値がある場合は、単一のまとまりのあるセクションにマージします。
  • ゼロ冗長性: プロジェクトのあらゆる側面に対して、単一で合理化された唯一の情報源を提供します。重複するヘッダーはありません。
• トップフォルダ配置: 最初のインパクトを最大化するために、エレベーターピッチの直後にビジュアルギャラリーを配置することを常に目指します。

4. プロフェッショナルなデリバリーとリリース（/release、/metadata）

• 目標: 公式配布用にプロジェクトをパッケージ化します。
• プロフェッショナルなGitHubリリース（/release）:
  • ショーケースの完了時に、自動化された**リリース（例：v0.1.0-alpha/beta/stable）**を作成します。
• GitHubメタデータ（/metadata）:
  • scripts/manage_metadata.py を使用して、「About」の説明と「Topics」（ラベル）を検出して更新します。
• 検証と妥当性確認:
  • ライブリポジトリ監査:
    • 最終決定前に、README、バッジ、ビジュアルギャラリー、GitHub Topics が正しくレンダリングされていることを視覚的に確認します。
  • クリーンな状態: 秘密鍵を削除するためにフォースプッシュが必要だった場合は、リリースが最新のクリーンなコミットハッシュと再関連付けられていることを確認します。

5. リポジトリ健全性と修復（/audit）

• 目標: プロジェクトの「準備状態」を診断し、外科的な改善を提案します。
• スコアリング: 0-100スケールで重み付けされたスコアを割り当てます。
• チェックリスト項目:
  • ドキュメント（README、LICENSE）
  • セキュリティ（秘密鍵、.gitignore）
  • 自動化（setup.sh、テスト）
  • ショーケース（スクリーンショット、VHS）
  • ボーナス（+5点）: 拡張ドキュメント（MkDocs/Read the Docs） - 特に非UIアプリに推奨。
• 思慮深い処方箋: 修正する前に、エージェントは**「修復計画」**を提示する必要があります。
• 修復: ユーザーの承認後にのみ、修正を外科的に適用し、再診断して改善されたスコアを示します。

6. ソーシャルメディアとPR（/socials）

• 目標: 外部コミュニケーションのためにプロジェクトを要約します。
• 形式:
  • LinkedIn: プロフェッショナルで、価値に基づき、バッジ重視。
  • Reddit: 技術的で、開発者から開発者へ、GIF中心。

ベストプラクティス

• ロードを待つ: チャートやLLMの応答がレンダリングされることを確認するために、常に page.wait_for_selector() または time.sleep() を含めてください。
• 品質確認: python3 tests/test_readme_injection.py を実行して、注入ロジックがまだ健全であることを確認してください。
• ドキュメント衛生: 診断データのためにREADMEの美しさを犠牲にしないでください。「Vibe」のためにREADMEを維持し、「監査」は REPO_HEALTH.md に移動してください。

---

世界中のVibeコーダーに愛を込めて。