### Complete Python MCP Server Example

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/python_mcp_server.md

Presents a full Python MCP server implementation for the Example Service. It includes necessary imports, server initialization, constants, enums for response formats, and Pydantic models for input validation, demonstrating a robust setup for interacting with external APIs.

```python
#!/usr/bin/env python3
'''
MCP Server for Example Service.

This server provides tools to interact with Example API, including user search,
project management, and data export capabilities.
'''

from typing import Optional, List, Dict, Any
from enum import Enum
import httpx
from pydantic import BaseModel, Field, field_validator, ConfigDict
from mcp.server.fastmcp import FastMCP

# Initialize the MCP server
mcp = FastMCP("example_mcp")

# Constants
API_BASE_URL = "https://api.example.com/v1"

# Enums
class ResponseFormat(str, Enum):
    '''Output format for tool responses.'''
    MARKDOWN = "markdown"
    JSON = "json"

# Pydantic Models for Input Validation
class UserSearchInput(BaseModel):
    '''Input model for user search operations.'''
    model_config = ConfigDict(
        str_strip_whitespace=True,
        validate_assignment=True
    )

    query: str = Field(..., description="Search string to match against names/emails", min_length=2, max_length=200)
    limit: Optional[int] = Field(default=20, description="Maximum results to return", ge=1, le=100)
    offset: Optional[int] = Field(default=0, description="Number of results to skip for pagination", ge=0)
    response_format: ResponseFormat = Field(default=ResponseFormat.MARKDOWN, description="Output format")

    @field_validator('query')
    @classmethod
    def validate_query(cls, v: str) -> str:
        if not v.strip():
            raise ValueError("Query cannot be empty or whitespace only")
        return v.strip()
```

--------------------------------

### Node.js Server Setup and Execution

Source: https://context7.com/bbeierle12/skill-mcp-claude/llms.txt

Details the setup and execution of a TypeScript/Node.js MCP server and REST API. Includes installation, build, run, and development commands, along with environment variables and testing instructions.

```bash
# Installation
cd skills-mcp-server
npm install

# Build TypeScript
npm run build

# Run MCP server (for Claude Desktop)
npm start
# or: node dist/index.js

# Run REST API server (for web UI)
npm run start:api
# or: node dist/api.js

# Development mode with hot reload
npm run dev      # MCP server
npm run dev:api  # REST API

# Environment variables:
# SKILLS_DIR - Path to skills directory (default: ../skills)
# API_PORT - REST API port (default: 5050)

# Run tests
npm test
npm run test:coverage
```

--------------------------------

### Initialize New Skill with init_skill.py Script

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/skill-creator/SKILL.md

The `init_skill.py` script is used to create a new skill directory with a template structure. It generates a SKILL.md file, example resource directories (scripts, references, assets), and example files within them. This script streamlines the initial setup of a new skill.

```bash
scripts/init_skill.py <skill-name> --path <output-directory>
```

--------------------------------

### Complete html2pptx and PptxGenJS Example (JavaScript)

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/pptx/html2pptx.md

A comprehensive example demonstrating the creation of a multi-slide presentation. It includes setting presentation metadata, converting HTML to slides using html2pptx, adding a chart with specific configurations using PptxGenJS, and saving the final presentation.

```javascript
const pptxgen = require("pptxgenjs");
const { html2pptx } = require("./html2pptx");

async function createPresentation() {
  const pptx = new pptxgen();
  pptx.layout = "LAYOUT_16x9";
  pptx.author = "Your Name";
  pptx.title = "My Presentation";

  // Slide 1: Title
  const { slide: slide1 } = await html2pptx("slides/title.html", pptx);

  // Slide 2: Content with chart
  const { slide: slide2, placeholders } = await html2pptx(
    "slides/data.html",
    pptx
  );

  const chartData = [
    {
      name: "Sales",
      labels: ["Q1", "Q2", "Q3", "Q4"],
      values: [4500, 5500, 6200, 7100],
    },
  ];

  slide2.addChart(pptx.charts.BAR, chartData, {
    ...placeholders[0],
    showTitle: true,
    title: "Quarterly Sales",
    showCatAxisTitle: true,
    catAxisTitle: "Quarter",
    showValAxisTitle: true,
    valAxisTitle: "Sales ($000s)",
  });

  // Save
  await pptx.writeFile({ fileName: "presentation.pptx" });
  console.log("Presentation created successfully!");
}

createPresentation().catch(console.error);
```

--------------------------------

### Setup and Export DOCX with JavaScript/TypeScript

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/docx/docx-js.md

Demonstrates how to import necessary components from the 'docx' library and export a generated document to a buffer for Node.js or a blob for browser environments. Assumes the 'docx' library is installed.

```javascript
const { Document, Packer, Paragraph, TextRun, Table, TableRow, TableCell, ImageRun, Media,
        Header, Footer, AlignmentType, PageOrientation, LevelFormat, ExternalHyperlink,
        InternalHyperlink, TableOfContents, HeadingLevel, BorderStyle, WidthType, TabStopType,
        TabStopPosition, UnderlineType, ShadingType, VerticalAlign, SymbolRun, PageNumber,
        FootnoteReferenceRun, Footnote, PageBreak } = require('docx');

// Create & Save
const doc = new Document({ sections: [{ children: [/* content */] }] });
Packer.toBuffer(doc).then(buffer => fs.writeFileSync("doc.docx", buffer)); // Node.js
Packer.toBlob(doc).then(blob => { /* download logic */ }); // Browser
```

--------------------------------

### Example User Search Tool (Python)

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/python_mcp_server.md

A FastMCP tool to search for users in an example system. It utilizes _make_api_request for data fetching and _handle_api_error for error management. Supports both Markdown and JSON output formats based on the request parameters.

```python
import httpx
import json
from mcp.server.fastmcp import mcp
from typing import Literal

# Assume UserSearchInput, ResponseFormat, API_BASE_URL, _make_api_request, _handle_api_error are defined elsewhere

class UserSearchInput:
    query: str
    limit: int = 10
    offset: int = 0
    response_format: Literal['MARKDOWN', 'JSON'] = 'MARKDOWN'

class ResponseFormat:
    MARKDOWN = 'MARKDOWN'
    JSON = 'JSON'

API_BASE_URL = "http://example.com/api"

async def _make_api_request(endpoint: str, method: str = "GET", **kwargs) -> dict:
    '''Reusable function for all API calls.'''
    async with httpx.AsyncClient() as client:
        response = await client.request(
            method,
            f"{API_BASE_URL}/{endpoint}",
            timeout=30.0,
            **kwargs
        )
        response.raise_for_status()
        return response.json()

def _handle_api_error(e: Exception) -> str:
    '''Consistent error formatting across all tools.'''
    if isinstance(e, httpx.HTTPStatusError):
        if e.response.status_code == 404:
            return "Error: Resource not found. Please check the ID is correct."
        elif e.response.status_code == 403:
            return "Error: Permission denied. You don't have access to this resource."
        elif e.response.status_code == 429:
            return "Error: Rate limit exceeded. Please wait before making more requests."
        return f"Error: API request failed with status {e.response.status_code}"
    elif isinstance(e, httpx.TimeoutException):
        return "Error: Request timed out. Please try again."
    return f"Error: Unexpected error occurred: {type(e).__name__}"


@mcp.tool(
    name="example_search_users",
    annotations={
        "title": "Search Example Users",
        "readOnlyHint": True,
        "destructiveHint": False,
        "idempotentHint": True,
        "openWorldHint": True
    }
)
async def example_search_users(params: UserSearchInput) -> str:
    '''Search for users in the Example system by name, email, or team.'''
    try:
        # Make API request using validated parameters
        data = await _make_api_request(
            "users/search",
            params={
                "q": params.query,
                "limit": params.limit,
                "offset": params.offset
            }
        )

        users = data.get("users", [])
        total = data.get("total", 0)

        if not users:
            return f"No users found matching '{params.query}'"

        # Format response based on requested format
        if params.response_format == ResponseFormat.MARKDOWN:
            lines = [f"# User Search Results: '{params.query}'", ""]
            lines.append(f"Found {total} users (showing {len(users)})")
            lines.append("")

            for user in users:
                lines.append(f"## {user['name']} ({user['id']})")
                lines.append(f"- **Email**: {user['email']}")
                if user.get('team'):
                    lines.append(f"- **Team**: {user['team']}")
                lines.append("")

            return "\n".join(lines)

        else:
            # Machine-readable JSON format
            response = {
                "total": total,
                "count": len(users),
                "offset": params.offset,
                "users": users
            }
            return json.dumps(response, indent=2)

    except Exception as e:
        return _handle_api_error(e)

if __name__ == "__main__":
    mcp.run()
```

--------------------------------

### Quick Start: Building System Initialization and Usage

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/3d-building-advanced/SKILL.md

Demonstrates the basic setup and usage of the building system, including spatial indexing for efficient object queries and structural validation for piece placement. It initializes a SpatialHashGrid and a HeuristicValidator, showcasing their core functionalities.

```javascript
import { SpatialHashGrid } from './scripts/spatial-hash-grid.js';
import { HeuristicValidator } from './scripts/heuristic-validator.js';

// Spatial indexing for fast queries
const spatialIndex = new SpatialHashGrid(10);
spatialIndex.insert(piece, piece.position);
const nearby = spatialIndex.queryRadius(position, 15);

// Structural validation (Rust/Valheim style)
const validator = new HeuristicValidator({ mode: 'heuristic' });
validator.addPiece(piece);
const canPlace = validator.validatePlacement(newPiece);
```

--------------------------------

### Quick Start: Initialize Audio Analysis with Tone.js

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/audio-analysis/SKILL.md

Initializes an FFT analyzer and a Tone.js player to extract frequency data from an audio file. This setup is fundamental for most audio analysis tasks.

```javascript
import * as Tone from 'tone';

// Create analyzer
const analyser = new Tone.Analyser('fft', 256);
const player = new Tone.Player('/audio/music.mp3');

player.connect(analyser);
player.toDestination();

// Get frequency data
const frequencyData = analyser.getValue(); // Float32Array
```

--------------------------------

### Python Server Setup and Execution

Source: https://context7.com/bbeierle12/skill-mcp-claude/llms.txt

Provides instructions for setting up and running a Python-based Skills Manager API server using Flask. Includes installation commands, server execution, environment variables, and MCP server details.

```python
# Installation
# pip install flask flask-cors flask-limiter fastmcp

# Running the API server (skills_manager_api.py)
# python skills_manager_api.py

# Server starts at http://localhost:5050
# Serves web UI at root path
# API endpoints at /api/*

# Environment variables:
# RATE_LIMIT_DEFAULT - Default rate limit (default: "60/minute")
# RATE_LIMIT_WRITE - Write operation rate limit (default: "10/minute")
# FLASK_DEBUG - Enable debug mode (default: "false")

# Running the MCP server for Claude Desktop
# python server.py

# The MCP server exposes tools via stdio transport:
# - list_skills, get_skill, get_sub_skill
# - search_skills, search_content
# - get_skills_batch, get_skill_chain
# - reload_index, validate_skills, get_stats
```

--------------------------------

### XML QA Pair Example: Keyword Search

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/evaluation.md

An example of a question-answer pair in XML format, demonstrating a 'poor question' that can be easily solved by a keyword search. This highlights the need for more complex evaluation tasks.

```xml
<qa_pair>
   <question>Find the pull request with title "Add authentication feature" and tell me who created it.</question>
   <answer>developer123</answer>
</qa_pair>
```

--------------------------------

### Full Slide HTML Structure Example

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/pptx/html2pptx.md

An example of a complete HTML slide structure, including title, content, and footnote zones. It utilizes CSS classes for layout management (flexbox) and positioning, demonstrating how to achieve a responsive and well-organized slide.

```html
<body class="col bg-surface" style="width: 960px; height: 540px; position: relative;">
  <!-- Title zone: use fit class to shrink to content height -->
  <div style="width: 920px; margin: 0 20px; padding-top: 20px;" class="fit">
    <h1 style="margin: 0;">Slide Title</h1>
    <p class="text-muted-foreground" style="margin-top: 4px;">Optional subtitle</p>
  </div>

  <!-- Content zone: fill-height takes remaining space -->
  <div class="row gap-lg fill-height" style="padding: 10px 20px;">
    <div class="col" style="width: 45%;"><!-- Left column content --></div>
    <div class="col" style="width: 55%;"><!-- Right column content --></div>
  </div>

  <!-- Footnote zone: absolute positioning for fixed bottom placement -->
  <p style="position: absolute; bottom: 8px; left: 20px; font-size: 10pt; color: #666; margin: 0;">
    Source: Data from Q4 2024 report
  </p>
</body>
```

--------------------------------

### Install Dependencies and Set API Key

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/evaluation.md

This bash snippet installs the necessary Python packages using pip and sets an environment variable for the Anthropic API key. Replace 'your_api_key' with your actual key. This is a prerequisite for running the evaluation.

```bash
pip install -r scripts/requirements.txt
export ANTHROPIC_API_KEY=your_api_key
```

--------------------------------

### SKILL.md Structure and Usage Examples

Source: https://context7.com/bbeierle12/skill-mcp-claude/llms.txt

Skills are defined using a markdown format with YAML frontmatter for metadata. The SKILL.md file includes sections for overview, usage conditions, quick start code examples, best practices, detailed examples, and related skills. This structure ensures clarity and maintainability.

```markdown
---
name: my-custom-skill
description: Brief description of when Claude should use this skill
---

# My Custom Skill

## Overview
Detailed description of what this skill helps with and its primary purpose.

## When to Use
- Trigger condition 1: When the user asks about X
- Trigger condition 2: When working on Y type of project
- Trigger condition 3: When Z pattern is detected

## Quick Start
```typescript
// Example code showing basic usage
import { myFunction } from './utils';

const result = myFunction({
  option1: 'value',
  option2: true
});
```

## Best Practices
- Practice 1: Always validate inputs
- Practice 2: Use TypeScript for type safety
- Practice 3: Follow the established patterns

## Examples

### Example 1: Basic Usage
```typescript
// Minimal example
doSomething();
```

### Example 2: Advanced Usage
```typescript
// Complex example with error handling
try {
  const result = await complexOperation();
  handleSuccess(result);
} catch (error) {
  handleError(error);
}
```

## Related Skills
- `related-skill-1`: For additional context
- `related-skill-2`: For complementary functionality

```

--------------------------------

### Build and Run Commands (Bash)

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/node_mcp_server.md

These bash commands outline the essential steps for building and running the TypeScript project. It includes commands for building the project, starting the server, and running the server with auto-reloading for development.

```bash
# Build the project
npm run build

# Run the server
npm start

# Development with auto-reload
npm run dev
```

--------------------------------

### Responsive-ish Widths - HTML Example

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/pptx/html2pptx.md

Demonstrates the use of percentage widths for responsive columns and fixed widths for consistent elements like accent bars and content padding/margins in HTML. It emphasizes using percentage widths for elements that should adapt to their container.

```html
<!-- Columns: percentage (adapt to container) -->
<div style="width: 35%;">Sidebar</div>
<div style="width: 65%;">Main</div>

<!-- Accent bars: fixed (always same visual weight; don't overuse these!) -->
<div style="width: 12px; height: 100%;">Accent</div>

<!-- Padding/margins: fixed (consistent breathing room) -->
<div style="padding: 20px 32px;">Content</div>
```

--------------------------------

### Basic R3F Scene Setup with Canvas

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/r3f-fundamentals/SKILL.md

Demonstrates the minimal setup for a React Three Fiber application. It initializes the Canvas component and renders a simple scene with ambient light, a point light, and a basic mesh (a box with a standard material). This is the starting point for most R3F projects.

```tsx
import { Canvas } from '@react-three/fiber';

function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="hotpink" />
      </mesh>
    </Canvas>
  );
}
```

--------------------------------

### Async vs. Sync Network Request Example (Python)

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/python_mcp_server.md

Illustrates the best practice of using `async`/`await` for network requests in Python. It contrasts a proper asynchronous `fetch_data` function using `httpx.AsyncClient` with a blocking synchronous version using `requests`.

```python
# Assuming API_URL is defined elsewhere
# API_URL = "..."
import httpx
import requests

# Good: Async network request
async def fetch_data_async(resource_id: str) -> dict:
    async with httpx.AsyncClient() as client:
        response = await client.get(f"{API_URL}/resource/{resource_id}")
        response.raise_for_status()
        return response.json()

# Bad: Synchronous request
def fetch_data_sync(resource_id: str) -> dict:
    response = requests.get(f"{API_URL}/resource/{resource_id}")  # Blocks
    return response.json()
```

--------------------------------

### Install VeeValidate, Zod, and @vee-validate/zod

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/form-vue/SKILL.md

Installs the necessary packages for using VeeValidate with Zod for form validation in a Vue 3 application. This is the initial setup step for the quick start example.

```bash
npm install vee-validate @vee-validate/zod zod
```

--------------------------------

### Python Requirements Installation

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/evaluation.md

Commands to install project dependencies using pip. It shows both a direct installation from a requirements file and manual installation of individual packages.

```bash
pip install -r scripts/requirements.txt

Or install manually:

pip install anthropic mcp
```

--------------------------------

### XML QA Pair Example

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/evaluation.md

An example of a question-answer pair in XML format, illustrating a 'poor question' scenario where the answer changes over time. This format is used for defining evaluation tasks.

```xml
<qa_pair>
   <question>How many open issues are currently assigned to the engineering team?</question>
   <answer>47</answer>
</qa_pair>
```

--------------------------------

### Standard p5.js Canvas Setup (JavaScript)

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/algorithmic-art/SKILL.md

Provides the basic structure for a p5.js sketch, including the `setup` function for initial canvas creation and the `draw` function for the generative algorithm. The `draw` function can be static or animated.

```javascript
function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

function draw() {
  // Your generative algorithm
  // Can be static (noLoop) or animated
}
```

--------------------------------

### XML QA Pair Example: Ambiguous Answer

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/evaluation.md

An example of a question-answer pair in XML format, showcasing a 'poor question' with an ambiguous answer format. This illustrates challenges in verification due to potential variations in LLM output.

```xml
<qa_pair>
   <question>List all the repositories that have Python as their primary language.</question>
   <answer>repo1, repo2, repo3, data-pipeline, ml-tools</answer>
</qa_pair>
```

--------------------------------

### Configure Document Headers, Footers, and Page Setup in JavaScript

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/docx/docx-js.md

This JavaScript code demonstrates how to create a new document with custom page margins, landscape orientation, and page numbering. It also shows how to define default headers with right-aligned text and footers with current and total page numbers.

```javascript
const doc = new Document({
  sections: [{
    properties: {
      page: {
        margin: { top: 1440, right: 1440, bottom: 1440, left: 1440 }, // 1440 = 1 inch
        size: { orientation: PageOrientation.LANDSCAPE },
        pageNumbers: { start: 1, formatType: "decimal" } // "upperRoman", "lowerRoman", "upperLetter", "lowerLetter"
      }
    },
    headers: {
      default: new Header({ children: [new Paragraph({
        alignment: AlignmentType.RIGHT,
        children: [new TextRun("Header Text")]
      })] })
    },
    footers: {
      default: new Footer({ children: [new Paragraph({
        alignment: AlignmentType.CENTER,
        children: [new TextRun("Page "), new TextRun({ children: [PageNumber.CURRENT] }), new TextRun(" of "), new TextRun({ children: [PageNumber.TOTAL_PAGES] })]
      })] })
    },
    children: [/* content */]
  }]
});
```

--------------------------------

### Quick Start: Analyze Terrain and Place Foundation (JavaScript)

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/terrain-integration/SKILL.md

Demonstrates the basic usage of TerrainAnalyzer and FoundationPlacer for analyzing terrain slope and placing a foundation with auto-leveling. It shows how to import the necessary classes, analyze the terrain at a specific position, and then place a foundation piece considering various placement modes and auto-leveling.

```javascript
import { TerrainAnalyzer } from './scripts/terrain-analyzer.js';
import { FoundationPlacer } from './scripts/foundation-placer.js';

// Analyze terrain at build location
const analyzer = new TerrainAnalyzer(terrainMesh);
const slopeData = analyzer.analyzeSlope(position, { radius: 4 });
// slopeData: { angle: 15, normal: Vector3, canBuild: true }

// Place foundation with auto-leveling
const placer = new FoundationPlacer({
  mode: 'valheim', // or 'rust', 'ark'
  maxSlope: 30,
  autoLevel: true
});
const result = placer.place(foundationPiece, position, analyzer);
// result: { valid: true, height: 2.3, pillarsNeeded: 2 }
```

--------------------------------

### Install Tone.js

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/audio-playback/SKILL.md

Installs the Tone.js library using npm. This is a prerequisite for using any of the Tone.js functionalities.

```bash
npm install tone
```

--------------------------------

### Build Simple Process Flowchart in HTML

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/pptx/html2pptx.md

Demonstrates creating a basic 3-step process flowchart using HTML divs. It utilizes inline styles for layout, background colors, text formatting, and spacing to represent sequential steps and arrows.

```html
<div class="row items-center gap-md" style="padding: 20px;">
  <!-- Step 1 -->
  <div class="col items-center" style="width: 200px;">
    <div class="rounded p-4" style="background: var(--color-primary); color: white; width: 100%;">
      <p class="text-lg bold text-center" style="margin: 0;">1. Research</p>
    </div>
  </div>

  <!-- Arrow -->
  <div style="font-size: 24px; color: var(--color-muted-foreground);">→</div>

  <!-- Step 2 -->
  <div class="col items-center" style="width: 200px;">
    <div class="rounded p-4" style="background: var(--color-primary); color: white; width: 100%;">
      <p class="text-lg bold text-center" style="margin: 0;">2. Design</p>
    </div>
  </div>

  <!-- Arrow -->
  <div style="font-size: 24px; color: var(--color-muted-foreground);">→</div>

  <!-- Step 3 -->
  <div class="col items-center" style="width: 200px;">
    <div class="rounded p-4" style="background: var(--color-primary); color: white; width: 100%;">
      <p class="text-lg bold text-center" style="margin: 0;">3. Build</p>
    </div>
  </div>
</div>
```

--------------------------------

### Vue 3 Form with VeeValidate and Zod Quick Start

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/form-vue/SKILL.md

A basic Vue 3 form component demonstrating the quick start setup using VeeValidate and Zod for validation. It defines a schema, uses the `useForm` and `useField` composables, and handles form submission.

```vue
<script setup lang="ts">
import { useForm, useField } from 'vee-validate';
import { toTypedSchema } from '@vee-validate/zod';
import { z } from 'zod';

// 1. Define schema
const schema = toTypedSchema(z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Min 8 characters')
}));

// 2. Use form
const { handleSubmit, errors } = useForm({ validationSchema: schema });
const { value: email } = useField('email');
const { value: password } = useField('password');

// 3. Handle submit
const onSubmit = handleSubmit((values) => {
  console.log(values);
});
</script>

<template>
  <form @submit="onSubmit">
    <input v-model="email" type="email" autocomplete="email" />
    <span v-if="errors.email">{{ errors.email }}</span>
    
    <input v-model="password" type="password" autocomplete="current-password" />
    <span v-if="errors.password">{{ errors.password }}</span>
    
    <button type="submit">Sign in</button>
  </form>
</template>
```

--------------------------------

### Full Tool Implementation with Pydantic Validation in Python

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/python_mcp_server.md

Provides a comprehensive example of implementing an MCP tool using the FastMCP framework. It includes Pydantic model definition for input validation, tool registration with detailed annotations, and the structure for the tool's asynchronous function.

```python
from pydantic import BaseModel, Field, ConfigDict
from mcp.server.fastmcp import FastMCP

# Initialize the MCP server
mcp = FastMCP("example_mcp")

# Define Pydantic model for input validation
class ServiceToolInput(BaseModel):
    '''Input model for service tool operation.'''
    model_config = ConfigDict(
        str_strip_whitespace=True,  # Auto-strip whitespace from strings
        validate_assignment=True,    # Validate on assignment
        extra='forbid'              # Forbid extra fields
    )

    param1: str = Field(..., description="First parameter description (e.g., 'user123', 'project-abc')", min_length=1, max_length=100)
    param2: Optional[int] = Field(default=None, description="Optional integer parameter with constraints", ge=0, le=1000)
    tags: Optional[List[str]] = Field(default_factory=list, description="List of tags to apply", max_items=10)

@mcp.tool(
    name="service_tool_name",
    annotations={
        "title": "Human-Readable Tool Title",
        "readOnlyHint": True,     # Tool does not modify environment
        "destructiveHint": False,  # Tool does not perform destructive operations
        "idempotentHint": True,    # Repeated calls have no additional effect
        "openWorldHint": False     # Tool does not interact with external entities
    }
)
async def service_tool_name(params: ServiceToolInput) -> str:
    '''Tool description automatically becomes the 'description' field.

    This tool performs a specific operation on the service. It validates all inputs
    using the ServiceToolInput Pydantic model before processing.

    Args:
        params (ServiceToolInput): Validated input parameters containing:
            - param1 (str): First parameter description
            - param2 (Optional[int]): Optional parameter with default
            - tags (Optional[List[str]]): List of tags

    Returns:
        str: JSON-formatted response containing operation results
    '''
    # Implementation here
    pass

```

--------------------------------

### Gap vs Padding Decision Tree - HTML Example

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/pptx/html2pptx.md

Illustrates the correct and incorrect usage of 'gap' for sibling spacing and 'padding' for internal container spacing using HTML and inline styles. The correct example uses 'gap' on the parent container for spacing between sibling elements.

```html
<!-- Correct: gap for sibling spacing -->
<div class="col" style="gap: 12px;">
  <div style="padding: 14px;">Box 1</div>
  <div style="padding: 14px;">Box 2</div>
</div>

<!-- Wrong: margin on children instead of gap on parent -->
<div class="col">
  <div style="margin-bottom: 12px; padding: 14px;">Box 1</div>
  <div style="padding: 14px;">Box 2</div>
</div>
```

--------------------------------

### Bash Verification Command Example

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/writing-plans/SKILL.md

Illustrates the verification step within a plan, showing a bash command to run tests and the expected output.

```bash
npm test -- --grep "FeatureName"
# Expected: 1 passing
```

--------------------------------

### GSAP ScrollTrigger Basic Setup

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/gsap-scrolltrigger/SKILL.md

Demonstrates the fundamental configuration of a ScrollTrigger. It defines the element to animate, the scroll trigger element, and the start and end points for the animation relative to the viewport.

```javascript
gsap.to('.element', {
  x: 200,
  scrollTrigger: {
    trigger: '.element',  // Element that triggers the animation
    start: 'top center',  // When trigger hits viewport center
    end: 'bottom center', // When trigger leaves viewport center
    toggleActions: 'play pause resume reset'
  }
});
```

--------------------------------

### Initialize MCP Server in TypeScript

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/node_mcp_server.md

Demonstrates the basic initialization of an McpServer instance using the MCP TypeScript SDK. This involves providing a name and version for the server, which are essential for identifying the service within the MCP ecosystem.

```typescript
const server = new McpServer({
  name: "service-mcp-server",
  version: "1.0.0"
});
```

--------------------------------

### Get User API

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/python_mcp_server.md

This endpoint retrieves a user's details based on their user ID. It returns a dictionary containing the user's ID and name.

```APIDOC
## GET /users/{user_id}

### Description
Retrieve a user's details by their unique user ID.

### Method
GET

### Endpoint
/users/{user_id}

### Parameters
#### Path Parameters
- **user_id** (str) - Required - The unique identifier for the user.

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "user_id": "U123456789"
}
```

### Response
#### Success Response (200)
- **id** (str) - The user's unique identifier.
- **name** (str) - The user's full name.

#### Response Example
```json
{
  "id": "U123456789",
  "name": "John Doe"
}
```
```

--------------------------------

### XML Evaluation File Format

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/evaluation.md

An example of the XML structure for an evaluation file, using `<qa_pair>` elements to define questions and their expected answers for testing an MCP server.

```xml
<evaluation>
   <qa_pair>
      <question>Find the project created in Q2 2024 with the highest number of completed tasks. What is the project name?</question>
      <answer>Website Redesign</answer>
   </qa_pair>
   <qa_pair>
      <question>Search for issues labeled as "bug" that were closed in March 2024. Which user closed the most issues? Provide their username.</question>
      <answer>sarah_dev</answer>
   </qa_pair>
</evaluation>
```

--------------------------------

### Advanced PDF Cropping using pypdf

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/pdf/REFERENCE.md

Demonstrates the initial setup for advanced PDF cropping using the `pypdf` library. It involves reading an input PDF and preparing a writer object for the output. The actual cropping logic would follow this setup. Requires pypdf.

```python
from pypdf import PdfWriter, PdfReader

reader = PdfReader("input.pdf")
writer = PdfWriter()

# Cropping logic would be implemented here, likely iterating through pages
# and using writer.add_page(page.crop(left, top, right, bottom)) or similar.
```

--------------------------------

### TypeScript MCP Server for Example API

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/node_mcp_server.md

This TypeScript code sets up an MCP server to interact with the Example API. It defines Zod schemas for input validation, utility functions for making API requests and handling errors, and registers a tool for searching users. It supports both stdio and HTTP transports, requiring an EXAMPLE_API_KEY environment variable.

```typescript
#!/usr/bin/env node
/**
 * MCP Server for Example Service.
 *
 * This server provides tools to interact with Example API, including user search,
 * project management, and data export capabilities.
 */

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
import axios, { AxiosError } from "axios";

// Constants
const API_BASE_URL = "https://api.example.com/v1";
const CHARACTER_LIMIT = 25000;

// Enums
enum ResponseFormat {
  MARKDOWN = "markdown",
  JSON = "json"
}

// Zod schemas
const UserSearchInputSchema = z.object({
  query: z.string()
    .min(2, "Query must be at least 2 characters")
    .max(200, "Query must not exceed 200 characters")
    .describe("Search string to match against names/emails"),
  limit: z.number()
    .int()
    .min(1)
    .max(100)
    .default(20)
    .describe("Maximum results to return"),
  offset: z.number()
    .int()
    .min(0)
    .default(0)
    .describe("Number of results to skip for pagination"),
  response_format: z.nativeEnum(ResponseFormat)
    .default(ResponseFormat.MARKDOWN)
    .describe("Output format: 'markdown' for human-readable or 'json' for machine-readable")
}).strict();

type UserSearchInput = z.infer<typeof UserSearchInputSchema>;

// Shared utility functions
async function makeApiRequest<T>(
  endpoint: string,
  method: "GET" | "POST" | "PUT" | "DELETE" = "GET",
  data?: any,
  params?: any
): Promise<T> {
  try {
    const response = await axios({
      method,
      url: `${API_BASE_URL}/${endpoint}`,
      data,
      params,
      timeout: 30000,
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json"
      }
    });
    return response.data;
  } catch (error) {
    throw error;
  }
}

function handleApiError(error: unknown): string {
  if (error instanceof AxiosError) {
    if (error.response) {
      switch (error.response.status) {
        case 404:
          return "Error: Resource not found. Please check the ID is correct.";
        case 403:
          return "Error: Permission denied. You don't have access to this resource.";
        case 429:
          return "Error: Rate limit exceeded. Please wait before making more requests.";
        default:
          return `Error: API request failed with status ${error.response.status}`;
      }
    } else if (error.code === "ECONNABORTED") {
      return "Error: Request timed out. Please try again.";
    }
  }
  return `Error: Unexpected error occurred: ${error instanceof Error ? error.message : String(error)}`;
}

// Create MCP server instance
const server = new McpServer({
  name: "example-mcp",
  version: "1.0.0"
});

// Register tools
server.registerTool(
  "example_search_users",
  {
    title: "Search Example Users",
    description: `[Full description as shown above]`,
    inputSchema: UserSearchInputSchema,
    annotations: {
      readOnlyHint: true,
      destructiveHint: false,
      idempotentHint: true,
      openWorldHint: true
    }
  },
  async (params: UserSearchInput) => {
    // Implementation as shown above
  }
);

// Main function
// For stdio (local):
async function runStdio() {
  if (!process.env.EXAMPLE_API_KEY) {
    console.error("ERROR: EXAMPLE_API_KEY environment variable is required");
    process.exit(1);
  }

  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("MCP server running via stdio");
}

// For streamable HTTP (remote):
async function runHTTP() {
  if (!process.env.EXAMPLE_API_KEY) {
    console.error("ERROR: EXAMPLE_API_KEY environment variable is required");
    process.exit(1);
  }

  const app = express();
  app.use(express.json());

  app.post('/mcp', async (req, res) => {
    const transport = new StreamableHTTPServerTransport({
      sessionIdGenerator: undefined,
      enableJsonResponse: true
    });
    res.on('close', () => transport.close());
    await server.connect(transport);
    await transport.handleRequest(req, res, req.body);
  });

  const port = parseInt(process.env.PORT || '3000');
  app.listen(port, () => {
    console.error(`MCP server running on http://localhost:${port}/mcp`);
  });
}

// Choose transport based on environment
const transport = process.env.TRANSPORT || 'stdio';
if (transport === 'http') {
  runHTTP().catch(error => {
    console.error("Server error:", error);
    process.exit(1);
  });
} else {
  runStdio().catch(error => {
    console.error("Server error:", error);
    process.exit(1);
  });
}

```

--------------------------------

### Create Metric Cards with Icons in HTML

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/pptx/html2pptx.md

Shows how to build visually appealing metric cards using HTML divs. Each card features an icon placeholder, a prominent metric value, and a descriptive label, styled for a clean presentation.

```html
<div class="row gap-lg" style="padding: 20px;">
  <div class="col items-center p-6 rounded" style="background: var(--color-surface); flex: 1;">
    <!-- Icon placeholder - use react-icons SVG -->
    <div style="width: 48px; height: 48px; margin-bottom: 12px;">
      <!-- Insert SVG icon here -->
    </div>
    <p class="text-3xl bold" style="margin: 0; color: var(--color-primary);">45%</p>
    <p class="text-muted-foreground" style="margin: 4px 0 0 0;">Growth Rate</p>
  </div>

  <div class="col items-center p-6 rounded" style="background: var(--color-surface); flex: 1;">
    <div style="width: 48px; height: 48px; margin-bottom: 12px;">
      <!-- Insert SVG icon here -->
    </div>
    <p class="text-3xl bold" style="margin: 0; color: var(--color-primary);">1.2M</p>
    <p class="text-muted-foreground" style="margin: 4px 0 0 0;">Active Users</p>
  </div>
</div>
```

--------------------------------

### Create Styled Tables with Borders and Headers in JavaScript

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/docx/docx-js.md

This snippet demonstrates how to create a table with specific borders, margins, column widths, and headers using JavaScript. It emphasizes the critical requirement of setting both column widths at the table level and individual cell widths, and using ShadingType.CLEAR to avoid background issues in Word. It also shows how to add bullet points within cells.

```javascript
// Complete table with margins, borders, headers, and bullet points
const tableBorder = { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" };
const cellBorders = { top: tableBorder, bottom: tableBorder, left: tableBorder, right: tableBorder };

new Table({
  columnWidths: [4680, 4680], // ⚠️ CRITICAL: Set column widths at table level - values in DXA (twentieths of a point)
  margins: { top: 100, bottom: 100, left: 180, right: 180 }, // Set once for all cells
  rows: [
    new TableRow({
      tableHeader: true,
      children: [
        new TableCell({
          borders: cellBorders,
          width: { size: 4680, type: WidthType.DXA }, // ALSO set width on each cell
          // ⚠️ CRITICAL: Always use ShadingType.CLEAR to prevent black backgrounds in Word.
          shading: { fill: "D5E8F0", type: ShadingType.CLEAR }, 
          verticalAlign: VerticalAlign.CENTER,
          children: [new Paragraph({
            alignment: AlignmentType.CENTER,
            children: [new TextRun({ text: "Header", bold: true, size: 22 })]
          })]
        }),
        new TableCell({
          borders: cellBorders,
          width: { size: 4680, type: WidthType.DXA }, // ALSO set width on each cell
          shading: { fill: "D5E8F0", type: ShadingType.CLEAR },
          children: [new Paragraph({
            alignment: AlignmentType.CENTER,
            children: [new TextRun({ text: "Bullet Points", bold: true, size: 22 })]
          })]
        })
      ]
    }),
    new TableRow({
      children: [
        new TableCell({
          borders: cellBorders,
          width: { size: 4680, type: WidthType.DXA }, // ALSO set width on each cell
          children: [new Paragraph({ children: [new TextRun("Regular data")] })]
        }),
        new TableCell({
          borders: cellBorders,
          width: { size: 4680, type: WidthType.DXA }, // ALSO set width on each cell
          children: [
            new Paragraph({ 
              numbering: { reference: "bullet-list", level: 0 },
              children: [new TextRun("First bullet point")] 
            }),
            new Paragraph({ 
              numbering: { reference: "bullet-list", level: 0 },
              children: [new TextRun("Second bullet point")] 
            })
          ]
        })
      ]
    })
  ]
})
```

--------------------------------

### Example Evaluation XML Structure

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/evaluation.md

This XML defines a set of question-answer pairs for evaluating an agent. Each qa_pair contains a question and the expected answer. This format is used as input for the evaluation script.

```xml
<evaluation>
   <qa_pair>
      <question>Find the user who created the most issues in January 2024. What is their username?</question>
      <answer>alice_developer</answer>
   </qa_pair>
   <qa_pair>
      <question>Among all pull requests merged in Q1 2024, which repository had the highest number? Provide the repository name.</question>
      <answer>backend-api</answer>
   </qa_pair>
   <qa_pair>
      <question>Find the project that was completed in December 2023 and had the longest duration from start to finish. How many days did it take?</question>
      <answer>127</answer>
   </qa_pair>
</evaluation>
```

--------------------------------

### Simple Audio Playback with Tone.js

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/audio-playback/SKILL.md

Demonstrates basic audio playback using Tone.js. It initializes a player for a given audio file and starts playback after the user interacts with the page to initiate the audio context.

```javascript
import * as Tone from 'tone';

// Simple playback
const player = new Tone.Player('/audio/music.mp3').toDestination();

// Must start audio context after user interaction
document.addEventListener('click', async () => {
  await Tone.start();
  player.start();
});
```

--------------------------------

### FastMCP Interactive Tool with Elicit (Python)

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/mcp-builder/reference/python_mcp_server.md

An example of a FastMCP tool that uses the Context object to elicit sensitive information from the user, such as an API key, using a password input type.

```python
from mcp.server.fastmcp import FastMCP, Context

mcp = FastMCP("example_mcp")

# Assume api_call is defined elsewhere

@mcp.tool()
async def interactive_tool(resource_id: str, ctx: Context) -> str:
    '''Tool that can request additional input from users.'''

    # Request sensitive information when needed
    api_key = await ctx.elicit(
        prompt="Please provide your API key:",
        input_type="password"
    )

    # Use the provided key
    return await api_call(resource_id, api_key)
```

--------------------------------

### Initialize React Project with Bash

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/web-artifacts-builder/SKILL.md

Initializes a new React project for building claude.ai artifacts. This script sets up a project with React, TypeScript, Vite, Tailwind CSS, shadcn/ui, and Parcel for bundling. It requires a project name as an argument.

```bash
bash scripts/init-artifact.sh <project-name>
cd <project-name>
```

--------------------------------

### Quick Start GSAP Timeline

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/gsap-sequencing/SKILL.md

A basic example demonstrating how to import GSAP and create a simple sequential timeline with three 'to' animations. This is useful for initiating basic animation sequences.

```javascript
import gsap from 'gsap';

const tl = gsap.timeline();

tl.to('.box1', { x: 100, duration: 0.5 })
  .to('.box2', { y: 50, duration: 0.5 })
  .to('.box3', { rotation: 360, duration: 0.5 });
```

--------------------------------

### Run Initial Tests in Worktree

Source: https://github.com/bbeierle12/skill-mcp-claude/blob/main/skills/using-git-worktrees/SKILL.md

Executes the project's test suite using the appropriate command (e.g., npm test). It's designed to be followed by a status report and conditional actions based on test results.

```bash
# Run test suite
npm test  # or appropriate command

# Report status
```