# web-dev

**Repository Path**: java-home/web-dev

## Basic Information

- **Project Name**: web-dev
- **Description**: web开发技能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-11-09
- **Last Updated**: 2026-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# frontend-dev-kit — 前端界面开发规范包

> 可整体复用的前端界面开发规范包：不绑定技术栈，核心资产是视觉 / 交互 / 文案的硬性规范与 7 个场景的开发流程。
> 全部规范性内容收在 `skills/frontend-dev/`（入口技能）；AI 的项目级常驻契约见 [AGENTS.md](AGENTS.md)；本文件面向人，只讲**这个包是什么、怎么装、怎么维护**。

## 目录结构

```
web-dev/
├── README.md                  ← 本文件
├── AGENTS.md                  ← AI 常驻契约（做界面工作的固定约定）
├── .claude-plugin/plugin.json ← 插件 manifest（Claude Code 可识别）
├── skills/                    ← 建议整体安装的 4 个技能
│   ├── frontend-dev/          ← 入口技能：硬规范 + 场景路由 + playbooks
│   ├── impeccable/            ← 唯一执行者（写/改代码；目录名不可改）
│   ├── web-design-guidelines/ ← 唯一只读审查（规则已本地化，离线可用）
│   └── ux-writing/            ← 文案专项
├── agents/                    ← 3 个角色 subagent 定义（Claude Code 的 .claude/agents/ 格式）
│   ├── frontend-developer.md  ← 唯一写代码的角色（预载 frontend-dev + impeccable）
│   ├── ui-designer.md         ← 只出设计方向与交接 spec，不写代码
│   └── ui-reviewer.md         ← 只读评审（预载 web-design-guidelines）
└── optional-skills/           ← 21 个条件触发技能，已加 disable-model-invocation
```

## 三种复用方式

1. **作为 Plugin 安装（Claude Code）**：整个目录即插件。开发期直接 `claude --plugin-dir <本目录>` 加载——技能和 `agents/` 里的三个角色会一起挂载（角色名带命名空间）；要分发可放进任意 git 仓库并添加 `.claude-plugin/marketplace.json`，之后 `/plugin marketplace add <repo>` 一条命令安装。
2. **作为普通技能 + 角色安装（Cursor / Codex / 其他）**：把 `skills/` 下的 4 个文件夹拷进对应工具的技能目录（如 `.claude/skills/`、`.cursor/skills/`、`.agents/skills/`）；`agents/*.md` 拷进 `.claude/agents/`（Claude Code）。没有等价 agent 目录的工具，把它们当「角色提示词模板」直接粘贴使用。`impeccable` 目录名保持原样（内部有硬编码路径）。
3. **作为项目目录直接开发**：在本目录下做项目时，先按方式 2 装好技能与角色；`AGENTS.md` 作为常驻契约自动生效，其中「两种工作路径」写明什么时候主对话自己干、什么时候委派角色。

## 可选技能怎么用

`optional-skills/` 里的技能带 `disable-model-invocation: true`：**不进自动调用池、不自动注入上下文**。想让 agent 在命中条件时**自己加载**，就把它们和核心四件套一起装进技能目录（文件夹名 = 技能名）——`frontend-dev` 的「条件触发表」会点名，agent 按名字读取对应 `SKILL.md` 按需执行，读完即弃。若只想手动用，可不装，需要时拷进去再用 `/技能名` 显式调用。用不到的可不装 / 删掉，不影响核心四件套。

## 维护备注

- 核心技能来源：`pbakaus/impeccable`、`vercel-labs/agent-skills` + `web-interface-guidelines`、`content-designer/ux-writing-skill`；可选库存来自 `anthropics/skills`、`emilkowalski/skills`、`nextlevelbuilder/ui-ux-pro-max-skill` 等，遵守各自协议。
- `web-design-guidelines` 的规则是**本地快照，离线可用，禁止运行时联网拉取**；升级技能时同步更新快照。
- 规范条目要改时，改 `skills/frontend-dev/`（SKILL.md 及 references/），不要抄进 AGENTS.md 或本文件。
- 升级第三方技能前先审阅其 `SKILL.md`；确认没有覆盖 `impeccable` 已自带的能力再启用新的可选技能。