القائمة
MiniHES 前端开发规范。当用户进行 Vue 3 前端开发、组件设计、 页面布局、样式调整时自动激活。 涵盖技术栈、组件设计原则、设计规范、Ant Design Vue 用法。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/ViewWay/MiniHES --skill frontend-developmentيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
MiniHES 后端开发规范。当用户进行 FastAPI 后端开发、API 设计、数据库操作、 DLMS 协议实现、数据采集任务开发时自动激活。 涵盖分层架构、编码原则、安全要求、数据库规范。
MiniHES 代码审查。当用户请求审查代码、review PR、检查变更时激活。 支持本地变更审查和指定文件审查，输出结构化审查报告。 引用 backend-checklist.md 和 frontend-checklist.md 作为审查依据。
修复代码格式和 lint 问题。当用户在提交前需要修复代码风格、 排查 lint 错误、或说 "fix"、"格式化"、"lint" 时激活。
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | frontend-development |
| description | MiniHES 前端开发规范。当用户进行 Vue 3 前端开发、组件设计、 页面布局、样式调整时自动激活。 涵盖技术栈、组件设计原则、设计规范、Ant Design Vue 用法。 |
apps/web-antd/src/
├── api/ # API 请求封装
├── views/ # 页面组件（按业务模块）
│ ├── devices/ # 设备管理
│ ├── collector/ # 数据采集
│ ├── analysis/ # 分析报表
│ └── system/ # 系统管理
├── components/ # 全局共享组件
├── stores/ # Pinia stores
├── router/ # 路由配置
├── locales/ # 国际化
└── utils/ # 工具函数
| 类型 | 规范 | 示例 |
|---|---|---|
| 页面 | PascalCase | MeterList.vue, TaskDetail.vue |
| 组件 | PascalCase + 业务前缀 | MeterStatusTag.vue |
| Composable | use + 功能 | useMeterList.ts |
| Store | use + 模块 + Store | useMeterStore.ts |
| API 文件 | 模块名小写 | meter.ts, task.ts |
<script setup lang="ts">
// 1. 导入
// 2. 类型定义
// 3. Props & Emits
// 4. Composables
// 5. 响应式数据
// 6. 计算属性
// 7. 方法
// 8. 生命周期
</script>
<template>
<!-- 模板 -->
</template>
<style scoped lang="less">
/* 样式 */
</style>
:keyv-show（频繁切换）或 v-if（条件分支）// api/meter.ts
import { requestClient } from '#/api/request';
export async function getMeterList(params: MeterListParams) {
return requestClient.get<MeterListResponse>('/api/v1/meters', { params });
}
export async function createMeter(data: CreateMeterRequest) {
return requestClient.post<MeterDetail>('/api/v1/meters', data);
}
requestClient，不直接用 axiosrequestClient 层统一处理| 场景 | 方案 |
|---|---|
| 组件内状态 | ref / reactive |
| 跨组件共享 | Pinia Store |
| 服务端数据 | API 直接请求 + 组件内缓存 |
| 全局配置 | Store |
// stores/meter.ts
import { defineStore } from 'pinia';
export const useMeterStore = defineStore('meter', () => {
const meters = ref<Meter[]>([]);
const loading = ref(false);
async function fetchMeters(params?: MeterListParams) {
loading.value = true;
try {
const res = await getMeterList(params);
meters.value = res.items;
} finally {
loading.value = false;
}
}
return { meters, loading, fetchMeters };
});
开始编码前，先明确四个维度：
核心原则: 选择一个明确的设计方向并精确执行。大胆极繁和精致极简都可行——关键是有意图性。
a-spin 或骨架屏a-emptymessage.error()message.success()Modal.confirm()*validateTrigger: 'change')构建前端功能时，按以下格式输出：
() => import(...))shallowRef / markRaw)v-memo 减少重渲染scoped）console.log 调试代码