@channeulparks/woorido-skills 1.0.0

package/README.md

@@ -0,0 +1,69 @@
+# woorido-skills
+
+WooriDo AI Coding Rules for Claude, Gemini, Antigravity and other AI coding assistants.
+
+## Installation
+
+```bash
+npx woorido-skills install
+```
+
+This will install:
+- `.claude/skills/woorido/SKILL.md` - Unified coding rules
+- `.agent/workflows/*.md` - Antigravity slash commands
+
+## Usage
+
+### Antigravity (Primary)
+
+```bash
+/component Button          # Create WDS React component
+/api-hook challenge        # Create React Query hook
+/form CreateChallenge      # Create react-hook-form + zod form
+/page ChallengeDetail      # Create page component
+/test Button               # Create Vitest tests
+/spring-api Challenge      # Create Spring Boot API
+/mybatis Challenge         # Create MyBatis mapper
+/django-view Search        # Create Django DRF viewset
+```
+
+### VS Code Gemini
+
+Reference the skill file in your prompt:
+```
+@.claude/skills/woorido/SKILL.md 참고해서 Button 컴포넌트 만들어줘
+```
+
+### Claude Code
+
+Skills are automatically loaded from `.claude/skills/`.
+
+## Tech Stack
+
+### Frontend
+- React 18 + Vite + TypeScript
+- WDS (WooriDo Design System) - CSS Modules + CSS Variables
+- React Query (server state) + Zustand (client state)
+- react-hook-form + zod
+- Radix UI
+
+### Backend
+- Spring Boot 3.2 + Java 21 + MyBatis + Oracle
+- Django 5.0 + DRF + Elasticsearch
+
+## Available Workflows
+
+| Command | Description |
+|---------|-------------|
+| `/component` | WDS-based React component |
+| `/api-hook` | React Query hook |
+| `/form` | Form with validation |
+| `/page` | Page component |
+| `/test` | Vitest tests |
+| `/spring-api` | Spring Boot REST API |
+| `/mybatis` | MyBatis mapper + XML |
+| `/django-view` | Django REST viewset |
+
+## License
+
+MIT

package/bin/cli.js

@@ -0,0 +1,180 @@
+#!/usr/bin/env node
+
+/**
+ * WooriDo Skills CLI
+ * 
+ * Usage:
+ *   npx woorido-skills install
+ *   npx woorido-skills install --dry-run
+ *   npx woorido-skills list
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const TEMPLATES_DIR = path.join(__dirname, '..', 'templates');
+const TARGET_DIR = process.cwd();
+
+// ANSI colors
+const colors = {
+  green: (text) => `\x1b[32m${text}\x1b[0m`,
+  yellow: (text) => `\x1b[33m${text}\x1b[0m`,
+  blue: (text) => `\x1b[34m${text}\x1b[0m`,
+  red: (text) => `\x1b[31m${text}\x1b[0m`,
+  dim: (text) => `\x1b[2m${text}\x1b[0m`,
+};
+
+/**
+ * Copy files recursively
+ */
+function copyRecursive(src, dest, dryRun = false) {
+  const files = [];
+  
+  function walk(srcPath, destPath) {
+    const entries = fs.readdirSync(srcPath, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const srcFile = path.join(srcPath, entry.name);
+      const destFile = path.join(destPath, entry.name);
+      
+      if (entry.isDirectory()) {
+        if (!dryRun && !fs.existsSync(destFile)) {
+          fs.mkdirSync(destFile, { recursive: true });
+        }
+        walk(srcFile, destFile);
+      } else {
+        files.push({
+          src: srcFile,
+          dest: destFile,
+          relativeDest: path.relative(TARGET_DIR, destFile),
+        });
+        
+        if (!dryRun) {
+          const destDir = path.dirname(destFile);
+          if (!fs.existsSync(destDir)) {
+            fs.mkdirSync(destDir, { recursive: true });
+          }
+          fs.copyFileSync(srcFile, destFile);
+        }
+      }
+    }
+  }
+  
+  walk(src, dest);
+  return files;
+}
+
+/**
+ * Install command
+ */
+function install(options = {}) {
+  const { dryRun = false } = options;
+  
+  console.log();
+  console.log(colors.blue('🚀 WooriDo Skills Installer'));
+  console.log();
+  
+  if (dryRun) {
+    console.log(colors.yellow('📋 Dry run mode - no files will be created'));
+    console.log();
+  }
+  
+  const files = copyRecursive(TEMPLATES_DIR, TARGET_DIR, dryRun);
+  
+  console.log(colors.dim('Installing files:'));
+  console.log();
+  
+  for (const file of files) {
+    console.log(`  ${colors.green('✔')} ${file.relativeDest}`);
+  }
+  
+  console.log();
+  console.log(colors.green(`✨ Done! ${files.length} files installed.`));
+  console.log();
+  console.log(colors.dim('Installed:'));
+  console.log(colors.dim('  - .claude/skills/woorido/SKILL.md (unified coding rules)'));
+  console.log(colors.dim('  - .agent/workflows/*.md (Antigravity commands)'));
+  console.log();
+  console.log(colors.blue('Usage:'));
+  console.log('  Antigravity: /component Button, /api-hook challenge, etc.');
+  console.log('  VS Code Gemini: @.claude/skills/woorido/SKILL.md');
+  console.log();
+}
+
+/**
+ * List command
+ */
+function list() {
+  console.log();
+  console.log(colors.blue('📦 WooriDo Skills'));
+  console.log();
+  
+  console.log(colors.dim('Unified SKILL.md:'));
+  console.log('  .claude/skills/woorido/SKILL.md');
+  console.log();
+  
+  console.log(colors.dim('Antigravity Workflows:'));
+  const workflows = [
+    '/component  - Create WDS React component',
+    '/api-hook   - Create React Query hook',
+    '/form       - Create react-hook-form + zod form',
+    '/page       - Create page component',
+    '/test       - Create Vitest tests',
+    '/spring-api - Create Spring Boot API',
+    '/mybatis    - Create MyBatis mapper',
+    '/django-view - Create Django DRF viewset',
+  ];
+  
+  for (const wf of workflows) {
+    console.log(`  ${wf}`);
+  }
+  console.log();
+}
+
+/**
+ * Help command
+ */
+function help() {
+  console.log();
+  console.log(colors.blue('WooriDo Skills CLI'));
+  console.log();
+  console.log('Commands:');
+  console.log('  install     Install skills to current directory');
+  console.log('  install --dry-run  Show files without installing');
+  console.log('  list        List available skills and workflows');
+  console.log('  help        Show this help message');
+  console.log();
+  console.log('Examples:');
+  console.log('  npx woorido-skills install');
+  console.log('  npx woorido-skills list');
+  console.log();
+}
+
+// Parse arguments
+const args = process.argv.slice(2);
+const command = args[0];
+const flags = args.slice(1);
+
+const options = {
+  dryRun: flags.includes('--dry-run'),
+};
+
+// Execute command
+switch (command) {
+  case 'install':
+    install(options);
+    break;
+  case 'list':
+    list();
+    break;
+  case 'help':
+  case '--help':
+  case '-h':
+    help();
+    break;
+  default:
+    if (command) {
+      console.log(colors.red(`Unknown command: ${command}`));
+    }
+    help();
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@channeulparks/woorido-skills",
+  "version": "1.0.0",
+  "description": "WooriDo AI Coding Rules for Claude, Gemini, Antigravity and other AI coding assistants",
+  "main": "bin/cli.js",
+  "bin": {
+    "woorido-skills": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "templates"
+  ],
+  "scripts": {
+    "test": "node bin/cli.js install --dry-run"
+  },
+  "keywords": [
+    "ai",
+    "coding",
+    "rules",
+    "claude",
+    "gemini",
+    "antigravity",
+    "woorido",
+    "skills",
+    "react",
+    "spring-boot",
+    "django"
+  ],
+  "author": "WooriDo Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ParkChanNul/woorido-skills"
+  }
+}

package/templates/.agent/workflows/api-hook.md

@@ -0,0 +1,134 @@
+---
+description: Create a React Query hook for API calls
+---
+
+# /api-hook [ResourceName]
+
+<!-- React Query 기반 API 훅 생성 -->
+
+## Usage
+```
+/api-hook challenge
+/api-hook user --mutations
+/api-hook ledger --infinite
+```
+
+## Steps
+
+// turbo
+1. Create `src/hooks/use[ResourceName].ts`:
+
+```tsx
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+import type { [ResourceName] } from '@/types';
+
+// Query Keys
+export const [resourceName]Keys = {
+  all: ['[resourceName]s'] as const,
+  lists: () => [...[resourceName]Keys.all, 'list'] as const,
+  list: (filters: Record<string, unknown>) => [...[resourceName]Keys.lists(), filters] as const,
+  details: () => [...[resourceName]Keys.all, 'detail'] as const,
+  detail: (id: string) => [...[resourceName]Keys.details(), id] as const,
+};
+
+// GET single
+export function use[ResourceName](id: string) {
+  return useQuery({
+    queryKey: [resourceName]Keys.detail(id),
+    queryFn: () => api.get<[ResourceName]>(`/[resourceName]s/${id}`),
+    enabled: !!id,
+  });
+}
+
+// GET list
+export function use[ResourceName]List(filters?: Record<string, unknown>) {
+  return useQuery({
+    queryKey: [resourceName]Keys.list(filters ?? {}),
+    queryFn: () => api.get<[ResourceName][]>('/[resourceName]s', { params: filters }),
+  });
+}
+```
+
+## Mutations (--mutations flag)
+
+<!-- 생성/수정/삭제 뮤테이션 추가 -->
+
+```tsx
+// CREATE
+export function useCreate[ResourceName]() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: (data: Create[ResourceName]Request) => 
+      api.post<[ResourceName]>('/[resourceName]s', data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [resourceName]Keys.lists() });
+    },
+  });
+}
+
+// UPDATE
+export function useUpdate[ResourceName]() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Update[ResourceName]Request }) =>
+      api.put<[ResourceName]>(`/[resourceName]s/${id}`, data),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: [resourceName]Keys.detail(id) });
+      queryClient.invalidateQueries({ queryKey: [resourceName]Keys.lists() });
+    },
+  });
+}
+
+// DELETE
+export function useDelete[ResourceName]() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: (id: string) => api.delete(`/[resourceName]s/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [resourceName]Keys.lists() });
+    },
+  });
+}
+```
+
+## Infinite Query (--infinite flag)
+
+<!-- 무한 스크롤 목록 조회 -->
+
+```tsx
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+export function use[ResourceName]Infinite(filters?: Record<string, unknown>) {
+  return useInfiniteQuery({
+    queryKey: [...[resourceName]Keys.lists(), 'infinite', filters],
+    queryFn: ({ pageParam = 0 }) => 
+      api.get<PaginatedResponse<[ResourceName]>>('/[resourceName]s', {
+        params: { ...filters, page: pageParam, size: 20 }
+      }),
+    getNextPageParam: (lastPage) => 
+      lastPage.hasNext ? lastPage.page + 1 : undefined,
+    initialPageParam: 0,
+  });
+}
+```
+
+## API Client Reference
+
+```tsx
+// lib/api.ts
+import axios from 'axios';
+
+export const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  headers: { 'Content-Type': 'application/json' },
+});
+
+api.interceptors.response.use(
+  (res) => res.data,
+  (error) => Promise.reject(error.response?.data ?? error)
+);
+```

package/templates/.agent/workflows/component.md

@@ -0,0 +1,117 @@
+---
+description: Create a WDS-based React component with CSS Modules
+---
+
+# /component [ComponentName]
+
+<!-- WDS 디자인 시스템 기반 React 컴포넌트 생성 -->
+
+## Usage
+```
+/component Button
+/component Modal --radix
+/component UserCard --domain
+```
+
+## Steps
+
+// turbo
+1. Create folder `src/components/[ComponentName]/`
+
+// turbo
+2. Create `[ComponentName].tsx` with this template:
+
+```tsx
+import styles from './[ComponentName].module.css';
+import clsx from 'clsx';
+
+interface [ComponentName]Props {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function [ComponentName]({ className, children }: [ComponentName]Props) {
+  return (
+    <div className={clsx(styles.root, className)}>
+      {children}
+    </div>
+  );
+}
+```
+
+// turbo
+3. Create `[ComponentName].module.css` with WDS tokens:
+
+```css
+.root {
+  /* Layout */
+  display: flex;
+  
+  /* Spacing - use WDS tokens */
+  padding: var(--space-4);
+  gap: var(--space-2);
+  
+  /* Shape */
+  border-radius: var(--radius-md);
+  
+  /* Colors */
+  background-color: var(--color-surface);
+  color: var(--color-text-primary);
+  
+  /* Shadow */
+  box-shadow: var(--shadow-sm);
+  
+  /* Motion */
+  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.root:hover {
+  box-shadow: var(--shadow-md);
+}
+```
+
+// turbo
+4. Create `index.ts` for re-export:
+
+```ts
+export { [ComponentName] } from './[ComponentName]';
+export type { [ComponentName]Props } from './[ComponentName]';
+```
+
+## Radix UI Wrapping (--radix flag)
+
+<!-- Radix UI 컴포넌트 래핑 시 적용 -->
+
+```tsx
+import * as Dialog from '@radix-ui/react-dialog';
+import styles from './Modal.module.css';
+
+export function Modal({ open, onOpenChange, children }) {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className={styles.overlay} />
+        <Dialog.Content className={styles.content}>
+          {children}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+```
+
+## Domain Component (--domain flag)
+
+<!-- 도메인 특화 컴포넌트 (BrixBadge, FinancialText 등) -->
+
+Place in `src/components/domain/` folder.
+
+## WDS Token Reference
+
+| Category | Tokens |
+|----------|--------|
+| Colors | `--color-orange-*`, `--color-grey-*` |
+| Spacing | `--space-1` ~ `--space-12` |
+| Radius | `--radius-sm/md/lg/xl/full` |
+| Shadow | `--shadow-sm/md/lg/xl` |
+| Motion | `--motion-duration-*`, `--motion-ease-*` |