mcpField
V
vue-frontend-expert

vue-frontend-expert

github.com/caomeiyouren开发12107 次安装今天更新
代码仓库

关于 vue-frontend-expert

面向 MomeiBlog 开发者的 Vue 前端技能，涵盖组件实践、样式、本地化和项目 UI 规范。它指导实现响应式、适配暗色模式的界面，并为页面添加 SEO 元数据。

主要功能

  1. 01遵循 Vue Composition API 模式
  2. 02使用 BEM 编写解耦 SCSS
  3. 03通过 i18n 管理界面文本
  4. 04使用 PrimeVue 组件
  5. 05支持暗色模式与响应式布局
  6. 06添加页面级 SEO 元数据

适用场景

  1. 01创建本地化的文章卡片组件
  2. 02避免使用内联样式编写 Vue 组件
  3. 03构建带 SEO 元数据的响应式页面

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/vue-frontend-expert确认已加载。

README 原文English

来自项目 README

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。

评论

支持 Markdown