# Product Dev Skills

> Use when routing tasks for web UI, design systems, product management, backend APIs, algorithms, or testing. Trigger on 网页、前端、UI设计、产品、PRD、 用户故事、算法、LeetCode、测试、Playwright、Jest、React、Next.js、API设计。

- Skill: `zerotokenclaw/product-dev-skills` (Agent Skill)
- Install (CLI): `npx skillmds@latest add zerotokenclaw/product-dev-skills`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zerotokenclaw/product-dev-skills/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: ZeroTokenClaw (https://skillmd.com/u/zerotokenclaw)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/zerotokenclaw/product-dev-skills

---


# 网页 / 设计 / 产品 / 开发 / 算法 / 测试 路由

先读本 skill，再打开目标 `SKILL.md`。总表见 `practical-skills-index`。

## 网页 / 前端

| 任务 | 优先 | 备选 |
| --- | --- | --- |
| 前端视觉与布局落地 | `frontend-design` | `frontend-ui-engineering`、`ui-ux-pro-max` |
| Web 界面规范审查 | `web-design-guidelines` | `seo-auditing` |
| React 性能与最佳实践 | `vercel-react-best-practices` | `react-nextjs-development` |
| Next.js + React + TS | `nextjs-react-typescript` | `react-nextjs-development` |
| 前端安全 | `frontend-security` | `security-and-hardening` |
| 无障碍 | `accessibility-a11y` | `accessibility-auditing` |
| 移动端 UI | `mobile-app-ui-design` | `react-native-patterns` |

## 设计

| 任务 | 优先 | 备选 |
| --- | --- | --- |
| 通用 UI/UX 设计 | `design`、`ui-design` | `frontend-design` |
| 设计系统 | `design-system` | `using-ui-stack` |
| Canvas / 视觉稿 | `canvas-design` | `generating-images` |
| UX 研究 | `ux-research` | `discovery-process` |

## 产品

| 任务 | 优先 | 备选 |
| --- | --- | --- |
| 写 PRD | `prd-development` | `spec-driven-development` |
| 用户故事 | `user-story` | `jobs-to-be-done` |
| 路线图 | `roadmap-planning` | `planning-and-task-breakdown` |
| 优先级 | `prioritization-advisor` | — |
| 发现 / 调研 | `discovery-process` | `ux-research` |
| 旅程图 | `customer-journey-map` | — |

## 后端 / API 开发

| 任务 | 优先 | 备选 |
| --- | --- | --- |
| API 架构 | `api-architect` | `backend-api-design`、`api-and-interface-design` |
| FastAPI 模板 | `fastapi-backend-template` | — |
| MCP 工具开发 | `mcp-builder` | — |
| OpenAPI 文档 | `adding-api-docs` | — |

## 算法

| 任务 | 优先 | 备选 |
| --- | --- | --- |
| 算法设计 / 复杂度 | `algorithm-design` | — |
| 刷题辅导 | `leetcode-teacher` | `algo-sensei` |

## 测试

| 任务 | 优先 | 备选 |
| --- | --- | --- |
| Playwright E2E | `playwright-testing`、`playwright-e2e-testing` | `adding-e2e-tests`、`browser-testing-with-devtools` |
| WebApp 测试（官方） | `webapp-testing` | `verifying-in-browser` |
| Jest / React 单测 | `jest-react-testing` | `writing-tests`、`test-driven-development` |
| TDD 流程 | `test-driven-development` | `python-tdd-with-uv` |

## 快捷路由

1. 「做个网页 / 好看的 UI」→ `frontend-design` + `web-design-guidelines`
2. 「React/Next 性能」→ `vercel-react-best-practices`
3. 「写 PRD / 用户故事」→ `prd-development` / `user-story`
4. 「设计 API」→ `api-architect` 或 `backend-api-design`
5. 「算法题 / 刷题」→ `leetcode-teacher` 或 `algorithm-design`
6. 「写 E2E / Playwright」→ `playwright-testing` 或 `webapp-testing`
7. 「设计系统 / 组件规范」→ `design-system`

## 禁止

- 未读目标 skill 直接按通用习惯写大段 UI/测试代码
- 产品文档与实现混写：先 PRD/故事，再进开发 skill