frontend-expert
Frontend Expert
铁律:不要在没有确认信息结构、设计约束和文本国际化策略前直接堆界面代码。
工作流
- Step 1: 确认界面目标 ⚠️ REQUIRED
- 1.1 明确这是页面、组件、表单还是交互细节修复。
- 1.2 盘点现有设计语言、组件模式和状态来源。
- Step 2: 先做结构,再做样式 ⚠️ REQUIRED
- 2.1 先明确组件职责、props、事件和状态边界。
- 2.2 再编排布局、层级和可访问性语义。
- Step 3: 处理实现约束
- 3.1 文本默认走 i18n,不硬编码最终文案。
- 3.2 样式优先使用设计 token、语义类名和可维护结构。
- 3.3 页面级改动考虑 SEO、加载状态和空态。
- Step 4: 做视觉与交互验证
- 4.1 检查响应式、键盘可达性、禁用态和错误态。
- 4.2 只要有视觉改动,建议联动 ui-validator 做实机验证。
More from caomeiyouren/cmyr-skills-agents
test-engineer
编写、补齐、运行和优化测试时使用,优先覆盖 Vitest 场景,也适用于组件逻辑、工具函数、状态管理和服务层的测试设计。用户提到 test、unit test、integration test、coverage、mock、Vitest、补测试时都应触发。
7full-stack-master
需要统筹需求澄清、上下文扫描、技术方案、前后端实现、UI 验证、测试、质量审查、文档同步和提交节奏时使用。它负责编排多技能协作,而不是亲自替代所有专业技能。用户提到 end-to-end workflow、全流程开发、从需求到提交、PDTFC+、多技能编排时都应触发。
7quality-guardian
运行并解读 lint、类型检查、测试等质量门时使用。它不只是执行命令,还要根据变更范围选择最小充分检查、分析失败原因,并给出是否允许继续提交或发布的判断。用户提到 lint、typecheck、tests、quality gate、验证改动时都应触发。
6git-flow-manager
管理暂存策略、拆分提交、检查变更边界、维护提交顺序、生成变更记录和预判冲突时使用。适合多步交付而不只是单次 commit message 生成。用户提到 staging、split commits、git flow、changelog、release prep、冲突预警时都应触发。
6security-guardian
对鉴权、权限、输入处理、数据写入、依赖配置、密钥、日志和外部调用进行安全审计时使用。用户提到 security、auth、permission、vulnerability、secret、injection、审计登录逻辑、权限合规时都应触发。
6conventional-committer
需要生成 Conventional Commit 提交消息并执行单次提交时使用。适用于 feat、fix、docs、refactor、test、build、ci、chore 等常规提交场景。先检查质量门,再分析 diff,再生成符合 commitlint 预期的消息。
6