该技能用于设计和实现 Vue 3、Nuxt、React 兼容的组件、页面、样式、交互、表单、状态绑定与 i18n 文本。当任务涉及 component、page、UI、frontend、form、responsive、SCSS、BEM、dark mode、accessibility、i18n 或设计落地时触发。
主要能力与工作流分为四步。第一步确认界面目标：明确是页面、组件、表单还是交互细节修复，并盘点现有设计语言、组件模式和状态来源。第二步先做结构再做样式：先确定组件职责、props、事件和状态边界，再编排布局、层级和可访问性语义。第三步处理实现约束：文本默认走 i18n，不硬编码最终文案；样式优先使用设计 token、语义类名和可维护结构；页面级改动考虑 SEO、加载状态和空态。第四步视觉与交互验证：检查响应式、键盘可达性、禁用态和错误态，有视觉改动时建议联动 ui-validator 做实机验证。
关注点包括组件是否单一职责、易复用、易组合；文本、图标、颜色和对比度是否适配多语言与深浅主题；表单是否覆盖 loading、error、empty、success 状态；样式命名是否稳定。项目特化提示：组件优先沿用 Composition API 和现有 UI 组件库；样式保留 BEM、设计 token、全局变量和 mixin 约束，不用 !important 补丁；页面级组件考虑 useHead 或 definePageMeta 类 SEO 元信息入口；文本默认走 useI18n 或 $t()。反模式包括模板堆复杂业务逻辑、硬编码文本尺寸颜色、只看桌面端、大面积 !important。交付前需确认结构状态视觉职责分清、i18n 与 token 已考虑、关键状态与响应式覆盖、有视觉变更时已计划或执行 ui-validator 验证。