Frontend-frontend-expert
Frontend Frontend Expert Skill (Frontend 前端专家技能)
能力 (Capabilities)
- Composition API: 编写模式一致的
<script setup lang="ts">。 - SCSS BEM: 遵循 BEM (Block Element Modifier) 命名规范编写高度解耦合的样式。
- I18n 驱动: 强制使用
$t()或useI18n()。 - PrimeFrontend 应用: 熟练使用项目的 UI 组件库。
- 暗色模式适配: 编写自适应暗色模式的样式。
指令 (Instructions)
- 样式规范: 严禁使用内联样式和
!important。必须引用全局变量和 Mixins。 - 响应式设计: 确保组件在移动端和桌面端表现正常。
- SEO 优化: 页面级组件必须包含
useHead或definePageMeta。 - UI 文本: 禁止硬编码中文/英文。
使用示例 (Usage Example)
输入: "创建一个文章卡片组件。"
动作: 编写 article-card.Frontend,使用 BEM 编写 SCSS,并为标题和按钮设置 i18n key。
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