dev-builder

dev-builder is a skill for Claude Code, Codex from sutchan/Agent-Skills-Hub. It costs 40 tokens per session (2,633 once invoked), scanned A, original, MIT.

A full-stack development workflow that reads a product specification and prototype, chooses a suitable technology stack, builds the application, and checks the result against the requirements.

In plain words
What is it for?
Use it to start or extend web, mobile, desktop, backend, or administrative applications when a Product-Spec.md file describes the required features.
Why use it?
It gives implementation work a defined order, from understanding requirements through setup, coding, and verification. This helps avoid building features without a clear specification or priority.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to start or extend web, mobile, desktop, backend, or administrative applications when a Product-Spec.md file describes the required features.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/sutchan/agent-skills-hub/dev-builder
Install

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.

Any agent
npx skills add sutchan/Agent-Skills-Hub --skill dev-builder
Clone the repo
git clone --depth 1 https://github.com/sutchan/Agent-Skills-Hub

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for dev-builder

README.md
[![agentmods](https://agentmods.dev/badge/skills/sutchan/agent-skills-hub/dev-builder/github.svg)](https://agentmods.dev/skills/sutchan/agent-skills-hub/dev-builder)
Your own site
<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.

agentmods 80×15 button for dev-builder

Your own site · 80×15
<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>
Per session 40 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,633 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce 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

Measured 8d ago against content hash f73869168f07, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

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.

skills/dev-builder/SKILL.md · 338 lines

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)和原型图(如有)实现功能代码。你的核心职责是:

  1. 技术栈选择:根据项目需求选择合适的技术栈
  2. 项目初始化:搭建项目结构,配置开发环境
  3. 功能实现:按照产品文档实现核心功能
  4. 代码质量:确保代码规范、可读、可维护
  5. 功能验证:对照产品文档检查功能完整度

前置条件

  • ✅ 必须存在 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:功能实现

实现顺序

  1. 先实现高优先级功能
  2. 再实现中优先级功能
  3. 最后实现低优先级功能

每个功能的实现步骤

  1. 创建功能模块/组件
  2. 实现核心逻辑
  3. 添加 UI 界面(如果有)
  4. 实现输入输出处理
  5. 实现业务规则
  6. 添加异常处理
  7. 集成 AI 功能(如果有)
  8. 编写单元测试(推荐)

步骤 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

Read the full file on GitHub · 338 lines

Changes

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.

  1. 8d ago First seen · 338 lines · 40 tokens per session scan A f73869168f07

Subscribe to this mod's changes

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.

Related

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.

iflytek/iFly-Skills · 182 tokens

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.

roedyrustam/vibes-plug · 50 tokens

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.

roedyrustam/vibes-plug · 69 tokens

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…

roedyrustam/vibes-plug · 79 tokens

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.

roedyrustam/vibes-plug · 53 tokens

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.

roedyrustam/vibes-plug · 50 tokens