13 - Agent Skills: Creating Modular Capabilities for Claude

.claude/
  skills/
    document-generator.md       # Skill for document generation
    api-tester.md               # Skill for API testing
    database-migration.md       # Skill for DB migrations
    code-review-checklist.md    # Skill for code review
    performance-analyzer.md     # Skill for performance analysis
    security-audit.md           # Skill for security audit
    csv-data-analyzer.md        # Skill for CSV data analysis
    deployment-validator.md     # Skill for deployment validation
  agents/                       # Subagents (article 14)
  commands/                     # Custom slash commands
  settings.json                 # Project configuration
  settings.local.json           # Local configuration

# Skill Name

## Description
Brief description of what this skill does and when it is activated.

## Capabilities
- Capability 1: what it can do
- Capability 2: what it can do
- Capability N: what it can do

## Instructions
Detailed instructions on how to execute the task:
1. Step 1
2. Step 2
3. Step N

## Constraints
- Do not do X
- Prefer Y over Z
- Expected output format

## Examples
### Example 1: [Title]
Input: ...
Output: ...

### Example 2: [Title]
Input: ...
Output: ...

# Document Generator (DOCX)

## Description
Generates professional Microsoft Word documents from structured
content. Supports custom styles, tables, inline images,
headers/footers, and automatic table of contents.

## Capabilities
- Create .docx documents from scratch with a professional template
- Apply consistent formatting styles
- Insert tables with structured data
- Generate automatic table of contents from headings
- Insert header and footer with page numbering
- Support multilingual content

## Instructions
1. Analyze the structure of the requested content
2. Create the Node.js script using the `docx` library
3. Define document styles (heading, body, table)
4. Build the document structure section by section
5. Execute the script to generate the .docx file
6. Verify that the file was created correctly

## Dependencies
- npm: docx (for .docx generation)
- npm: @types/docx (for TypeScript)

## Constraints
- Always use consistent styles in the document
- Include page numbering in the footer
- Date format: DD/MM/YYYY for Italian documents
- Maximum recommended size: 50 pages

# TDD Workflow

## Description
Guides development by strictly following the Red-Green-Refactor cycle
of Test-Driven Development. Every feature is implemented starting
from tests that describe the expected behavior.

## Capabilities
- Write tests that define the desired behavior (Red)
- Implement the minimum code to make the tests pass (Green)
- Refactor the code while keeping all tests green (Refactor)
- Handle unit, integration, and e2e tests
- Apply test doubles (mock, stub, spy) where needed

## Instructions
### Red Phase
1. Analyze the requirement and break it down into testable behaviors
2. Write a test that describes the expected behavior
3. Run the test and verify that it FAILS
4. If the test already passes: the test is not testing anything new

### Green Phase
5. Write the MINIMUM code needed to make the test pass
6. Do not optimize, do not add extra features
7. Run all tests and verify that they ALL PASS

### Refactor Phase
8. Refactor the code by eliminating duplication
9. Improve naming and structure
10. Run all tests after each change
11. Tests must remain GREEN after refactoring

## Constraints
- NEVER write production code without a test that requires it
- One test at a time, one feature at a time
- Tests must be independent of each other
- Test naming: should_[behavior]_when_[condition]

# CSV Data Summarizer

## Description
Analyzes CSV files to produce comprehensive statistical reports with
visualizations, correlations, and anomaly identification.

## Capabilities
- Load and parse CSV files of any size
- Calculate descriptive statistics (mean, median, mode, standard deviation)
- Identify missing values, duplicates, and outliers
- Generate correlations between numeric variables
- Produce visualizations with ASCII charts or Python/matplotlib scripts
- Create structured reports in Markdown format

## Instructions
1. Read the CSV file and identify the columns
2. Classify columns: numeric, categorical, dates, text
3. For each numeric column:
   - Calculate min, max, mean, median, std dev
   - Identify outliers (IQR method)
   - Verify distribution
4. For each categorical column:
   - Count unique values and frequencies
   - Identify dominant values
5. Calculate correlation matrix for numeric columns
6. Identify temporal patterns (if dates are present)
7. Generate a report with all findings

## Output Format
```markdown
# Analysis Report: [file_name]
## Dataset Overview
- Rows: N, Columns: M
- Missing values: X%
## Statistics by Column
[table for each column]
## Significant Correlations
[matrix and insights]
## Detected Anomalies
[anomaly list with explanation]
```

# Changelog Generator

## Description
Generates professional changelogs from Git commit history.
Automatically categorizes changes following Conventional Commits.

## Capabilities
- Analyze commits between two tags/versions
- Categorize: feat, fix, docs, refactor, perf, test, chore
- Generate Keep a Changelog format
- Link related commits and issues/PRs
- Detect breaking changes
- Support semantic versioning (SemVer)

## Instructions
1. Identify the commit range (last tag -> HEAD)
2. Parse each commit message for type and scope
3. Group by category
4. Sort by importance (breaking > feat > fix > others)
5. Generate the CHANGELOG.md document
6. Suggest the new SemVer version

## Output Format
```markdown
# Changelog

## [1.2.0] - 2026-02-14

### Breaking Changes
- **auth:** Removed compatibility with v1 tokens

### Features
- **user:** Added profile edit form (#123)
- **notif:** Push notification system (#145)

### Bug Fixes
- **cart:** Fixed total calculation with discounts (#167)

### Performance
- **api:** Cache on /products endpoint (-40% latency)
```

# Diagram Generator

## Description
Generates technical diagrams in Mermaid or PlantUML format
from natural language descriptions or code analysis.

## Capabilities
- Sequence diagrams from code flows
- Class diagrams from domain models
- ER diagrams from database schemas
- State diagrams from state machines
- Flowcharts from business logic
- C4 architecture diagrams

## Instructions
1. Analyze the request or source code
2. Identify the most appropriate diagram type
3. Extract entities, relationships, and flows
4. Generate the Mermaid/PlantUML code
5. Save to a .md or .puml file
6. If possible, generate an ASCII preview

## Mermaid Format
```mermaid
sequenceDiagram
    participant U as User
    participant A as API
    participant DB as Database
    U->>A: POST /login
    A->>DB: SELECT user
    DB-->>A: User data
    A-->>U: JWT Token
```

## Constraints
- Prefer Mermaid for simplicity
- Use PlantUML for complex diagrams
- Always include a legend if the diagram has more than 5 entities
- Maximum 20 entities per diagram (split if necessary)

# Meeting Analytics

## Description
Analyzes meeting notes to extract decisions, action items,
risks, and participation metrics. Generates structured reports
and tracks follow-up actions over time.

## Capabilities
- Parse free-form meeting notes
- Extract decisions made and their rationale
- Identify action items with owner and deadline
- Detect mentioned risks and impediments
- Calculate participation metrics
- Generate follow-up emails with summaries
- Track open actions across successive meetings

## Output Format
```markdown
# Meeting Report - [Date]

## Participants
[List with role]

## Decisions
1. [Decision] - Rationale: [why]
2. ...

## Action Items
| # | Action | Owner | Deadline | Status |
|---|--------|-------|----------|--------|
| 1 | ...    | @name | DD/MM    | Open   |

## Identified Risks
- [Risk] - Impact: [high/medium/low]

## Next Meeting
- Date: [suggested]
- Agenda: [proposed topics]
```

# OWASP Security Checklist

## Description
Systematic security verification of the web application
against the OWASP Top 10 vulnerabilities. Produces an
audit report with severity, evidence, and recommendations.

## OWASP Top 10 Checklist
1. A01 - Broken Access Control
2. A02 - Cryptographic Failures
3. A03 - Injection (SQL, NoSQL, OS, LDAP)
4. A04 - Insecure Design
5. A05 - Security Misconfiguration
6. A06 - Vulnerable and Outdated Components
7. A07 - Identification and Authentication Failures
8. A08 - Software and Data Integrity Failures
9. A09 - Security Logging and Monitoring Failures
10. A10 - Server-Side Request Forgery (SSRF)

## Instructions for Each Item
1. Identify the relevant files and endpoints
2. Analyze the code for vulnerable patterns
3. Classify the severity: Critical/High/Medium/Low/Info
4. Document the evidence with code references
5. Propose the remediation with example code
6. Estimate the correction effort

## Report Format
| # | Vulnerability | Severity | File | Status |
|---|--------------|----------|------|--------|
| A01 | Access Control | ... | ... | ... |

# Angular Standalone Component Generator

## Description
Generates standalone Angular components following the project's
conventions. Creates the component.ts file, HTML template,
CSS stylesheet, and .spec.ts test file.

## Capabilities
- Generate standalone components with signals for state management
- Create templates with the project's design system
- Generate styles following the project's CSS/SCSS conventions
- Write unit tests with TestBed and ComponentFixture
- Apply OnPush change detection
- Integrate with the router if requested

## Project Conventions
- File naming: kebab-case (user-profile.component.ts)
- Selector prefix: app- (app-user-profile)
- State management: Angular Signals (not RxJS for local state)
- Change detection: OnPush
- Styles: CSS scoped to the component
- Tests: Jasmine + TestBed

## Component Template
```typescript
import { Component, signal, input, output } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-[name]',
  templateUrl: './[name].component.html',
  styleUrls: ['./[name].component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: []
})
export class [Name]Component {
  // Input signals
  // State signals
  // Output events
  // Methods
}
```

## Test Template
```typescript
describe('[Name]Component', () => {
  let component: [Name]Component;
  let fixture: ComponentFixture<[Name]Component>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [[Name]Component]
    }).compileComponents();

    fixture = TestBed.createComponent([Name]Component);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
```

## Constraints
- ALWAYS use standalone: true
- DO NOT use ngModule
- Prefer signal() over BehaviorSubject for local state
- Include at least 3 tests in the .spec.ts file
- Document every input/output with a JSDoc comment

# Test 1: Direct request
> Create a UserProfile component with name and email fields

# Verify:
# - Did it create user-profile.component.ts with standalone: true?
# - Did it use signal() for state?
# - Did it generate the .spec.ts file with at least 3 tests?

# Test 2: Request with routing
> Generate a Dashboard component that is a lazy-loaded route

# Verify:
# - Did it configure routing correctly?
# - Did it apply OnPush change detection?

# Test 3: Complex request
> Create a ProductList component with pagination, filters, and sorting

# Verify:
# - Did it manage state with signals?
# - Did it separate logic into clear methods?
# - Do the tests cover edge cases?

# Step 1: API Design
> Design the API for the push notification module
> Endpoints: GET /notifications, POST /notifications/subscribe,
> DELETE /notifications/{id}

# The api-design-first skill generates the OpenAPI specification

# Step 2: Test first
> Generate the tests for NotificationService following TDD
> Base the tests on the just-generated API specification

# The tdd-workflow skill generates the tests (Red phase)

# Step 3: Implementation
> Implement the NotificationService to make the tests pass

# The tdd-workflow skill guides the implementation (Green phase)

# Step 4: Frontend
> Create the NotificationPanel component to display notifications

# The angular-component-gen skill creates the component

# Step 5: Documentation
> Generate the documentation for the notification module

# The changelog-generator or docx-generator skill documents everything

.claude/
  skills/
    # Development skills
    dev/
      angular-component-gen.md
      spring-service-gen.md
      api-design-first.md
      tdd-workflow.md

    # Quality skills
    quality/
      code-review-checklist.md
      owasp-checklist.md
      dependency-auditor.md
      performance-analyzer.md

    # Documentation skills
    docs/
      docx-generator.md
      changelog-generator.md
      adr-writer.md

    # Analysis skills
    analysis/
      csv-data-summarizer.md
      log-analyzer.md
      root-cause-tracing.md

    # Project management skills
    pm/
      meeting-analytics.md
      sprint-planner.md
      standup-reporter.md

# Full Feature Pipeline

## Description
Complete orchestration for creating a new feature,
from API specification to deployment. Combines the skills: api-design-first,
tdd-workflow, angular-component-gen, and changelog-generator.

## Pipeline
### Phase 1: Design (api-design-first)
- Input: Feature requirements in natural language
- Output: Complete OpenAPI specification
- Gate: Approval of the specification by the user

### Phase 2: Backend (tdd-workflow)
- Input: OpenAPI specification from Phase 1
- Output: Service + Controller + Tests with 80%+ coverage
- Gate: All tests pass

### Phase 3: Frontend (angular-component-gen)
- Input: API endpoints from Phase 1 + data models
- Output: Standalone Angular components with tests
- Gate: Build without errors + tests pass

### Phase 4: Documentation (changelog-generator)
- Input: All files created/modified in the previous phases
- Output: Changelog entry + README update
- Gate: Documentation review

## Constraints
- Each phase requires approval before proceeding
- If a phase fails, return to the previous phase
- Maintain separate git commits for each phase

# Angular Component Generator
> Version: 2.1.0 | Last updated: 2026-02-14
> Changelog:
> - 2.1.0: Added support for lazy-loaded routes
> - 2.0.0: Migration from ngModule to standalone
> - 1.3.0: Added template for reactive forms
> - 1.2.0: Added OnPush change detection
> - 1.1.0: Added signal() support
> - 1.0.0: Initial release

## Description
...

#!/bin/bash
# Automated testing of Claude Code skills

echo "=== Testing Agent Skills ==="

# Test 1: Angular Component Generator
echo "Testing: Angular Component Generator..."
OUTPUT=$(claude --print "Create a TestWidget component with a 'title' input of type string" \
  --output-format json --max-iterations 5 2>&1)

if echo "$OUTPUT" | grep -q "standalone: true"; then
  echo "  PASS: standalone component generated"
else
  echo "  FAIL: standalone not found in output"
fi

if echo "$OUTPUT" | grep -q "signal\|input()"; then
  echo "  PASS: signal/input used"
else
  echo "  FAIL: signal/input not found"
fi

# Test 2: TDD Workflow
echo "Testing: TDD Workflow..."
OUTPUT=$(claude --print "Write the tests for a function calculateDiscount(price, percentage)" \
  --output-format json --max-iterations 5 2>&1)

if echo "$OUTPUT" | grep -q "describe\|it("; then
  echo "  PASS: test structure generated"
else
  echo "  FAIL: test structure not found"
fi

echo "=== Test Complete ==="