frontend-expert
Installation
SKILL.md
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 做实机验证。