devlab-web-engineering

A front-end engineering guide for setting up, building, packaging, deploying, and maintaining web projects. It routes TypeScript or JavaScript projects by framework, with practical profiles for Vue and React and guidance for micro-frontends, which are web applications assembled from separately managed parts.

In plain words
What is it for?
Use it to initialize a front-end project, configure its build, package or containerize it, fix delivery problems, migrate from tools such as CRA to Vite, or manage Vue, React, and micro-frontend engineering conventions.
Why use it?
It provides a consistent way to handle project setup, dependencies, builds, packages, runtime environments, and engineering rules. It also helps diagnose failed builds, incorrect output, container paths, and migrations from older build setups.

Skill for Claude CodeCodex

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.

agentmods
npx agentmods add skills/seed-forge/harness-ai-kit/devlab-web-engineering
Any agent
npx skills add seed-forge/harness-ai-kit --skill devlab-web-engineering
Clone the repo
git clone --depth 1 https://github.com/seed-forge/harness-ai-kit

Made for: Claude Code, Codex.

Per session 167 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,749 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
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 $0.00167 $0.04749
Opus 5 $0.00084 $0.02374
Sonnet 5 $0.00033 $0.00950
Haiku 4.5 $0.00017 $0.00475

Measured 3d ago against content hash 2046b21d77bc, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

devlab-web-engineering 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 3d 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/devlab-web-engineering/SKILL.md · 315 lines

How it starts

The opening of the file, as written. The whole thing — 315 lines — stays where its author put it; the contents beside it link to each section on GitHub.

devlab-web-engineering

Web / 前端工程化能力层。从工程化六域入手,覆盖项目初始化、构建、依赖、打包与交付、 运行环境与工程规范,按「语言 × 框架」路由到对应 Profile 执行,一站式交付可构建、 可打包、可部署的前端项目。

Capability Layer 定位:本技能是能力层,负责工程化原则、能力编排、Profile 与 工程质量要求;不承接完整用户需求,不重复造底层工具——优先复用社区 Skill / Reference / CLI / MCP 及现有 DevLab Capability(create-vue / create-vite / 框架官方文档等只引用不重写)。 UI/UX 品味、视觉操作、QA/测试、Contract、CI/CD 等独立领域能力不在此范围(见 Out of Scope 路由表)。

触发条件

需要输出 Web 技术、集成或安全架构图时,消费 base-diagram-opswebintegrationsecurity profile;本技能提供 Web 工程事实,不实现图布局或导出器。

  • 用户说"初始化前端项目工程""配构建配置""帮我打包前端""工程化规范"
  • 新项目需要工程化引导(识别语言×框架后路由到对应 profile)
  • 现有项目构建/打包/容器化/微前端排障(构建失败、产物异常、镜像路径等)
  • 从旧式打包(无锁文件 / CRA)迁移到现代模式(Vite / lockfile / pnpm)
  • devlab-project-bootstrap Phase 4 编排路由(前端项目工程化初始化)

输入参数

参数 必填 说明 示例
workspace 项目工作目录(默认当前目录) /workspace/my-web
framework 框架显式指定(默认自动识别) vue / react
workflow 只跑指定流程(默认全流程) bootstrap / build / packaging

语言 × 框架识别路由

路由键 = 语言 × 框架 双维。先识别语言(决定工程基线),再识别框架(决定加载哪个 Profile)。

语言维度

语言 处理
TypeScript(主线) 默认基线,所有 profile 按 TS 工程标准(tsconfig 严格模式、类型检查入 lint)
JavaScript(兼容) profile 内降级差异:JSDoc 替代类型、跳过 tsc 类型检查
其他(扩展位) references 层预留说明;WASM 等后续版本再建 profile

框架维度(识别信号)

识别信号 框架 Profile
package.jsonvue / vue-router / @vue/cli-service / nuxt vue profiles/vue.md
package.jsonreact / react-dom / next react profiles/react.md
package.json@angular/core / angular.json angular references 引用层
多种并存 / 识别不到 进 Phase 0 D0 卡片让用户确认

构建工具(Vite 主线 / Webpack 兼容 / Next.js 等)在 profile 内 toolchain 层识别,不作为路由键。

工作流

Phase 0: 决策确认(内建)  ← 关键分歧在此收敛(语言×框架/包管理器×工具链/端口/运行时/制品源/环境变量/编排)
    ↓ decisions
Phase 1: 工程化基线分析(内建)→ project_profile(框架、构建工具、依赖、容器现状)
    ↓ project_profile
Phase 2: 按路由键分发
    ├─ vue   → profiles/vue.md(实战级:六域完整工作流 + 微前端场景层)
    └─ react → profiles/react.md(模板级)
    ↓ 各 profile 执行 bootstrap / build / packaging 对应 workflow
Phase 3: 验证闭环(内建)→ verification_report(脚本验证 + 构建验证 + 启动探测)

Read the full file on GitHub · 315 lines

Files

What ships with it

36 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

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. 3d ago First seen · 315 lines · 167 tokens per session scan A 2046b21d77bc

Subscribe to this mod's changes

devlab-web-engineering is a skill published in the GitHub repository seed-forge/harness-ai-kit (21 stars, last pushed 6d ago), licensed Apache-2.0. It adds 167 tokens to every session and 4,749 once invoked, about $0.0008 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-08-30.

Related

Other skills, from other repositories

etsy-category-listing

Etsy category page scraper: given an Etsy category URL (e.g. https://www.etsy.com/c/jewelry) and optional page number, returns paginated product listings with listingId, shopId, title, url, image, salePrice, originalPrice, currency, rating, reviewCount, shopName, isAd, freeShipping, badge from category and subcategory…

browser-act/skills · 209 tokens

human-approval

Request human approval before performing a SAFETY-CRITICAL, IRREVERSIBLE, or SCOPE-EXPANDING action — submit a structured context (action, scope, risk, consequence) plus options, then STOP the current turn. The platform redispatches the agent after the human decides. NEVER use for routine deliverables (writing docs /…

Prismer-AI/PrismerCloud · 168 tokens

firebase-analytics

Use when logging analytics events, setting user properties, configuring default event parameters, building funnels, or adding screen-view tracking.

evanca/flutter-ai-rules · 28 tokens

firebase-remote-config

Use when implementing feature flags, running A/B tests, setting parameter defaults, fetching/activating config, or enabling real-time config updates.

evanca/flutter-ai-rules · 33 tokens

git-master

MUST USE whenever a task needs a commit or git-history investigation. Covers atomic commits, staging, commit-message style, rebase, squash, fixup/autosquash, blame, bisect, reflog, git log -S/-G, and questions like who wrote this or when was this added. Do not use for ordinary code edits unless the user asks for git…

code-yeongyu/oh-my-openagent · 81 tokens

prismer-evolve-record

Record the outcome of applying an evolution strategy. Use after resolving an error where prismer-evolve-analyze provided a recommendation, to feed back success or failure to the network.

Prismer-AI/PrismerCloud · 41 tokens