Skill

Act as a Codebase Documentation Specialist. You are an expert in generating detailed WIKI.md documentation for various codebases using Language Server Protocol (LSP) for precise code analysis.

Your task is to:
- Analyze the provided codebase using LSP.
- Generate a comprehensive WIKI.md document.
- Include architectural diagrams, API references, and data flow documentation.

You will:
- Detect language from configuration files like `package.json`, `pyproject.toml`, `go.mod`, etc.
- Start the appropriate LSP server for the detected language.
- Query the LSP for symbols, references, types, and call hierarchy.
- If LSP unavailable, scripts fall back to AST/regex analysis.
- Use Mermaid diagrams extensively (flowchart, sequenceDiagram, classDiagram, erDiagram).

Required Sections:
1. Project Overview (tech stack, dependencies)
2. Architecture (Mermaid flowchart)
3. Project Structure (directory tree)
4. Core Components (classes, functions, APIs)
5. Data Flow (Mermaid sequenceDiagram)
6. Data Model (Mermaid erDiagram, classDiagram)
7. API Reference
8. Configuration
9. Getting Started
10. Development Guide

Rules:
- Support TypeScript, JavaScript, Python, Go, Rust, Java, C/C++, Julia ... projects.
- Exclude directories such as `node_modules/`, `venv/`, `.git/`, `dist/`, `build/`.
- Focus on `src/` or `lib/` for large codebases and prioritize entry points like `main.py`, `index.ts`, `App.tsx`.

---
name: create-plan
description: Create a concise plan. Use when a user explicitly asks for a plan related to a coding task.
metadata:
  short-description: Create a plan
---

# Create Plan

## Goal

Turn a user prompt into a **single, actionable plan** delivered in the final assistant message.

## Minimal workflow

Throughout the entire workflow, operate in read-only mode. Do not write or update files.

1. **Scan context quickly**
   - Read `README.md` and any obvious docs (`docs/`, `CONTRIBUTING.md`, `ARCHITECTURE.md`).
   - Skim relevant files (the ones most likely touched).
   - Identify constraints (language, frameworks, CI/test commands, deployment shape).

2. **Ask follow-ups only if blocking**
   - Ask **at most 1–2 questions**.
   - Only ask if you cannot responsibly plan without the answer; prefer multiple-choice.
   - If unsure but not blocked, make a reasonable assumption and proceed.

3. **Create a plan using the template below**
   - Start with **1 short paragraph** describing the intent and approach.
   - Clearly call out what is **in scope** and what is **not in scope** in short.
   - Then provide a **small checklist** of action items (default 6–10 items).
      - Each checklist item should be a concrete action and, when helpful, mention files/commands.
      - **Make items atomic and ordered**: discovery → changes → tests → rollout.
      - **Verb-first**: “Add…”, “Refactor…”, “Verify…”, “Ship…”.
   - Include at least one item for **tests/validation** and one for **edge cases/risk** when applicable.
   - If there are unknowns, include a tiny **Open questions** section (max 3).

4. **Do not preface the plan with meta explanations; output only the plan as per template**

## Plan template (follow exactly)

```markdown
# Plan

<1–3 sentences: what we’re doing, why, and the high-level approach.>

## Scope
- In:
- Out:

## Action items
[ ] <Step 1>
[ ] <Step 2>
[ ] <Step 3>
[ ] <Step 4>
[ ] <Step 5>
[ ] <Step 6>

## Open questions
- <Question 1>
- <Question 2>
- <Question 3>
```

## Checklist item guidance
Good checklist items:
- Point to likely files/modules: src/..., app/..., services/...
- Name concrete validation: “Run npm test”, “Add unit tests for X”
- Include safe rollout when relevant: feature flag, migration plan, rollback note

Avoid:
- Vague steps (“handle backend”, “do auth”)
- Too many micro-steps
- Writing code snippets (keep the plan implementation-agnostic)

# Web Application Testing

This skill enables comprehensive testing and debugging of local web applications using Playwright automation.

## When to Use This Skill

Use this skill when you need to:
- Test frontend functionality in a real browser
- Verify UI behavior and interactions
- Debug web application issues
- Capture screenshots for documentation or debugging
- Inspect browser console logs
- Validate form submissions and user flows
- Check responsive design across viewports

## Prerequisites

- Node.js installed on the system
- A locally running web application (or accessible URL)
- Playwright will be installed automatically if not present

## Core Capabilities

### 1. Browser Automation
- Navigate to URLs
- Click buttons and links
- Fill form fields
- Select dropdowns
- Handle dialogs and alerts

### 2. Verification
- Assert element presence
- Verify text content
- Check element visibility
- Validate URLs
- Test responsive behavior

### 3. Debugging
- Capture screenshots
- View console logs
- Inspect network requests
- Debug failed tests

## Usage Examples

### Example 1: Basic Navigation Test
```javascript
// Navigate to a page and verify title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);
```

### Example 2: Form Interaction
```javascript
// Fill out and submit a form
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
```

### Example 3: Screenshot Capture
```javascript
// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });
```

## Guidelines

1. **Always verify the app is running** - Check that the local server is accessible before running tests
2. **Use explicit waits** - Wait for elements or navigation to complete before interacting
3. **Capture screenshots on failure** - Take screenshots to help debug issues
4. **Clean up resources** - Always close the browser when done
5. **Handle timeouts gracefully** - Set reasonable timeouts for slow operations
6. **Test incrementally** - Start with simple interactions before complex flows
7. **Use selectors wisely** - Prefer data-testid or role-based selectors over CSS classes

## Common Patterns

### Pattern: Wait for Element
```javascript
await page.waitForSelector('#element-id', { state: 'visible' });
```

### Pattern: Check if Element Exists
```javascript
const exists = await page.locator('#element-id').count() > 0;
```

### Pattern: Get Console Logs
```javascript
page.on('console', msg => console.log('Browser log:', msg.text()));
```

### Pattern: Handle Errors
```javascript
try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  throw error;
}
```

## Limitations

- Requires Node.js environment
- Cannot test native mobile apps (use React Native Testing Library instead)
- May have issues with complex authentication flows
- Some modern frameworks may require specific configuration

# Code Review Skill

This skill performs comprehensive code reviews with actionable feedback.

## Instructions

When reviewing code:

1. **Check correctness** - Verify logic and functionality
2. **Review code style** - Ensure consistency with project standards
3. **Identify security issues** - Look for vulnerabilities
4. **Assess performance** - Find potential bottlenecks
5. **Evaluate maintainability** - Consider future maintenance

## Review Checklist

### Functionality
- [ ] Code works as intended
- [ ] Edge cases are handled
- [ ] Error handling is appropriate

### Code Quality
- [ ] Code is readable and well-organized
- [ ] Functions are focused and not too long
- [ ] No code duplication
- [ ] Variable names are descriptive

### Security
- [ ] Input validation is present
- [ ] No hardcoded secrets
- [ ] SQL injection prevention
- [ ] XSS prevention

## Feedback Format

Provide specific, actionable feedback with:
- Line references
- Suggested improvements
- Code examples when helpful

# Git Commit Message Skill

This skill writes clear, conventional commit messages following best practices.

## Instructions

When writing commit messages:

1. **Use conventional commit format** - type(scope): description
2. **Be concise but descriptive** - Summarize changes clearly
3. **Use imperative mood** - "Add feature" not "Added feature"
4. **Reference issues** - Link to relevant tickets or issues
5. **Separate concerns** - One logical change per commit

## Commit Types

- **feat**: New feature
- **fix**: Bug fix
- **docs**: Documentation changes
- **style**: Code style changes (formatting, etc.)
- **refactor**: Code refactoring
- **test**: Adding or updating tests
- **chore**: Maintenance tasks

## Format

```
type(scope): short description

Longer description if needed. Explain what and why,
not how.

Refs: #issue-number
```

# Documentation Writer Skill

This skill creates clear, comprehensive documentation for code and APIs.

## Instructions

When writing documentation:

1. **Understand the code** - Analyze functionality and purpose
2. **Write clear descriptions** - Explain what the code does in plain language
3. **Document parameters** - List all inputs with types and descriptions
4. **Include examples** - Provide usage examples for common scenarios
5. **Note edge cases** - Document any limitations or special behaviors

## Documentation Types

### Function/Method Documentation
- Purpose and description
- Parameters with types
- Return values
- Exceptions thrown
- Usage examples

### API Documentation
- Endpoint descriptions
- Request/response formats
- Authentication requirements
- Rate limits and errors

### README Documentation
- Project overview
- Installation instructions
- Quick start guide
- Configuration options

# Test Generator Skill

This skill generates comprehensive unit tests for code.

## Instructions

When generating tests:

1. **Identify testable units** - Find functions, methods, and classes to test
2. **Cover edge cases** - Include tests for boundary conditions and error states
3. **Use appropriate assertions** - Match assertions to expected outcomes
4. **Mock dependencies** - Isolate units from external dependencies
5. **Follow naming conventions** - Use descriptive test names

## Test Categories

- **Happy path tests** - Normal expected behavior
- **Edge case tests** - Boundary conditions
- **Error handling tests** - Exception and error scenarios
- **Integration tests** - Component interactions

## Framework Guidelines

- Use the project's existing test framework
- Follow AAA pattern (Arrange, Act, Assert)
- Keep tests independent and isolated
- Aim for high code coverage

# Code Refactoring Skill

This skill helps refactor code to improve readability, maintainability, and performance.

## Instructions

When asked to refactor code:

1. **Analyze the code structure** - Identify code smells, duplications, and areas for improvement
2. **Apply refactoring patterns** - Use appropriate design patterns and best practices
3. **Preserve functionality** - Ensure all existing behavior is maintained
4. **Add documentation** - Include clear comments explaining complex logic
5. **Optimize performance** - Look for opportunities to improve efficiency

## Guidelines

- Follow the language's style guide and conventions
- Break large functions into smaller, focused ones
- Use meaningful variable and function names
- Remove dead code and unused imports
- Add type annotations where applicable

## Output Format

Provide the refactored code with explanations of changes made.