Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/anthropics/skills/llms.txt

Use this file to discover all available pages before exploring further.

Development and technical skills provide Claude with expert knowledge for software engineering tasks, from building integrations to testing applications.

​
Available Skills

MCP Builder

Create high-quality Model Context Protocol servers for integrating external services

Skill Creator

Build, test, and optimize new Anthropic Skills

Webapp Testing

Test local web applications using Playwright for browser automation

Web Artifacts Builder

Build complex React artifacts with shadcn/ui and modern frontend tools

​
MCP Builder

Create MCP servers that enable LLMs to interact with external services. When to use:
  • Building MCP servers for API integrations
  • Creating tools to connect Claude with external services
  • Implementing Model Context Protocol in Python or TypeScript
Key features:
  • Four-phase development workflow
  • Support for Python (FastMCP) and TypeScript (MCP SDK)
  • Best practices for tool design and naming
  • Comprehensive evaluation framework
Development process:
  1. Deep Research and Planning
    • Study MCP protocol documentation
    • Review framework documentation
    • Plan API coverage and tool selection
  2. Implementation
    • Set up project structure
    • Implement core infrastructure
    • Create tools with proper schemas
    • Add annotations (readOnlyHint, destructiveHint, etc.)
  3. Review and Test
    • Code quality review
    • Build and test with MCP Inspector
    • Verify type coverage and error handling
  4. Create Evaluations
    • Generate 10 complex evaluation questions
    • Test effectiveness with realistic scenarios
    • Ensure read-only, verifiable answers
Recommended stack:
  • Language: TypeScript (best SDK support, broad compatibility)
  • Transport: Streamable HTTP for remote, stdio for local
  • Focus on comprehensive API coverage
View MCP Builder Documentation →

​
Skill Creator

Create and iteratively improve Anthropic Skills. When to use:
  • Creating a new skill from scratch
  • Updating or optimizing existing skills
  • Running evaluations to test skill performance
  • Optimizing skill descriptions for better triggering
Key features:
  • Iterative development workflow
  • Qualitative and quantitative evaluation
  • Visual eval viewer for reviewing outputs
  • Description optimization for triggering accuracy
Creation workflow:
  1. Capture Intent
    • What should the skill do?
    • When should it trigger?
    • What output format is expected?
  2. Write SKILL.md
    • Name and description (critical for triggering)
    • Progressive disclosure (metadata → instructions → resources)
    • Keep under 500 lines when possible
  3. Test Cases
    • Create 2-3 realistic test prompts
    • Run with-skill and baseline comparisons
    • Save to evals/evals.json
  4. Evaluate Results
    • Launch eval viewer for qualitative review
    • Run quantitative benchmarks
    • Gather user feedback
  5. Iterate
    • Improve based on feedback
    • Rerun tests
    • Repeat until satisfied
  6. Optimize Description
    • Generate 20 trigger eval queries
    • Run optimization loop
    • Apply best-performing description
Skill structure: 
skill-name/
├── SKILL.md (required)
│   ├── YAML frontmatter
│   └── Markdown instructions
└── Bundled Resources (optional)
    ├── scripts/    - Executable tools
    ├── references/ - Documentation
    └── assets/     - Templates, files
View Skill Creator Documentation →

​
Webapp Testing

Test local web applications using Playwright browser automation. When to use:
  • Testing frontend functionality
  • Debugging UI behavior
  • Capturing browser screenshots
  • Viewing browser logs and console output
Key features:
  • Native Python Playwright scripts
  • Helper scripts for server lifecycle management
  • Support for static HTML and dynamic webapps
  • Reconnaissance-then-action pattern
Testing approach: For static HTML:
  1. Read HTML file to identify selectors
  2. Write Playwright script using selectors
For dynamic webapps:
  1. Start server (using with_server.py helper)
  2. Navigate and wait for networkidle
  3. Take screenshot or inspect DOM
  4. Identify selectors from rendered state
  5. Execute actions with discovered selectors
Example workflow: 
# Single server
python scripts/with_server.py --server "npm run dev" --port 5173 -- python test.py

# Multiple servers (backend + frontend)
python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python test.py
Best practices:
  • Always wait for networkidle on dynamic apps
  • Use descriptive selectors (text=, role=, CSS, IDs)
  • Close browser when done
  • Use bundled scripts as black boxes
View Webapp Testing Documentation →

​
Web Artifacts Builder

Build complex claude.ai HTML artifacts using React and modern frontend tools. When to use:
  • Creating complex artifacts requiring state management
  • Building artifacts with routing or shadcn/ui components
  • Not for simple single-file HTML/JSX artifacts
Key features:
  • React 18 + TypeScript + Vite
  • Tailwind CSS + shadcn/ui (40+ components)
  • Parcel bundling to single HTML file
  • Path aliases (@/) configured
Development workflow:
  1. Initialize Project 
    bash scripts/init-artifact.sh <project-name>
cd <project-name>
  2. Develop Artifact
    • Edit generated files
    • Use shadcn/ui components
    • Apply Tailwind styling
  3. Bundle to Single HTML 
    bash scripts/bundle-artifact.sh
    Creates bundle.html - self-contained artifact
  4. Share with User
    • Display bundled HTML in conversation
    • User views as claude.ai artifact
  5. Test (Optional)
    • Use Playwright or other testing tools
    • Test after presenting, if needed
Design guidelines: Avoid “AI slop” aesthetics:
  • Don’t use excessive centered layouts
  • Avoid purple gradients
  • No uniform rounded corners everywhere
  • Never default to Inter font
Tech stack:
  • React 18 + TypeScript (via Vite)
  • Tailwind CSS 3.4.1
  • 40+ shadcn/ui components pre-installed
  • All Radix UI dependencies included
  • Node 18+ compatibility
View Web Artifacts Builder Documentation →

​
Common Patterns

​
Server Development

MCP Builder provides comprehensive guidance for building external integrations with proper tool design.

​
Skill Development

Skill Creator enables meta-skill creation - building new capabilities for Claude through iterative testing.

​
Testing & QA

Webapp Testing provides browser automation for verifying frontend functionality.

​
Complex Artifacts

Web Artifacts Builder enables sophisticated React applications bundled as single-file artifacts.