ads-fe 0.0.1

package/dist/meta.js

@@ -0,0 +1,93 @@
+/**
+ * Repositories to clone as submodules and generate skills from source
+ */
+export const submodules = {
+// vue: 'https://github.com/vuejs/docs',
+// nuxt: 'https://github.com/nuxt/nuxt',
+// vite: 'https://github.com/vitejs/vite',
+// unocss: 'https://github.com/unocss/unocss',
+// pnpm: 'https://github.com/pnpm/pnpm.io',
+// pinia: 'https://github.com/vuejs/pinia',
+// vitest: 'https://github.com/vitest-dev/vitest',
+// vitepress: 'https://github.com/vuejs/vitepress',
+// nitro: 'https://github.com/nitrojs/nitro',
+};
+/**
+ * Already generated skills, sync with their `skills/` directory
+ */
+export const vendors = {
+    'vue': {
+        official: false,
+        source: 'https://github.com/antfu/skills',
+        skills: {
+            vue: 'vue',
+            nuxt: 'nuxt',
+            vite: 'vite',
+            pnpm: 'pnpm',
+            pinia: 'pinia',
+            vitest: 'vitest',
+            vitepress: 'vitepress',
+            // nitro: 'nitro',
+        },
+    },
+    'slidev': {
+        official: true,
+        source: 'https://github.com/slidevjs/slidev',
+        skills: {
+            slidev: 'slidev',
+        },
+    },
+    'vueuse': {
+        official: true,
+        source: 'https://github.com/vueuse/vueuse',
+        skills: {
+            'vueuse-functions': 'vueuse-functions',
+        },
+    },
+    'tsdown': {
+        official: true,
+        source: 'https://github.com/rolldown/tsdown',
+        skills: {
+            tsdown: 'tsdown',
+        },
+    },
+    'vuejs-ai': {
+        source: 'https://github.com/vuejs-ai/skills',
+        skills: {
+            'vue-best-practices': 'vue-best-practices',
+            'vue-router-best-practices': 'vue-router-best-practices',
+            'vue-testing-best-practices': 'vue-testing-best-practices',
+        },
+    },
+    'turborepo': {
+        official: true,
+        source: 'https://github.com/vercel/turborepo',
+        skills: {
+            turborepo: 'turborepo',
+        },
+    },
+    'web-design-guidelines': {
+        source: 'https://github.com/vercel-labs/agent-skills',
+        skills: {
+            'web-design-guidelines': 'web-design-guidelines',
+        },
+    },
+    'partme-ai': {
+        source: 'https://github.com/partme-ai/full-stack-skills',
+        skills: {
+            'vue-ui-skills/element-plus-vue3': 'element-plus-vue3',
+        },
+    },
+    'mcollina': {
+        source: 'https://github.com/mcollina/skills',
+        skills: {
+            'node': 'node',
+        },
+    },
+};
+/**
+ * Hand-written skills with AdsPower FE preferences/tastes/recommendations
+ */
+export const manual = [
+    'core',
+];

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "ads-fe",
+  "version": "0.0.1",
+  "description": "Dynamic skill discovery CLI",
+  "type": "module",
+  "bin": {
+    "ads-fe": "dist/cli.js"
+  },
+  "scripts": {
+    "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "pnpm clean && tsc -p tsconfig.json",
+    "prepack": "pnpm build",
+    "dev": "tsx src/cli.ts",
+    "skill:init": "tsx src/cli.ts skill init",
+    "skill:sync": "tsx src/cli.ts skill sync",
+    "skill:update": "tsx src/cli.ts skill update",
+    "skill:check": "tsx src/cli.ts skill check",
+    "skill:cleanup": "tsx src/cli.ts skill cleanup",
+    "test": "pnpm build && node --test tests/*.test.mjs"
+  },
+  "keywords": [
+    "skills",
+    "cli",
+    "adspower"
+  ],
+  "files": [
+    "dist/cli.js",
+    "dist/meta.js",
+    "skill.md",
+    "skills",
+    "README.md"
+  ],
+  "license": "ISC",
+  "packageManager": "pnpm@10.14.0",
+  "dependencies": {
+    "commander": "^12.1.0"
+  },
+  "devDependencies": {
+    "tsx": "^4.19.2",
+    "typescript": "^5.6.3",
+    "@types/node": "^22.10.1"
+  }
+}

package/skill.md

@@ -0,0 +1,66 @@
+---
+name: ads-fe
+description: AdsPower FE 为前端项目设计的一套开发工具和规范。适用于任何开发技术栈、AI开发工程化方法论、需求规划、技术方案规划、执行编码任务。
+hidden: true
+---
+
+
+## 从这里开始
+
+这个文件是发现入口，不是使用指南。在运行任何 `ads-fe` 命令之前，
+先从 CLI 加载实际的工作流内容：
+
+```bash
+ads-fe skill get core              # 从这里开始：工作流、常见模式、故障排查
+ads-fe skill get core --full       # 包含完整命令参考和模板
+```
+
+CLI 提供的 skill 内容始终与已安装版本匹配，因此说明不会过期。
+这个入口文件的内容在不同发布版本之间不会变化，所以它只指向
+`skills get core`。
+
+## 专用 skills
+
+当需求和编码与下面的技术栈相关时，加载下面对应的特殊 skill:
+
+```bash
+ads-fe skill get vite # vite
+ads-fe skill get vitepress # vitepress
+ads-fe skill get vitest # vitest
+ads-fe skill get vue # vue
+ads-fe skill get vue-best-practices # vue 最佳实践
+ads-fe skill get vue-router-practices # vue-router 最佳实践
+ads-fe skill get vue-testing-practices # vue testing 最佳实践
+ads-fe skill get vueuse-functions # vueuse-functions
+ads-fe skill get web-design-guidelines # web-design-guidelines
+ads-fe skill get nuxt # Nuxt
+ads-fe skill get pinia # pinia
+ads-fe skill get pnpm # pnpm
+ads-fe skill get slidev # slidev
+ads-fe skill get tsdown # tsdown
+ads-fe skill get turborepo # turborepo
+ads-fe skill get node # node
+ads-fe skill get element-plus-vue3 # element plus vue3
+```
+
+运行 `ads-fe skill list` 查看当前已安装版本中可用的全部内容。
+
+## 动态加载协议
+
+需要具体 skill 时，在运行时获取它，而不是预加载所有 skills。
+
+1. 发现可用 skills:
+   `ads-fe skill list --json`
+2. 解析 skill 文件路径:
+   `ads-fe skill path <skill-name>`
+3. 动态加载 skill 内容:
+   `ads-fe skill get <skill-name>`
+4. 完整加载 skill 内容，包含完整命令参考和模板:
+   `ads-fe skill get <skill-name> --full`
+
+## 规则
+
+- 不要预加载所有 skills。
+- 始终通过 `ads-fe skill get` 从文件系统读取最新的 `SKILL.md`。
+- 需要刷新内容时，重复执行 `get`。
+- 使用 `--full` 前先尝试用 `ads-fe skill path` 获取 skill 路径，再按需读取 skill reference/template/scripts 等内容

package/skills/core/SKILL.md

@@ -0,0 +1,66 @@
+---
+name: core
+description: 用于动态加载的核心运行时技能。
+hidden: false
+---
+
+## 编码实践
+
+### 代码组织
+
+- **单一职责原则 (Single Responsibility Principle)** - 每个源文件都应有清晰、聚焦的范围和用途，每个函数、类或模块只负责一个功能
+- **开闭原则 (Open/Closed Principle)** - 对扩展开放，对修改封闭
+- **里氏替换原则 (Liskov Substitution Principle)** - 子类型必须能够替换其父类型
+- **接口隔离原则 (Interface Segregation Principle)** - 不应该强迫客户端依赖它们不使用的接口
+- **依赖倒置原则 (Dependency Inversion Principle)** - 高层模块不应该依赖低层模块，都应该依赖抽象
+- **拆分大型文件**：当文件变得过大或处理过多关注点时，应将其拆分
+- **类型分离**：始终将类型和接口拆分到 `types.ts` 或 `types/*.ts` 中
+- **常量提取**：将常量移到专用的 `constants.ts` 文件中
+
+### 设计模式
+
+尽量使用设计模式来提高代码的可维护性和扩展性。但不应过度设计。
+
+### 运行时环境
+
+- **优先编写同构代码**：尽可能编写与运行时无关、可在 Node、浏览器和 worker 中运行的代码
+- **明确标注运行时**：当代码特定于某个环境时，在文件顶部添加注释：
+
+```ts
+// @env node
+// @env browser
+```
+
+### TypeScript
+
+- **显式返回类型**：尽可能显式声明返回类型
+- **避免复杂的内联类型**：将复杂类型提取为专用的 `type` 或 `interface` 声明
+
+## 重构/编码习惯
+
+- **开发需求时遇到历史问题不符合规范的**，在改动范围有限可控的情况下应尽量同时优化，让结构更合理，并完善注释
+- **由于历史技术债务，重构涉及大量文件改动或影响其他本次功能以外的重构，需要后续专门立项改动**，在写沿用旧逻辑写恶心代码的前面，必须写注释为什么这样干和干了什么
+- **相同的场景代码不要搞多套**，尽量复用，除非业务分叉逻辑很大差异
+- **修改旧逻辑一定要全局搜索**，大部分功能不会只改一处
+- **重构后必须在git commit 时写明影响范围**，以防重构后影响原有功能
+
+### 注释
+
+- **避免不必要的注释**：代码应当自解释
+- **解释“为什么”而不是“怎么做”**：注释应描述原因或意图，而不是描述代码做了什么
+
+### 测试（Vitest）
+
+- 测试文件：`foo.ts` -> `foo.test.ts`（同一目录）
+- 使用 `describe`/`it` API（不要使用 `test`）
+- 对复杂输出使用 `toMatchSnapshot`
+- 对特定语言的快照使用 `toMatchFileSnapshot`，并显式指定路径
+
+
+## References
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| App Development | Vue/Nuxt/UnoCSS conventions and patterns | [app-development](references/app-development.md) |
+| Monorepo | pnpm workspaces, centralized alias, Turborepo | [monorepo](references/monorepo.md) |
+| git | git commit 规范 | [git](references/git.md) |

package/skills/core/references/app-development.md

@@ -0,0 +1,45 @@
+---
+name: app-development
+description: Vue/Nuxt application conventions. Use when building web apps, choosing between Vite and Nuxt, or writing Vue components.
+---
+
+# App Development
+
+## Framework Selection
+
+| Use Case | Choice |
+|----------|--------|
+| SPA, client-only, library playgrounds | Vite + Vue |
+| SSR, SSG, SEO-critical, file-based routing, API routes | Nuxt |
+
+## Vue Conventions
+
+| Convention | Preference |
+|------------|------------|
+| Script syntax | Always `<script setup lang="ts">` |
+| State | Prefer `shallowRef()` over `ref()` |
+| Objects | Use `ref()`, avoid `reactive()` |
+| Styling | scss and css-modules |
+| Utilities | VueUse |
+
+### Props and Emits
+
+```vue
+<script setup lang="ts">
+interface Props {
+  title: string
+  count?: number
+}
+
+interface Emits {
+  (e: 'update', value: number): void
+  (e: 'close'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  count: 0,
+})
+
+const emit = defineEmits<Emits>()
+</script>
+```

package/skills/core/references/git.md

@@ -0,0 +1,66 @@
+---
+name: git
+description: "Git 提交规范，定义 commit message 的格式和类型。使用 @git 引用此规则以获取提交规范指导。"
+---
+
+# Git 提交规范
+
+## Commit Message 格式
+```
+<type>(<scope>): <subject>
+
+<body>
+
+<footer>
+```
+
+## Type 类型
+- `feat`: 新功能
+- `fix`: 修复 bug
+- `docs`: 文档更新
+- `style`: 代码格式调整（不影响功能）
+- `refactor`: 重构（不是新功能也不是修复）
+- `perf`: 性能优化
+- `test`: 测试相关
+- `chore`: 构建/工具链/依赖更新
+- `revert`: 回滚提交
+
+## Scope 示例
+- `user`: 用户模块
+- `api`: API 相关
+- `ui`: UI 组件
+- `i18n`: 国际化
+- `build`: 构建配置
+
+## Commit Message 示例
+
+### 简单提交
+```bash
+feat(user): 添加用户登录功能
+```
+
+### 详细提交（推荐）
+```bash
+feat(user): 添加用户登录功能
+
+- 实现登录表单验证
+- 集成第三方认证
+- 添加记住密码功能
+- 更新相关国际化文案
+```
+
+### 更多示例
+```bash
+# 修复 Bug
+fix(login): 修复验证码不显示的问题
+
+# 重构代码
+refactor(api): 重构用户 API 请求逻辑
+
+# 性能优化
+perf(table): 优化大数据表格渲染性能
+
+# 更新文档
+docs(readme): 更新项目安装说明
+```
+

package/skills/core/references/monorepo.md

@@ -0,0 +1,124 @@
+---
+name: monorepo
+description: Monorepo setup with pnpm workspaces, centralized aliases, and Turborepo. Use when creating or managing multi-package repositories.
+---
+
+# Monorepo Setup
+
+## pnpm Workspaces
+
+Use pnpm workspaces for monorepo management:
+
+```yaml
+# pnpm-workspace.yaml
+packages:
+  - 'packages/*'
+```
+
+## Scripts Convention
+
+Have scripts in each package, and use `-r` (recursive) flag at root,
+Enable ESLint cache for faster linting in monorepos.
+
+```json
+// root package.json
+{
+  "scripts": {
+    "build": "pnpm run -r build",
+    "test": "vitest",
+    "lint": "eslint . --cache --concurrency=auto"
+  }
+}
+```
+
+In each package's `package.json`, add the scripts.
+
+```json
+// packages/*/package.json
+{
+  "scripts": {
+    "build": "tsdown",
+    "prepack": "pnpm build"
+  }
+}
+```
+
+## ESLint Cache
+
+
+```json
+{
+  "scripts": {
+    "lint": "eslint . --cache --concurrency=auto"
+  }
+}
+```
+
+## Turborepo (Optional)
+
+For monorepos with many packages or long build times, use Turborepo for task orchestration and caching.
+
+See the dedicated Turborepo skill for detailed configuration.
+
+## Centralized Alias
+
+For better DX across Vite, Nuxt, Vitest configs, create a centralized `alias.ts` at project root:
+
+```ts
+// alias.ts
+import fs from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { join, relative } from 'pathe'
+
+const root = fileURLToPath(new URL('.', import.meta.url))
+const r = (path: string) => fileURLToPath(new URL(`./packages/${path}`, import.meta.url))
+
+export const alias = {
+  '@myorg/core': r('core/src/index.ts'),
+  '@myorg/utils': r('utils/src/index.ts'),
+  '@myorg/ui': r('ui/src/index.ts'),
+  // Add more aliases as needed
+}
+
+// Auto-update tsconfig.alias.json paths
+const raw = fs.readFileSync(join(root, 'tsconfig.alias.json'), 'utf-8').trim()
+const tsconfig = JSON.parse(raw)
+tsconfig.compilerOptions.paths = Object.fromEntries(
+  Object.entries(alias).map(([key, value]) => [key, [`./${relative(root, value)}`]]),
+)
+const newRaw = JSON.stringify(tsconfig, null, 2)
+if (newRaw !== raw)
+  fs.writeFileSync(join(root, 'tsconfig.alias.json'), `${newRaw}\n`, 'utf-8')
+```
+
+Then update the `tsconfig.json` to use the alias file:
+
+```json
+{
+  "extends": [
+    "./tsconfig.alias.json"
+  ]
+}
+```
+
+### Using Alias in Configs
+
+Reference the centralized alias in all config files:
+
+```ts
+// vite.config.ts
+import { alias } from './alias'
+
+export default defineConfig({
+  resolve: { alias },
+})
+```
+
+```ts
+// nuxt.config.ts
+import { alias } from './alias'
+
+export default defineNuxtConfig({
+  alias,
+})
+```