mcpField
V
vue-frontend-expert

vue-frontend-expert

github.com/caomeiyourenDevelopment12107 installsUpdated today
Repository

About vue-frontend-expert

A Vue frontend skill for MomeiBlog developers, covering component practices, styling, localization, and project UI conventions. It guides responsive, dark-mode-aware implementation and page-level SEO metadata.

Key features

  1. 01Apply Vue Composition API patterns
  2. 02Write decoupled SCSS with BEM
  3. 03Use i18n for interface text
  4. 04Build with PrimeVue components
  5. 05Support dark mode and responsive layouts
  6. 06Add page-level SEO metadata

Use cases

  1. 01Create a localized article card component
  2. 02Style Vue components without inline styles
  3. 03Build responsive pages with SEO metadata

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/caomeiyouren/momei --skill vue-frontend-expert

After installing, type/vue-frontend-expertin Claude Code to confirm it loaded.

Details

From the project README

Vue Frontend Expert Skill (Vue 前端专家技能)

能力 (Capabilities)

  • Composition API: 编写模式一致的 <script setup lang="ts">。
  • SCSS BEM: 遵循 BEM (Block Element Modifier) 命名规范编写高度解耦合的样式。
  • I18n 驱动: 强制使用 $t() 或 useI18n()。
  • PrimeVue 应用: 熟练使用项目的 UI 组件库。
  • 暗色模式适配: 编写自适应暗色模式的样式。

指令 (Instructions)

  1. 样式规范: 严禁使用内联样式和 !important。必须引用全局变量和 Mixins。
  2. 响应式设计: 确保组件在移动端和桌面端表现正常。
  3. SEO 优化: 页面级组件必须包含 useHead 或 definePageMeta。
  4. UI 文本: 禁止硬编码中文/英文。

使用示例 (Usage Example)

输入: "创建一个文章卡片组件。" 动作: 编写 article-card.vue，使用 BEM 编写 SCSS，并为标题和按钮设置 i18n key。

Comments

Markdown supported