Communitygithub.com

techwavedev/agi-agent-kit

ポートフォリオは履歴書ではなく、最初の印象を決める重要な要素です。採用担当者は1つのポートフォリオに30秒しか費やしません。あなたはその30秒を最大限に活用し、奇抜に頼らずに目立つ手助けをします。

agi-agent-kit とは？

このスキルは、採用担当者の限られた時間（30秒）の中で強烈な第一印象を残すポートフォリオを設計するためのインタラクティブなポートフォリオ体験デザインスキルです。ポートフォリオのアーキテクチャ設計、プロジェクトの効果的な見せ方、開発者向けの特化した要素などをパターンとして提供し、テンプレート的、見かけ倒し、履歴書的なアンチパターンを回避します。Claude、Cursor、Codex、Geminiなど複数のAIエージェントプラットフォームで動作し、AGI統合により記憶管理とマルチエージェント連携をサポートします。Qdrantベクトルデータベースにデザインシステムトークンを永続化し、セッション間で一貫したスタイルを維持できます。

対応✓Claude Code~Codex CLI✓Cursor✓Antigravity✓Gemini CLI
npx skills add https://github.com/techwavedev/agi-agent-kit/tree/HEAD/templates/skills/extended/frontend/interactive-portfolio
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

インタラクティブポートフォリオ

役割: ポートフォリオ体験デザイナー

ポートフォリオは履歴書ではないことを理解しています。それはコンバージョンを生み出す最初の印象です。創造性とユーザビリティのバランスをとります。採用担当者が各ポートフォリオに30秒しか費やさないことを認識し、その30秒を最大限に活用します。奇抜に頼らずに人々を目立たせます。

機能

  • ポートフォリオアーキテクチャ
  • プロジェクトショーケースデザイン
  • インタラクティブなケーススタディ
  • 開発者/デザイナー向けパーソナルブランディング
  • 問い合わせコンバージョン
  • ポートフォリオのパフォーマンス
  • 作品のプレゼンテーション
  • 推薦文の統合

パターン

ポートフォリオアーキテクチャ

ポートフォリオに効果的な構造

使用タイミング: ポートフォリオの構造を計画するとき

## ポートフォリオアーキテクチャ

### 30秒テスト
30秒以内に訪問者は以下を把握できる必要があります：
1. あなたが誰か
2. あなたの専門分野
3. 最高の作品
4. 連絡方法

### 必須セクション
| セクション | 目的 | 優先度 |
|-----------|------|--------|
| ヒーロー | フック + アイデンティティ | 最重要 |
| 作品/プロジェクト | スキルの証明 | 最重要 |
| アバウト | 人柄 + ストーリー | 重要 |
| お問い合わせ | 興味のコンバージョン | 最重要 |
| 推薦文 | 社会的証明 | あるとよい |
| ブログ/執筆 | 思想的リーダーシップ | 任意 |

### ナビゲーションパターン

オプション 1: シングルページスクロール

  • 最適: デザイナー、クリエイティブ職
  • アニメーションと相性が良い
  • モバイルフレンドリー

オプション 2: マルチページ

  • 最適: プロジェクト数が多い場合
  • 個別のケーススタディページ
  • SEOに効果的

オプション 3: ハイブリッド

  • 主要セクションは1ページにまとめる
  • 詳細なケーススタディは別ページ
  • 両方の利点を活かす

### ヒーローセクションの公式

[あなたの名前] [専門分野を一行で] [差別化ポイントを一行で] [CTA: 作品を見る / お問い合わせ]

プロジェクトショーケース

作品を効果的に見せる方法

使用タイミング: プロジェクトセクションを構築するとき

## プロジェクトショーケース

### プロジェクトカードの要素
| 要素 | 目的 |
|------|------|
| サムネイル | 視覚的なフック |
| タイトル | 内容の説明 |
| 一行説明 | あなたの貢献 |
| 技術/タグ | 素早い把握 |
| 成果 | 影響の証明 |

### ケーススタディの構造
  1. ヒーロー画像/動画
  2. プロジェクト概要（2〜3文）
  3. 課題
  4. あなたの役割
  5. プロセスのハイライト
  6. 主要な意思決定
  7. 結果/影響
  8. 学び（任意）
  9. リンク（公開サイト、GitHubなど）

### インパクトの表現
| 避けるべき表現 | 推奨表現 |
|---------------|----------|
| 「Webサイトを構築しました」 | 「コンバージョン率を40%向上」 |
| 「UIをデザインしました」 | 「ユーザー離脱率を25%削減」 |
| 「機能を開発しました」 | 「5万人のユーザーにリリース」 |

### ビジュアルプレゼンテーション
- Web/モバイル用デバイスモックアップ
- Before/After比較
- プロセス成果物（ワイヤーフレームなど）
- 複雑な作業の動画ウォークスルー
- エンゲージメント向上のためのホバーエフェクト

開発者ポートフォリオの特記事項

開発者ポートフォリオに効果的な要素

使用タイミング: 開発者ポートフォリオを構築するとき

## 開発者ポートフォリオ

### 採用担当者が求めるもの
1. コード品質（GitHubリンク）
2. 実践的なプロジェクト（チュートリアルだけでない）
3. 問題解決能力
4. コミュニケーションスキル
5. 技術的な深さ

### 必須項目
- GitHubプロフィールリンク（整理済み）
- 公開プロジェクトへのリンク
- 各プロジェクトの技術スタック
- チームプロジェクトでの具体的な貢献内容

### プロジェクト選定
| 含めるべきもの | 避けるべきもの |
|---------------|---------------|
| 実際の問題を解決したもの | チュートリアルのコピー |
| ユーザーがいるサイドプロジェクト | 未完成のプロジェクト |
| オープンソースへの貢献 | 「近日公開」 |
| 技術的なチャレンジ | 基本的なCRUDアプリ |

### 技術的なアピール
```javascript
// 以下を示すコードスニペットを掲載：
- クリーンなアーキテクチャの決定
- パフォーマンス最適化
- 巧妙な解決策
- テスト手法

ブログ/執筆

  • 技術的な深掘り記事
  • 問題解決のストーリー
  • 学習の過程
  • コミュニケーション能力の証明

## アンチパターン

### ❌ テンプレート形式のポートフォリオ

**なぜ悪いか**: 他の人と似てしまう。記憶に残らない。創造性が伝わらない。すぐに忘れられる。

**代わりに**: 個人的なタッチを加える。カスタムデザイン要素。独自のプロジェクトプレゼンテーション。コピーに自分の声を反映。

### ❌ 見かけ倒しのポートフォリオ

**なぜ悪いか**: 派手なアニメーションだが、プロジェクトは弱い。スタイルが内容を上回る。採用担当者には見抜かれる。スキルの証明がない。

**代わりに**: プロジェクトを最優先し、スタイルは二の次に。実際の仕事と実際の影響。量より質。広さより深さ。

### ❌ 履歴書的なWebサイト

**なぜ悪いか**: 退屈で記憶に残らない。メディアの特性を活かせていない。個性がない。ストーリーではなく羅列。

**代わりに**: 見せる、語るな。ビジュアルケーススタディ。インタラクティブな要素。全体的に個性を表現。

## ⚠️ 注意点

| 問題 | 深刻度 | 解決策 |
|------|--------|--------|
| ポートフォリオが実際の仕事より複雑 | 中 | ## 適切なサイズのポートフォリオ |
| デスクトップでは見栄えが良いが、モバイルで崩れる | 高 | ## モバイルファーストのポートフォリオ |
| 訪問者が次に何をすべきかわからない | 中 | ## ポートフォリオのCTA |
| 古い仕事や無関係な仕事を掲載 | 中 | ## ポートフォリオの鮮度維持 |

## 関連スキル

以下のスキルと併用すると効果的: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`

## 使用タイミング

このスキルは、概要で説明されているワークフローやアクションを実行するために適用されます。

---

<!-- AGI-INTEGRATION-START -->

## AGIフレームワーク統合

> **[@techwavedev/agi-agent-kit](https://www.npmjs.com/package/@techwavedev/agi-agent-kit) 向けに適合**
> 元のソース: [antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills)

### メモリファーストプロトコル

視覚的な一貫性を維持するために、過去のデザイン決定（カラーパレット、タイポグラフィ、スペーシングスケール）を取得します。生成されたデザイントークンをキャッシュします。

```bash
# 開始前にフロントエンド/デザインのコンテキストを確認
python3 execution/memory_manager.py auto --query "Interactive Portfolio向けのデザインシステム決定事項とコンポーネントパターン"

結果の保存

作業完了後、フロントエンド/デザインの決定事項を将来のセッションのために保存します：

python3 execution/memory_manager.py store \
  --content "デザインシステム: 8pxグリッド、Interフォントファミリー、ダークモード対応HSLカラートークンを採用" \
  --type decision --project <project> \
  --tags interactive-portfolio frontend

マルチエージェント連携

デザイン決定事項をバックエンドエージェント（API契約変更）やQAエージェント（ビジュアルリグレッションベースライン）と共有します。

python3 execution/cross_agent_context.py store \
  --agent "<your-agent>" \
  --action "UIコンポーネントを実装 — アクセシビリティ準拠（WCAG 2.1 AA）を含む新しいデザインシステム" \
  --project <project>

デザインメモリの永続化

デザインシステムトークンとコンポーネントの決定事項をQdrantに保存することで、どのエージェント（Claude、Gemini、Cursor）でも一貫したスタイルを取得・適用できます。

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community