AI Skill Hub 强烈推荐:个人作品集 是一款优质的MCP工具。AI 综合评分 8.0 分,在同类工具中表现稳健。如果你正在寻找可靠的MCP工具解决方案,这是一个值得深入了解的选择。
个人作品集 是一款遵循 MCP(Model Context Protocol)标准协议的 AI 工具扩展。通过 MCP 协议,它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务,实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用,都可以通过自然语言在 AI 对话中直接触发,极大提升生产效率。
个人作品集 是一款遵循 MCP(Model Context Protocol)标准协议的 AI 工具扩展。通过 MCP 协议,它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务,实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用,都可以通过自然语言在 AI 对话中直接触发,极大提升生产效率。
# 方式一:通过 Claude Code CLI 一键安装
claude skill install https://github.com/erikunha/portfolio
# 方式二:手动配置 claude_desktop_config.json
{
"mcpServers": {
"-----": {
"command": "npx",
"args": ["-y", "portfolio"]
}
}
}
# 配置文件位置
# macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
# Windows: %APPDATA%/Claude/claude_desktop_config.json
# 安装后在 Claude 对话中直接使用 # 示例: 用户: 请帮我用 个人作品集 执行以下任务... Claude: [自动调用 个人作品集 MCP 工具处理请求] # 查看可用工具列表 # 在 Claude 中输入:"列出所有可用的 MCP 工具"
// claude_desktop_config.json 配置示例
{
"mcpServers": {
"_____": {
"command": "npx",
"args": ["-y", "portfolio"],
"env": {
// "API_KEY": "your-api-key-here"
}
}
}
}
// 保存后重启 Claude Desktop 生效
Single-page Next.js 16 portfolio deployed to Vercel Edge. RSC-first composition of ~18 sections with four client islands, a streaming LLM endpoint, a durable contact form, and a CI pipeline that enforces performance, accessibility, and bundle size as hard contracts.
Live: erikunha.dev
<p> <img alt="Next.js 16" src="https://img.shields.io/badge/Next.js-16-000?logo=nextdotjs&logoColor=white" /> <img alt="React 19" src="https://img.shields.io/badge/React-19-149ECA?logo=react&logoColor=white" /> <img alt="TypeScript strict" src="https://img.shields.io/badge/TypeScript-strict-3178C6?logo=typescript&logoColor=white" /> <img alt="Vercel" src="https://img.shields.io/badge/Vercel-Edge-000?logo=vercel&logoColor=white" /> <img alt="pnpm 10" src="https://img.shields.io/badge/pnpm-10+-F69220?logo=pnpm&logoColor=white" /> <img alt="Node 22" src="https://img.shields.io/badge/Node-22+-417E38?logo=nodedotjs&logoColor=white" /> <img alt="Biome" src="https://img.shields.io/badge/Biome-lint%20%2B%20format-60A5FA?logo=biome&logoColor=white" /> <img alt="Vitest" src="https://img.shields.io/badge/Vitest-unit-6E9F18?logo=vitest&logoColor=white" /> <img alt="Playwright" src="https://img.shields.io/badge/Playwright-E2E%20%2B%20a11y-2EAD33?logo=playwright&logoColor=white" /> <img alt="Lighthouse CI" src="https://img.shields.io/badge/Lighthouse-CI%20gates-F44B21?logo=lighthouse&logoColor=white" /> <img alt="Anthropic" src="https://img.shields.io/badge/Anthropic-Haiku%204.5-D97757?logo=anthropic&logoColor=white" /> <img alt="License" src="https://img.shields.io/badge/code-MIT-blue" /> </p>
---
This is Erik Cunha's hiring artifact for Staff/Principal frontend and applied-AI roles. The codebase demonstrates the engineering it claims — a site that says "performance-first" but ships a 400 KB JS bundle is self-disqualifying. Every architectural decision is documented in ARCHITECTURE.md with trade-offs and reversibility notes.
The AI centerpiece is a streaming ask endpoint (Vercel AI Gateway + Anthropic Haiku 4.5, prompt-cached, rate-limited, budget-capped) with a correctness eval suite and a visible metrics panel — making AI quality observable to hiring reviewers. Agent-readiness surfaces include /.well-known/agent.json and a minimal MCP server.
---
git clone git@github.com:erikunha/portfolio.git
cd portfolio
pnpm install
cp .env.example .env.local # fill in API keys
pnpm dev # http://localhost:3000
pnpm test # unit tests (vitest)
pnpm test:e2e # Playwright E2E + a11y
pnpm build # production build
The static page renders without environment variables. Runtime endpoints (/api/ask, /api/contact, /api/lighthouse) error until keys are set. See .env.example for the full variable list.
---
| Doc | What it covers |
|---|---|
[ARCHITECTURE.md](./ARCHITECTURE.md) | System design, component deep-dives, trade-offs, what to revisit |
[STANDARDS.md](./STANDARDS.md) | Engineering bar — 11 domain chapters, each with an enforcement mechanism |
[DECISIONS.md](./DECISIONS.md) | Running ADR log — why decisions were made and how to reverse them |
[CLAUDE.md](./CLAUDE.md) | AI assistant instructions (auto-loaded by Claude Code each session) |
---
高质量的开源MCP工具,值得学习
该工具未明确声明开源协议,商业使用前请联系原作者确认授权范围,避免侵权风险。
AI Skill Hub 为第三方内容聚合平台,本页面信息基于公开数据整理,不对工具功能和质量作任何法律背书。
建议在沙箱或测试环境中充分验证后,再部署至生产环境,并做好必要的安全评估。
总体来看,个人作品集 是一款质量优秀的MCP工具,在同类工具中具备一定竞争力。AI Skill Hub 将持续追踪其更新动态,建议收藏备用,结合自身场景选择合适时机引入使用。
| 原始名称 | portfolio |
| 原始描述 | 开源MCP工具:Personal portfolio site built with Next.js 16 (App Router, RSC-first), React 19,。⭐12 · TypeScript |
| Topics | nextjsreactjstypescript |
| GitHub | https://github.com/erikunha/portfolio |
| 语言 | TypeScript |
收录时间:2026-05-25 · 更新时间:2026-05-26 · License:未公布 · AI Skill Hub 不对第三方内容的准确性作法律背书。
选择 Agent 类型,复制安装指令后粘贴到对应客户端