cmp-standards 2.7.0 → 2.8.0

package/standards/skills/skill-structure.md

@@ -1,286 +1,286 @@
-# Estructura de Skills
-
-## Qué es una Skill
-
-Una **Skill** es un conjunto de instrucciones que Claude Code puede ejecutar. Se invocan con `/skill-name` y expanden a un prompt completo.
-
-## Ubicaciones
-
-```
-.claude/
-├── skills/                    # Project skills
-│   ├── commit.md
-│   ├── review-pr.md
-│   └── create-component.md
-└── settings.json              # Skill registration
-
-~/.claude/
-└── skills/                    # Global skills
-    └── my-global-skill.md
-```
-
-## Anatomía de una Skill
-
-```markdown
----
-name: create-component
-description: Create a new React component with tests
-arguments:
-  - name: componentName
-    description: Name of the component
-    required: true
-  - name: type
-    description: Component type
-    enum: [page, feature, ui]
-    default: feature
----
-
-# Create Component: {{componentName}}
-
-## Instructions
-
-1. Create the component file at `src/components/{{type}}/{{componentName}}.tsx`
-2. Create the test file at `src/components/{{type}}/{{componentName}}.test.tsx`
-3. Export from barrel file
-
-## Component Template
-
-```tsx
-export function {{componentName}}() {
-  return <div>{{componentName}}</div>
-}
-```
-
-## Test Template
-
-```tsx
-import { render, screen } from '@testing-library/react'
-import { {{componentName}} } from './{{componentName}}'
-
-describe('{{componentName}}', () => {
-  it('renders', () => {
-    render(<{{componentName}} />)
-    expect(screen.getByText('{{componentName}}')).toBeInTheDocument()
-  })
-})
-```
-```
-
-## Frontmatter
-
-```yaml
----
-name: skill-name           # Required: kebab-case
-description: Brief desc    # Required: <100 chars
-arguments:                 # Optional: arguments
-  - name: argName
-    description: What it is
-    required: true/false
-    default: value
-    enum: [opt1, opt2]
----
-```
-
-## Variables
-
-Usar `{{variable}}` para interpolación:
-
-```markdown
-# Task: {{taskName}}
-
-Working on component {{componentName}} in {{directory}}.
-```
-
-## Categorías de Skills
-
-### 1. Workflow Skills
-
-Automatizan flujos de trabajo comunes:
-
-```markdown
----
-name: commit
-description: Create a git commit with conventional format
----
-
-# Commit Changes
-
-1. Run `git status` to see changes
-2. Run `git diff` to review changes
-3. Create commit message following conventional commits
-4. Execute `git commit -m "message"`
-```
-
-### 2. Generator Skills
-
-Crean código/archivos:
-
-```markdown
----
-name: create-router
-description: Create a new TRPC router
-arguments:
-  - name: routerName
-    required: true
----
-
-# Create Router: {{routerName}}
-
-Create file at `src/server/api/routers/{{routerName}}.ts`
-```
-
-### 3. Analysis Skills
-
-Analizan código/proyecto:
-
-```markdown
----
-name: review-pr
-description: Review pull request changes
-arguments:
-  - name: prNumber
-    required: true
----
-
-# Review PR #{{prNumber}}
-
-1. Fetch PR changes
-2. Analyze for security issues
-3. Check code quality
-4. Provide feedback
-```
-
-### 4. Documentation Skills
-
-Generan documentación:
-
-```markdown
----
-name: document-api
-description: Generate API documentation
----
-
-# Document API
-
-1. Scan all TRPC routers
-2. Extract procedure signatures
-3. Generate markdown docs
-```
-
-## Registrar Skills
-
-En `.claude/settings.json`:
-
-```json
-{
-  "skills": [
-    {
-      "name": "create-component",
-      "file": ".claude/skills/create-component.md"
-    },
-    {
-      "name": "commit",
-      "file": ".claude/skills/commit.md"
-    }
-  ]
-}
-```
-
-## Best Practices
-
-### 1. Instrucciones Claras
-
-```markdown
-# BIEN
-1. First, read the existing component at `src/components/Button.tsx`
-2. Create new variant following the same pattern
-3. Add to exports in `src/components/index.ts`
-
-# MAL
-Create a component somehow and put it somewhere.
-```
-
-### 2. Contexto Necesario
-
-```markdown
-# BIEN
-## Context
-This project uses:
-- React 19 with Server Components
-- Tailwind CSS for styling
-- Shadcn UI components
-
-## Task
-Create component following these conventions.
-
-# MAL
-Create a component.
-```
-
-### 3. Ejemplos Concretos
-
-```markdown
-## Example
-
-Input: `/create-component UserProfile page`
-
-Creates:
-- `src/components/page/UserProfile.tsx`
-- `src/components/page/UserProfile.test.tsx`
-- Updates `src/components/page/index.ts`
-```
-
-### 4. Manejo de Errores
-
-```markdown
-## If errors occur
-
-1. If component already exists: ask user to confirm overwrite
-2. If directory missing: create it
-3. If imports fail: check barrel exports exist
-```
-
-## Anti-Patterns
-
-### NO: Skills demasiado genéricas
-
-```markdown
-# MAL
----
-name: do-stuff
-description: Does things
----
-
-Do whatever the user wants.
-```
-
-### NO: Sin estructura clara
-
-```markdown
-# MAL
-Create component and test and export and also maybe some types.
-```
-
-### NO: Hardcoded values
-
-```markdown
-# MAL
-Create file at `/Users/carlos/project/src/Component.tsx`
-
-# BIEN
-Create file at `src/components/{{componentName}}.tsx`
-```
-
-## Testing Skills
-
-Antes de registrar una skill:
-
-1. Probar con diferentes argumentos
-2. Verificar que maneja edge cases
-3. Confirmar que sigue los estándares del proyecto
-
-```bash
-# Test skill manually
-/create-component TestComponent feature
-# Verify output matches expectations
-```
+# Estructura de Skills
+
+## Qué es una Skill
+
+Una **Skill** es un conjunto de instrucciones que Claude Code puede ejecutar. Se invocan con `/skill-name` y expanden a un prompt completo.
+
+## Ubicaciones
+
+```
+.claude/
+├── skills/                    # Project skills
+│   ├── commit.md
+│   ├── review-pr.md
+│   └── create-component.md
+└── settings.json              # Skill registration
+
+~/.claude/
+└── skills/                    # Global skills
+    └── my-global-skill.md
+```
+
+## Anatomía de una Skill
+
+```markdown
+---
+name: create-component
+description: Create a new React component with tests
+arguments:
+  - name: componentName
+    description: Name of the component
+    required: true
+  - name: type
+    description: Component type
+    enum: [page, feature, ui]
+    default: feature
+---
+
+# Create Component: {{componentName}}
+
+## Instructions
+
+1. Create the component file at `src/components/{{type}}/{{componentName}}.tsx`
+2. Create the test file at `src/components/{{type}}/{{componentName}}.test.tsx`
+3. Export from barrel file
+
+## Component Template
+
+```tsx
+export function {{componentName}}() {
+  return <div>{{componentName}}</div>
+}
+```
+
+## Test Template
+
+```tsx
+import { render, screen } from '@testing-library/react'
+import { {{componentName}} } from './{{componentName}}'
+
+describe('{{componentName}}', () => {
+  it('renders', () => {
+    render(<{{componentName}} />)
+    expect(screen.getByText('{{componentName}}')).toBeInTheDocument()
+  })
+})
+```
+```
+
+## Frontmatter
+
+```yaml
+---
+name: skill-name           # Required: kebab-case
+description: Brief desc    # Required: <100 chars
+arguments:                 # Optional: arguments
+  - name: argName
+    description: What it is
+    required: true/false
+    default: value
+    enum: [opt1, opt2]
+---
+```
+
+## Variables
+
+Usar `{{variable}}` para interpolación:
+
+```markdown
+# Task: {{taskName}}
+
+Working on component {{componentName}} in {{directory}}.
+```
+
+## Categorías de Skills
+
+### 1. Workflow Skills
+
+Automatizan flujos de trabajo comunes:
+
+```markdown
+---
+name: commit
+description: Create a git commit with conventional format
+---
+
+# Commit Changes
+
+1. Run `git status` to see changes
+2. Run `git diff` to review changes
+3. Create commit message following conventional commits
+4. Execute `git commit -m "message"`
+```
+
+### 2. Generator Skills
+
+Crean código/archivos:
+
+```markdown
+---
+name: create-router
+description: Create a new TRPC router
+arguments:
+  - name: routerName
+    required: true
+---
+
+# Create Router: {{routerName}}
+
+Create file at `src/server/api/routers/{{routerName}}.ts`
+```
+
+### 3. Analysis Skills
+
+Analizan código/proyecto:
+
+```markdown
+---
+name: review-pr
+description: Review pull request changes
+arguments:
+  - name: prNumber
+    required: true
+---
+
+# Review PR #{{prNumber}}
+
+1. Fetch PR changes
+2. Analyze for security issues
+3. Check code quality
+4. Provide feedback
+```
+
+### 4. Documentation Skills
+
+Generan documentación:
+
+```markdown
+---
+name: document-api
+description: Generate API documentation
+---
+
+# Document API
+
+1. Scan all TRPC routers
+2. Extract procedure signatures
+3. Generate markdown docs
+```
+
+## Registrar Skills
+
+En `.claude/settings.json`:
+
+```json
+{
+  "skills": [
+    {
+      "name": "create-component",
+      "file": ".claude/skills/create-component.md"
+    },
+    {
+      "name": "commit",
+      "file": ".claude/skills/commit.md"
+    }
+  ]
+}
+```
+
+## Best Practices
+
+### 1. Instrucciones Claras
+
+```markdown
+# BIEN
+1. First, read the existing component at `src/components/Button.tsx`
+2. Create new variant following the same pattern
+3. Add to exports in `src/components/index.ts`
+
+# MAL
+Create a component somehow and put it somewhere.
+```
+
+### 2. Contexto Necesario
+
+```markdown
+# BIEN
+## Context
+This project uses:
+- React 19 with Server Components
+- Tailwind CSS for styling
+- Shadcn UI components
+
+## Task
+Create component following these conventions.
+
+# MAL
+Create a component.
+```
+
+### 3. Ejemplos Concretos
+
+```markdown
+## Example
+
+Input: `/create-component UserProfile page`
+
+Creates:
+- `src/components/page/UserProfile.tsx`
+- `src/components/page/UserProfile.test.tsx`
+- Updates `src/components/page/index.ts`
+```
+
+### 4. Manejo de Errores
+
+```markdown
+## If errors occur
+
+1. If component already exists: ask user to confirm overwrite
+2. If directory missing: create it
+3. If imports fail: check barrel exports exist
+```
+
+## Anti-Patterns
+
+### NO: Skills demasiado genéricas
+
+```markdown
+# MAL
+---
+name: do-stuff
+description: Does things
+---
+
+Do whatever the user wants.
+```
+
+### NO: Sin estructura clara
+
+```markdown
+# MAL
+Create component and test and export and also maybe some types.
+```
+
+### NO: Hardcoded values
+
+```markdown
+# MAL
+Create file at `/Users/carlos/project/src/Component.tsx`
+
+# BIEN
+Create file at `src/components/{{componentName}}.tsx`
+```
+
+## Testing Skills
+
+Antes de registrar una skill:
+
+1. Probar con diferentes argumentos
+2. Verificar que maneja edge cases
+3. Confirmar que sigue los estándares del proyecto
+
+```bash
+# Test skill manually
+/create-component TestComponent feature
+# Verify output matches expectations
+```