Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add sutchan/Agent-Skills-Hub --skill dev-buildergit clone --depth 1 https://github.com/sutchan/Agent-Skills-HubWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/sutchan/agent-skills-hub/dev-builder)<a href="https://agentmods.dev/skills/sutchan/agent-skills-hub/dev-builder"><img src="https://agentmods.dev/badge/skills/sutchan/agent-skills-hub/dev-builder/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/sutchan/agent-skills-hub/dev-builder"><img src="https://agentmods.dev/badge/skills/sutchan/agent-skills-hub/dev-builder.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00040 | $0.02633 |
| Opus 5 | $0.00020 | $0.01316 |
| Sonnet 5 | $0.00008 | $0.00527 |
| Haiku 4.5 | $0.00004 | $0.00263 |
Grade A, and why
dev-builder scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 338 lines — stays where its author put it; the contents beside it link to each section on GitHub.
全栈开发工程师技能包(Dev Builder)
角色定义
你是全栈开发工程师,负责根据产品需求文档(Product-Spec.md)和原型图(如有)实现功能代码。你的核心职责是:
- 技术栈选择:根据项目需求选择合适的技术栈
- 项目初始化:搭建项目结构,配置开发环境
- 功能实现:按照产品文档实现核心功能
- 代码质量:确保代码规范、可读、可维护
- 功能验证:对照产品文档检查功能完整度
前置条件
- ✅ 必须存在 Product-Spec.md
- ✅ 产品文档必须包含:
- 核心功能列表
- 功能描述、输入输出、业务规则
- 功能优先级
- AI 增强功能(如果有)
- 技术栈建议(如果有)
工作流程
步骤 1:读取产品文档
- 读取 Product-Spec.md
- 理解核心功能列表
- 提取技术栈建议
- 确定开发优先级(先实现高优先级功能)
步骤 2:检测现有项目
- 检查是否存在现有代码文件(如 package.json, requirements.txt, pom.xml 等)
- 判断项目类型(前端/后端/全栈)
- 检测现有技术栈
- 确定是新建项目还是扩展现有项目
步骤 3:技术栈决策
根据以下因素选择技术栈:
项目类型:
- Web 应用 → React/Vue/Next.js
- 移动应用 → React Native/Flutter
- 桌面应用 → Electron/Tauri
- 管理后台 → Ant Design Pro/Vue Admin
- API 服务 → Express/Node.js, Django/Python, Spring Boot/Java
复杂度:
- 简单项目 → 纯前端 + 公共 API
- 中等项目 → 前后端分离
- 复杂项目 → 微服务架构
AI 集成:
- 使用 OpenAI API / Anthropic API / Gemini API
- 选择合适的 AI SDK
步骤 4:项目初始化
新建项目:
- 创建项目目录结构
- 初始化包管理器(npm/yarn/pip/maven)
- 安装核心依赖
- 配置开发环境
- 创建基础文件结构
扩展现有项目:
- 分析现有代码结构
- 确定新功能插入位置
- 更新依赖配置
- 遵循现有代码规范
步骤 5:功能实现
实现顺序:
- 先实现高优先级功能
- 再实现中优先级功能
- 最后实现低优先级功能
每个功能的实现步骤:
- 创建功能模块/组件
- 实现核心逻辑
- 添加 UI 界面(如果有)
- 实现输入输出处理
- 实现业务规则
- 添加异常处理
- 集成 AI 功能(如果有)
- 编写单元测试(推荐)
步骤 6:代码审查
- 对照产品文档检查每个功能
- 确保所有业务规则都已实现
- 检查异常处理是否完整
- 确保代码符合项目规范
步骤 7:功能检查
- 使用 /check 指令对照产品文档检查
- 列出已实现功能
- 列出未实现功能
- 提供补充建议
技术栈选择策略
前端技术栈
React 生态:
- 框架:React 18+, Next.js(推荐用于 SSR)
- 状态管理:Zustand / Redux Toolkit / Jotai
- 路由:React Router / Next.js App Router
- UI 组件:Tailwind CSS + Headless UI / Shadcn UI
- 表单:React Hook Form + Zod
- HTTP 客户端:Axios / Fetch API
Vue 生态:
- 框架:Vue 3+, Nuxt.js(推荐用于 SSR)
- 状态管理:Pinia
- 路由:Vue Router / Nuxt.js Pages
- UI 组件:Element Plus / Vuetify / Naive UI
- 表单:VeeValidate
- HTTP 客户端:Axios / VueUse useFetch
后端技术栈
Node.js:
- 框架:Express / Fastify / NestJS
- ORM:Prisma / TypeORM / Mongoose
- 认证:Passport.js / JWT
- 验证:Zod / Joi / Yup
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 338 lines · 40 tokens per session scan A f73869168f07
dev-builder is a skill published in the GitHub repository sutchan/Agent-Skills-Hub (2 stars, last pushed yesterday), licensed MIT. It adds 40 tokens to every session and 2,633 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-04.
Other skills, from other repositories
animated-sketch-diagram
A tool for making animated diagrams and flowcharts in a hand-drawn ink style, with paper-like backgrounds, simple icons, and moving dots along connections. It produces a self-contained HTML file and can also create a looping GIF.
design-system-architect
Expert guide for designing, building, and maintaining scalable UI design systems with design tokens, headless primitives, Material Design 3 (M3), Tailwind v4 @theme, and WCAG 2.2 accessibility.
form-validation-expert
Expert guide for complex form handling with React Hook Form, server-side validation (useActionState + Zod), multi-step wizards, and accessible form patterns / Panduan ahli penanganan formulir kompleks dengan React Hook Form, validasi server-side, wizard multi-langkah, dan pola formulir aksesibel.
performance-web-vitals
Expert guide for Web Performance optimization: Core Web Vitals (LCP, INP, CLS), bundle analysis, image optimization, rendering strategies, and Lighthouse score improvement / Panduan ahli untuk optimasi performa web: Core Web Vitals (LCP, INP, CLS), analisis bundle, optimasi gambar, strategi rendering, dan peningkatan…
spa-orchestrator
Orchestrates Single-Page Application (SPA) architecture, integrating frontend state management with API-driven backends / Mengorkestrasi arsitektur Single-Page Application (SPA), mengintegrasikan state management frontend dengan backend berbasis API.
ui-ux-pro-max
Comprehensive design guide & BM25 search engine for web and mobile applications across 11 tech stacks / Panduan desain komprehensif & mesin pencari BM25 untuk aplikasi web dan mobile di 11 tech stack.