ccgx-workflow 1.0.0 → 1.0.2

package/templates/skills/domains/development/typescript.md

@@ -1,277 +1,277 @@
----
-name: typescript
-description: TypeScript/JavaScript 开发。前后端、Node.js、React、Vue。当用户提到 TypeScript、JavaScript、Node、React、Vue、Next.js 时使用。
----
-
-# 📜 符箓秘典 · TypeScript/JavaScript
-
-
-## TypeScript 基础
-
-### 类型系统
-```typescript
-// 基础类型
-let name: string = "Alice";
-let age: number = 25;
-let active: boolean = true;
-let items: string[] = ["a", "b"];
-let tuple: [string, number] = ["hello", 10];
-
-// 接口
-interface User {
-  id: number;
-  name: string;
-  email?: string;  // 可选
-  readonly createdAt: Date;  // 只读
-}
-
-// 类型别名
-type ID = string | number;
-type Status = "pending" | "active" | "inactive";
-
-// 泛型
-function identity<T>(arg: T): T {
-  return arg;
-}
-
-interface Response<T> {
-  data: T;
-  status: number;
-}
-
-// 工具类型
-type Partial<T> = { [P in keyof T]?: T[P] };
-type Required<T> = { [P in keyof T]-?: T[P] };
-type Pick<T, K extends keyof T> = { [P in K]: T[P] };
-type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-```
-
-## Node.js 后端
-
-### Express
-```typescript
-import express, { Request, Response, NextFunction } from 'express';
-
-const app = express();
-app.use(express.json());
-
-// 中间件
-const authMiddleware = (req: Request, res: Response, next: NextFunction) => {
-  const token = req.headers.authorization;
-  if (!token) {
-    return res.status(401).json({ error: 'Unauthorized' });
-  }
-  next();
-};
-
-// 路由
-app.get('/api/users/:id', async (req: Request, res: Response) => {
-  const { id } = req.params;
-  const user = await getUserById(id);
-  res.json(user);
-});
-
-app.post('/api/users', async (req: Request, res: Response) => {
-  const user = await createUser(req.body);
-  res.status(201).json(user);
-});
-
-// 错误处理
-app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
-  console.error(err.stack);
-  res.status(500).json({ error: 'Internal Server Error' });
-});
-
-app.listen(3000);
-```
-
-### Fastify
-```typescript
-import Fastify from 'fastify';
-
-const fastify = Fastify({ logger: true });
-
-fastify.get('/users/:id', async (request, reply) => {
-  const { id } = request.params as { id: string };
-  return { id };
-});
-
-fastify.listen({ port: 3000 });
-```
-
-## React
-
-### 函数组件
-```tsx
-import React, { useState, useEffect, useCallback } from 'react';
-
-interface User {
-  id: number;
-  name: string;
-}
-
-interface Props {
-  userId: number;
-  onSelect?: (user: User) => void;
-}
-
-const UserCard: React.FC<Props> = ({ userId, onSelect }) => {
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    fetchUser(userId).then(data => {
-      setUser(data);
-      setLoading(false);
-    });
-  }, [userId]);
-
-  const handleClick = useCallback(() => {
-    if (user && onSelect) {
-      onSelect(user);
-    }
-  }, [user, onSelect]);
-
-  if (loading) return <div>Loading...</div>;
-  if (!user) return <div>User not found</div>;
-
-  return (
-    <div onClick={handleClick}>
-      <h2>{user.name}</h2>
-    </div>
-  );
-};
-
-export default UserCard;
-```
-
-### Hooks
-```tsx
-// 自定义 Hook
-function useFetch<T>(url: string) {
-  const [data, setData] = useState<T | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    fetch(url)
-      .then(res => res.json())
-      .then(setData)
-      .catch(setError)
-      .finally(() => setLoading(false));
-  }, [url]);
-
-  return { data, loading, error };
-}
-
-// 使用
-const { data, loading } = useFetch<User[]>('/api/users');
-```
-
-## Vue 3
-
-### Composition API
-```vue
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-
-interface User {
-  id: number;
-  name: string;
-}
-
-const props = defineProps<{
-  userId: number;
-}>();
-
-const emit = defineEmits<{
-  (e: 'select', user: User): void;
-}>();
-
-const user = ref<User | null>(null);
-const loading = ref(true);
-
-const displayName = computed(() => user.value?.name ?? 'Unknown');
-
-onMounted(async () => {
-  user.value = await fetchUser(props.userId);
-  loading.value = false;
-});
-
-const handleClick = () => {
-  if (user.value) {
-    emit('select', user.value);
-  }
-};
-</script>
-
-<template>
-  <div v-if="loading">Loading...</div>
-  <div v-else-if="user" @click="handleClick">
-    <h2>{{ displayName }}</h2>
-  </div>
-</template>
-```
-
-## 测试
-
-### Jest/Vitest
-```typescript
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import UserCard from './UserCard';
-
-describe('UserCard', () => {
-  it('should render user name', async () => {
-    render(<UserCard userId={1} />);
-    expect(await screen.findByText('Alice')).toBeInTheDocument();
-  });
-
-  it('should call onSelect when clicked', async () => {
-    const onSelect = vi.fn();
-    render(<UserCard userId={1} onSelect={onSelect} />);
-
-    const card = await screen.findByRole('button');
-    fireEvent.click(card);
-
-    expect(onSelect).toHaveBeenCalledWith({ id: 1, name: 'Alice' });
-  });
-});
-
-// Mock
-vi.mock('./api', () => ({
-  fetchUser: vi.fn().mockResolvedValue({ id: 1, name: 'Alice' })
-}));
-```
-
-## 项目结构
-
-```
-myproject/
-├── package.json
-├── tsconfig.json
-├── src/
-│   ├── index.ts
-│   ├── components/
-│   ├── hooks/
-│   ├── services/
-│   ├── types/
-│   └── utils/
-├── tests/
-└── public/
-```
-
-## 常用库
-
-| 库 | 用途 |
-|---|------|
-| Express/Fastify | Node.js 框架 |
-| React/Vue | 前端框架 |
-| Next.js/Nuxt | 全栈框架 |
-| Prisma | ORM |
-| Zod | 数据验证 |
-| Vitest/Jest | 测试 |
-| ESLint/Prettier | 代码规范 |
-
----
-
+---
+name: typescript
+description: TypeScript/JavaScript 开发。前后端、Node.js、React、Vue。当用户提到 TypeScript、JavaScript、Node、React、Vue、Next.js 时使用。
+---
+
+# 📜 符箓秘典 · TypeScript/JavaScript
+
+
+## TypeScript 基础
+
+### 类型系统
+```typescript
+// 基础类型
+let name: string = "Alice";
+let age: number = 25;
+let active: boolean = true;
+let items: string[] = ["a", "b"];
+let tuple: [string, number] = ["hello", 10];
+
+// 接口
+interface User {
+  id: number;
+  name: string;
+  email?: string;  // 可选
+  readonly createdAt: Date;  // 只读
+}
+
+// 类型别名
+type ID = string | number;
+type Status = "pending" | "active" | "inactive";
+
+// 泛型
+function identity<T>(arg: T): T {
+  return arg;
+}
+
+interface Response<T> {
+  data: T;
+  status: number;
+}
+
+// 工具类型
+type Partial<T> = { [P in keyof T]?: T[P] };
+type Required<T> = { [P in keyof T]-?: T[P] };
+type Pick<T, K extends keyof T> = { [P in K]: T[P] };
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+```
+
+## Node.js 后端
+
+### Express
+```typescript
+import express, { Request, Response, NextFunction } from 'express';
+
+const app = express();
+app.use(express.json());
+
+// 中间件
+const authMiddleware = (req: Request, res: Response, next: NextFunction) => {
+  const token = req.headers.authorization;
+  if (!token) {
+    return res.status(401).json({ error: 'Unauthorized' });
+  }
+  next();
+};
+
+// 路由
+app.get('/api/users/:id', async (req: Request, res: Response) => {
+  const { id } = req.params;
+  const user = await getUserById(id);
+  res.json(user);
+});
+
+app.post('/api/users', async (req: Request, res: Response) => {
+  const user = await createUser(req.body);
+  res.status(201).json(user);
+});
+
+// 错误处理
+app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
+  console.error(err.stack);
+  res.status(500).json({ error: 'Internal Server Error' });
+});
+
+app.listen(3000);
+```
+
+### Fastify
+```typescript
+import Fastify from 'fastify';
+
+const fastify = Fastify({ logger: true });
+
+fastify.get('/users/:id', async (request, reply) => {
+  const { id } = request.params as { id: string };
+  return { id };
+});
+
+fastify.listen({ port: 3000 });
+```
+
+## React
+
+### 函数组件
+```tsx
+import React, { useState, useEffect, useCallback } from 'react';
+
+interface User {
+  id: number;
+  name: string;
+}
+
+interface Props {
+  userId: number;
+  onSelect?: (user: User) => void;
+}
+
+const UserCard: React.FC<Props> = ({ userId, onSelect }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchUser(userId).then(data => {
+      setUser(data);
+      setLoading(false);
+    });
+  }, [userId]);
+
+  const handleClick = useCallback(() => {
+    if (user && onSelect) {
+      onSelect(user);
+    }
+  }, [user, onSelect]);
+
+  if (loading) return <div>Loading...</div>;
+  if (!user) return <div>User not found</div>;
+
+  return (
+    <div onClick={handleClick}>
+      <h2>{user.name}</h2>
+    </div>
+  );
+};
+
+export default UserCard;
+```
+
+### Hooks
+```tsx
+// 自定义 Hook
+function useFetch<T>(url: string) {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    fetch(url)
+      .then(res => res.json())
+      .then(setData)
+      .catch(setError)
+      .finally(() => setLoading(false));
+  }, [url]);
+
+  return { data, loading, error };
+}
+
+// 使用
+const { data, loading } = useFetch<User[]>('/api/users');
+```
+
+## Vue 3
+
+### Composition API
+```vue
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+
+interface User {
+  id: number;
+  name: string;
+}
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'select', user: User): void;
+}>();
+
+const user = ref<User | null>(null);
+const loading = ref(true);
+
+const displayName = computed(() => user.value?.name ?? 'Unknown');
+
+onMounted(async () => {
+  user.value = await fetchUser(props.userId);
+  loading.value = false;
+});
+
+const handleClick = () => {
+  if (user.value) {
+    emit('select', user.value);
+  }
+};
+</script>
+
+<template>
+  <div v-if="loading">Loading...</div>
+  <div v-else-if="user" @click="handleClick">
+    <h2>{{ displayName }}</h2>
+  </div>
+</template>
+```
+
+## 测试
+
+### Jest/Vitest
+```typescript
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import UserCard from './UserCard';
+
+describe('UserCard', () => {
+  it('should render user name', async () => {
+    render(<UserCard userId={1} />);
+    expect(await screen.findByText('Alice')).toBeInTheDocument();
+  });
+
+  it('should call onSelect when clicked', async () => {
+    const onSelect = vi.fn();
+    render(<UserCard userId={1} onSelect={onSelect} />);
+
+    const card = await screen.findByRole('button');
+    fireEvent.click(card);
+
+    expect(onSelect).toHaveBeenCalledWith({ id: 1, name: 'Alice' });
+  });
+});
+
+// Mock
+vi.mock('./api', () => ({
+  fetchUser: vi.fn().mockResolvedValue({ id: 1, name: 'Alice' })
+}));
+```
+
+## 项目结构
+
+```
+myproject/
+├── package.json
+├── tsconfig.json
+├── src/
+│   ├── index.ts
+│   ├── components/
+│   ├── hooks/
+│   ├── services/
+│   ├── types/
+│   └── utils/
+├── tests/
+└── public/
+```
+
+## 常用库
+
+| 库 | 用途 |
+|---|------|
+| Express/Fastify | Node.js 框架 |
+| React/Vue | 前端框架 |
+| Next.js/Nuxt | 全栈框架 |
+| Prisma | ORM |
+| Zod | 数据验证 |
+| Vitest/Jest | 测试 |
+| ESLint/Prettier | 代码规范 |
+
+---
+

package/templates/skills/domains/devops/SKILL.md

@@ -1,40 +1,40 @@
----
-name: devops
-description: DevOps 能力索引（Git/CI/CD、测试、DevSecOps、数据库、可观测性）。
-license: MIT
-user-invocable: false
-disable-model-invocation: false
-context: fork
----
-
-# 🔧 炼器秘典 · DevOps 能力中枢
-
-
-## 能力矩阵
-
-| Skill | 定位 | 核心能力 |
-|-------|------|----------|
-| [git-workflow](git-workflow.md) | 版本控制 | Git、分支策略、PR |
-| [testing](testing.md) | 软件测试 | 单元测试、集成测试、TDD、测试策略、E2E测试 |
-| [devsecops](devsecops.md) | 安全开发 | CI/CD安全、供应链安全 |
-| [database](database.md) | 数据库 | SQL、NoSQL、优化 |
-| [performance](performance.md) | 性能优化 | Profiling、火焰图、基准测试、负载测试、性能测试 |
-| [observability](observability.md) | 可观测性 | 日志、指标、追踪、SLO |
-| [cost-optimization](cost-optimization.md) | 成本优化 | FinOps、右尺寸、Spot、伸缩 |
-
-## DevOps 原则
-
-```yaml
-文化:
-  - 协作与共享
-  - 持续改进
-  - 自动化一切
-  - 快速反馈
-
-实践:
-  - 持续集成 (CI)
-  - 持续交付 (CD)
-  - 基础设施即代码
-  - 监控与可观测性
-```
-
+---
+name: devops
+description: DevOps 能力索引（Git/CI/CD、测试、DevSecOps、数据库、可观测性）。
+license: MIT
+user-invocable: false
+disable-model-invocation: false
+context: fork
+---
+
+# 🔧 炼器秘典 · DevOps 能力中枢
+
+
+## 能力矩阵
+
+| Skill | 定位 | 核心能力 |
+|-------|------|----------|
+| [git-workflow](git-workflow.md) | 版本控制 | Git、分支策略、PR |
+| [testing](testing.md) | 软件测试 | 单元测试、集成测试、TDD、测试策略、E2E测试 |
+| [devsecops](devsecops.md) | 安全开发 | CI/CD安全、供应链安全 |
+| [database](database.md) | 数据库 | SQL、NoSQL、优化 |
+| [performance](performance.md) | 性能优化 | Profiling、火焰图、基准测试、负载测试、性能测试 |
+| [observability](observability.md) | 可观测性 | 日志、指标、追踪、SLO |
+| [cost-optimization](cost-optimization.md) | 成本优化 | FinOps、右尺寸、Spot、伸缩 |
+
+## DevOps 原则
+
+```yaml
+文化:
+  - 协作与共享
+  - 持续改进
+  - 自动化一切
+  - 快速反馈
+
+实践:
+  - 持续集成 (CI)
+  - 持续交付 (CD)
+  - 基础设施即代码
+  - 监控与可观测性
+```
+