A DSH agent preset with 80 ready-to-use frontend skills — one preset, zero setup, senior-frontend-engineer output. 面向 DeepSeek Harness 的前端工程师 Agent 预设：80 个开箱即用的前端技能，一个预设，零配置。
The preset turns a DeepSeek Harness (DSH) session into a frontend-focused engineering agent: page and component implementation, design-to-code from screenshots, mainstream stack expertise (React / Vue / Next.js), responsive and performance optimization, plus a complete review and accessibility toolchain. Every skill is loaded on demand by description, so the agent stays lean while keeping a large capability ceiling.
本预设将 DeepSeek Harness 会话变成一个专注前端的工程 Agent：页面与组件实现、设计稿/截图还原、主流技术栈（React / Vue / Next.js）、响应式与性能优化，以及完整的审查与无障碍工具链。技能按描述按需加载，Agent 既轻量又保有巨大的能力上限。
This repository is exported from a local DSH preset and privacy-sanitized: no local paths, no usernames, no credentials. 本仓库由 DSH 本地预设打包导出，已完成隐私脱敏：不含本机路径、用户名与凭据。
Contents | 目录
- Why this preset | 为什么需要它
- Skill inventory | 技能清单（80）
- Quick start | 快速开始
- Installation | 安装
- Working style | 工作方式
- Compatibility & verification | 兼容性与验证
- Project structure | 项目结构
- Design principles | 设计原则
- Update notes | 更新说明
- Attribution & license | 归属与许可
Frontend work loses quality in four recurrent places:
前端工作有四类反复出现的质量损失：
- Generic AI aesthetics | 千篇一律的 AI 外观 — templated defaults instead of a distinctive design direction. / 模板化默认值取代了有辨识度的设计方向。
- Scattered knowledge | 知识分散 — best practices live in dozens of repos and are hard to reach at the moment they matter. / 最佳实践散落在数十个仓库中，真正需要时难以触达。
- Context overload | 上下文过载 — loading every guideline at once crowds the working set and dilutes attention. / 一次性加载全部指南会挤占工作集、分散注意力。
- Unverified delivery | 未经验证的交付 — fluent output that was never checked against a baseline, spec, or accessibility bar. / 流畅输出却没有对照基线、规范或无障碍标准进行验证。
The preset answers these with a curated 80-skill capability layer: the right skill is loaded exactly when the task calls for it, and each skill ships with its own checklists and verification procedures.
本预设以精选的 80 技能能力层回应这些问题：任务需要时精确加载对应技能，且每个技能自带检查清单与验证流程。
| Category 类别 | Skills 技能 | Purpose 用途 |
|---|---|---|
| Core 自研核心 (5) | design-to-code · component-development · frontend-performance · frontend-engineering · a11y-responsive |
设计稿还原、组件开发、性能优化、工程规范、无障碍/响应式 |
| Design direction 设计方向 (2) | frontend-design · frontend-design-system |
差异化视觉方向（Anthropic 派生）、主题/组件体系（北欧极简、霓虹粗野主义等） |
| Review & intelligence 规范与审查 (5) | web-design-guidelines · frontend-code-review · accessibility-audit · vercel-react-best-practices · ui-ux-pro-max |
UI 合规审查、PR 代码审查、WCAG 审计、React 70 条规范、150+ 设计推理规则 |
| Comprehensive guide 综合指南 (1) | frontend-excellence |
框架无关全栈指南（Lighthouse 95+/100，27 份参考） |
| jezweb collection jezweb 技能集 (40) | react-patterns · shadcn-ui · tailwind-theme-builder · design-loop/review/system · landing-page · product-showcase · react-native · Cloudflare 8 项 · design-assets 5 项 · dev-tools 16 项 · stripe-payments 等 |
React 模式、shadcn/ui、Tailwind v4 主题、设计流程、全栈脚手架、UX 审查、支付集成 |
| frankxai collection frankxai 技能集 (13) | nextjs-expert/react-expert/upgrade-assistant/agent-team · webapp-testing · artifacts-builder · theme-factory · framer-expert · gsap · three · ui-ux-design-expert · web-design-expert · partner-vercel |
Next.js 四件套、Playwright 测试、动画/3D、设计专家 |
| jeffallan collection jeffallan 技能集 (11) | javascript-pro · typescript-pro · react-expert · nextjs-developer · vue-expert · angular-architect · react-native-expert · flutter-expert · playwright-expert · fullstack-guardian · secure-code-guardian |
语言/框架专家、E2E 测试、全栈与安全 |
| npm claude-skills-frontend (3) | agentation · amis-builder · skill-creator |
React 反馈工具栏、amis 低代码、技能创作 |
All skills follow the standard Agent Skills format (<name>/SKILL.md with YAML frontmatter); the DSH registry loads bodies on demand by description.
所有技能遵循标准 Agent Skills 格式（<name>/SKILL.md + YAML frontmatter）；DSH 注册表按 description 按需加载正文。
Skill-aware DSH environment | 支持 Skill 的 DSH 环境
- Install the
frontend-engineer/directory into DSH's user preset root. / 将frontend-engineer/目录安装到 DSH 用户预设根目录。 - Restart Harness. / 重启 Harness。
- Select 前端工程师 in the mode picker and start a session. / 在模式选择器中选择「前端工程师」并新建会话。
- Give the task normally; the agent routes to the matching skill by description. / 正常提交任务，Agent 按描述路由到匹配技能。
审查这个仓库的前端改动，保持现有架构，逐项验证发现
Review this repository's frontend changes, preserve the current architecture, verify every finding.
No third-party runtime dependency (Python 3 is optional, used only by ui-ux-pro-max's local search script).
运行时无第三方依赖（Python 3 为可选项，仅 ui-ux-pro-max 的本地检索脚本使用）。
Windows PowerShell
$presetRoot = "$HOME\.dsh\.agent-presets"
New-Item -ItemType Directory -Force -Path $presetRoot | Out-Null
$target = Join-Path $presetRoot "frontend-engineer"
if (Test-Path -LiteralPath $target) { throw "Target already exists: $target" }
Copy-Item -Recurse -LiteralPath .\frontend-engineer -Destination $targetmacOS / Linux
preset_root="${DSH_HOME:-$HOME/.dsh}/.agent-presets"
mkdir -p "$preset_root"
target="$preset_root/frontend-engineer"
if [ -e "$target" ]; then echo "Target already exists: $target" >&2; exit 1; fi
cp -R ./frontend-engineer "$target"After installation, the roster shows one canonical preset named frontend-engineer (display name 前端工程师). The ui-ux-pro-max skill degrades gracefully to reading its local data if Python is absent.
安装后名册显示唯一规范预设 frontend-engineer（显示名「前端工程师」）。若缺少 Python，ui-ux-pro-max 会降级为直接读取本地数据。
| Scenario 场景 | Loaded skills 加载技能 |
|---|---|
| Design-to-code from a screenshot 截图还原 | design-to-code + frontend-design / frontend-design-system |
| Building React/Next.js components 组件开发 | component-development + react-patterns / react-expert + vercel-react-best-practices |
| Performance audit 性能审计 | frontend-performance + frontend-excellence + vercel-react-best-practices |
| PR / code review PR 审查 | frontend-code-review + ux-audit |
| Accessibility audit 无障碍审计 | accessibility-audit + a11y-responsive + web-design-guidelines |
| Tailwind v4 / shadcn/ui setup 主题搭建 | tailwind-theme-builder + shadcn-ui |
| Full-stack scaffold 全栈脚手架 | vite-flare-starter / hono-api-scaffolder / tanstack-start + Cloudflare 系列 |
| E2E testing E2E 测试 | playwright-expert + webapp-testing |
Brevity may shorten the answer, but it does not lower the verification floor: the agent confirms stack conventions first, reads before writing, and delivers with a stated verification method.
简短输出可以缩短回答，但不能降低验证底线：Agent 先确认技术栈约定、先读后改，并在交付时说明验证方式。
- Load-tested | 加载测试：82/82 skills (80 preset + 2 global) load successfully through the runtime registry — static checks (frontmatter, kebab-case names, reference integrity) and per-skill body loading all pass. / 82/82 技能（80 预设 + 2 全局）经运行时注册表逐一加载成功——静态校验（frontmatter、命名、引用完整性）与正文加载全部通过。
- DSH version | 版本：built and verified on DeepSeek Harness
0.1.0-rc.7; derived from the officialstandardpreset. / 在 DeepSeek Harness0.1.0-rc.7上构建并验证；派生自官方standard预设。 - Optional runtime | 可选运行时：
ui-ux-pro-maxbenefits from Python 3 (stdlib only). /ui-ux-pro-max需要 Python 3（仅标准库）时效果最佳。 - Known upstream gaps | 已知上游缺口：
design-system与ux-extract各引用一个上游仓库未随包提供的参考文件，技能可优雅降级。 / 两个技能引用了上游未随包提供的参考文件，可降级运行。
dsh-frontend-engineer-agent/
├── README.md # bilingual user guide (this file)
├── NOTICE.md # third-party skill sources & licenses
└── frontend-engineer/
├── agent.cordis.yml # composition: persona + tool rows (derived from standard)
├── preset.yml # display metadata (name: 前端工程师)
└── skills/ # 80 skill bundles (<name>/SKILL.md + references)
agent.cordis.yml is the only registered entry. Skills are loaded on demand, preserving context efficiency and preventing the capability layer from becoming its own source of overload.
agent.cordis.yml 是唯一注册入口。技能按需加载，以维持上下文效率，避免能力层自身成为新的过载来源。
Dense capabilities, lean context, clean output. / 能力稠密，上下文精简，交付清晰。
- Confirm the stack and existing conventions before touching anything; never introduce dependencies on a whim. / 动手前先确认技术栈与既有约定，不擅自引入依赖。
- Read before writing; keep changes minimal; deliver runnable, maintainable, boundary-handled code with a stated verification method. / 先读后改、最小变更；交付可运行、可维护、有边界处理的代码并说明验证方式。
- Ask when requirements are unclear — never act on assumption. / 需求不清楚时先提问，不基于假设执行。
- v1.0 (2026-08) — initial public release: 5 self-authored core skills + 75 curated third-party skills across 7 collections, privacy-sanitized, 82/82 load-tested. / 首个公开版本：5 个自研核心技能 + 7 个来源的 75 个精选第三方技能，已脱敏，82/82 加载测试通过。
Upstream collections are snapshots at install time; refresh by re-syncing the corresponding skill directories. / 第三方技能为安装时快照，可重新同步对应目录刷新。
Self-authored content (this README, the composition files, the 5 core skills, and adaptation notes) is released under the MIT License. Bundled third-party skills retain their upstream licenses; see NOTICE.md for the full source-and-license matrix.
自研内容（本 README、组合文件、5 个核心技能、适配说明）以 MIT 许可发布。随包第三方技能保留各自上游许可；完整来源与许可对照见 NOTICE.md。