원클릭으로
frontend-design
Use when turning docs/vX.Y.Z/prd/summarized/*.md into frontend technical designs for a versioned iteration.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Use when turning docs/vX.Y.Z/prd/summarized/*.md into frontend technical designs for a versioned iteration.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when starting, resuming, or continuing a versioned frontend iteration with docs/vX.Y.Z/ inputs.
Use when turning docs/vX.Y.Z/design/*.md into TDD implementation plans for a versioned frontend iteration.
Use when implementing approved docs/vX.Y.Z/plans/*.md tasks with frontend TDD.
Use when preparing release materials after docs/vX.Y.Z/review/*.md and test-report.md pass.
Use when turning docs/vX.Y.Z/prd/origin/*.md into frontend-focused summarized PRDs for a versioned iteration.
Use when reviewing implemented frontend iteration work against docs/vX.Y.Z/ requirements, design, plans, and test report.
| name | frontend-design |
| description | Use when turning docs/vX.Y.Z/prd/summarized/*.md into frontend technical designs for a versioned iteration. |
| disable-model-invocation | true |
基于 summarized PRD,做可落地的技术方案,明确改动范围与测试策略
| 路径 | 必需 | 说明 |
|---|---|---|
docs/technical-architecture.md | 是 | 技术栈、平台、目录、约定 |
docs/vX.Y.Z/prd/summarized/*.md | 是 | 步骤 1 产出,一对一 |
docs/vX.Y.Z/ui/* | 否 | 组件拆分、交互 |
| 代码库 | 是 | 复用组件/模式 |
缺必需项则停止
docs/vX.Y.Z/design/,与 summarized/ 同名DRAFT,确认后 ACTIVEfrontend-iteration/references/orchestrated-invocation.mdfrontend-iteration/references/agent-communication-style.mddocs/technical-architecture.md:技术栈、目录、状态、路由、请求层、代码风格frontend-iteration/references/api-integration-guide.md(搜已有 API、类似页)ui-reading-guide.md;按清单/层级/重复单元拆组件docs/technical-architecture.md 与现有模式;冲突显式标frontend-iteration/references/orchestrated-invocation.md;阻塞待确认问题 → DRAFT/BLOCKED| 维度 | 内容 |
|---|---|
| 方案选型 | 备选、权衡、推荐 |
| 组件结构 | 树、职责、复用 vs 新建 |
| 数据流 | 状态归属、props/事件、全局 vs 局部 |
| 接口契约 | API、入参/返回、类型 |
| 路由 | 路径、参数、守卫 |
| 错误处理 | 加载/空/错/无权限 |
| 兼容性 | 平台、响应式、浏览器 |
| 测试策略 | 单元/集成/E2E |
| 风险与回滚 | 风险、降级/回滚 |
| 场景 | 处理 |
|---|---|
| 复用即可 | 标复用点;避免新建 |
| 过度设计 | 回最小;选型说明为何不复杂 |
| 新 API | 搜 src/api/、类似页;类型与封装;未就绪 mock+待定清单 |
| 多页 | 每页独立 design;公共部分共享或互引 |
| 影响现有功能 | 列模块 + 回归范围 |
| summarized 有待确认问题 | 标依赖确认;给默认假设 |
| summarized 更新 | design 及下游标 STALE;写原因 |
frontend-iteration/references/step-gates.md 核对frontend-iteration/references/progress-convention.md “每步最小落盘” 小节落盘 progress.md读 skill / reference 时按序尝试(命中即用):
| 资源 | 路径 1(npx skills add) | 路径 2(源码) |
|---|---|---|
本子 SKILL.md 目录 | .agents/skills/frontend-design/ | skills/frontend-design/ |
| 编排 references | .agents/skills/frontend-iteration/references/<file> | skills/frontend-iteration/references/<file> |
| 其他 references | .agents/skills/<name>/references/<file> | skills/<name>/references/<file> |
| 样例 | .agents/skills/frontend-iteration/examples/ | skills/frontend-iteration/examples/ |
frontend-requirements/references/ui-reading-guide.mdfrontend-iteration/references/api-integration-guide.mdfrontend-iteration/references/code-style-enforcement.md