通过 Skills CLI 安装
使用 npx skills add 将该 skill 安装到选中的 Agent。Phase 0 命令均为按规则生成，尚未验证。
Codex
npx skills add https://github.com/diet103/claude-code-infrastructure-showcase -g -a codex -y去掉 -g 可改为项目级安装
—
该品类共 129 个 skill· Rank pending among 129 skills
Frontend Development Guidelines
面向现代前端的 React/TypeScript 规范，涵盖 Suspense、MUI v7、TanStack Query 与 TanStack Router。
安装前须知Before you install
✓未声明特殊权限需求No special access needs declared
编辑结论· Editor's verdict
该技能是 Claude Code 基础设施展示库的一部分,父级仓库还包含自动激活 Hook 与其他技能,可组合使用。
✓
适合什么场景Best for
- 使用 TanStack Query、TanStack Router 与 MUI v7 的 React/TypeScript 项目
- 希望在组件、特性、路由方面保持统一约定的前端团队
- 需要权威的 Suspense、懒加载与性能优化方案的开发者
✗
不适合什么场景Not for
- Angular、Vue、Svelte 等非 React 框架的项目
- 未使用 TanStack Query、TanStack Router 或 MUI v7 的代码库
- 需要 MUI v7 之外的其他 UI 组件库或不同路由方案的项目
vs 其他选择vs alternatives
完整对比表Full compare table →#1Anthropic Skill Creator
用评估循环创建、测试并改进技能。
差异 · diff团队认真做「要交给别人复用」的技能时，它是第一选择。整个流程围绕评估循环展开——描述工作流，写触发样例和期望输出，反复迭代直到只在该触发时触发。Anthropic 官方出品，触发描述质量、frontmatter 格式都和 Claude 实际加载的格式对得上。一次性自动化别用它，评估搭建的成本只有在技能会发给别人时才划算。
#2mcp builder
mcp builder: agent skill — from anthropics/skills.
差异 · diff把你已经在用的工具或 API 通过 MCP 暴露出来、让 Claude 或任意支持 MCP 的 agent 直接调用时，它最有用。直接处理 MCP 协议表面——tools / resources / prompts——不用手写 schema。底层工具已经有干净 API 时最强。底层工具本身还要先造的场景下不合适，先单独造完工具再用它包装。
#3mcp server builder
mcp server builder: agent skill — from alirezarezvani/claude-skills.
差异 · diffmcp-builder 不够用、需要完整 MCP server 时它最合适——多个 tool、持久化状态、自定义 resource handler、部署考虑。比 mcp-builder 表面更大、初始样板更多，但搭起来后灵活性也大很多。单工具包装别用它，那种场景 mcp-builder 大小刚好。
维度对比side-by-side compare
和同类的关键维度差异| 当前 · this skillFrontend Development Guidelines | Anthropic Skill Creator | mcp builder | mcp server builder | |
|---|---|---|---|---|
| 评分 · rating | 0.0 | 4.9 | — | — |
| 星标 · stars | 10.0k | 163k | 132k | 14k |
| 风险 · risk | 自动筛查 · automated | 中风险 · med risk | 低风险 · low risk | 低风险 · low risk |
| 最适合 · best for | 使用 TanStack Query、TanStack Router 与 MUI v7 的 React/TypeScript 项目 | 创建新技能 | mcp builder: agent skill — from anthropics/skills. | mcp server builder: agent skill — from alirezarezvani/claude-skills. |
| 不适合 · not for | Angular、Vue、Svelte 等非 React 框架的项目 | 一次性任务自动化 | 需要比当前目录条目更严格人工复核的工作流。 | 需要比当前目录条目更严格人工复核的工作流。 |
审计备注Audit notes
未独立审计 · not audited源码Source公开 GitHub · open on GitHub✓
作者Author社区贡献 · community!
网络访问Network未独立审计 · not audited!
文件写入Filesystem未独立审计 · not audited!
依赖Dependencies未独立审计 · not audited!
遥测Telemetry无 · none✓