mapbox /mapbox-agent-skills

19 skills published from this repository. No description was given upstream, so this issue takes its voice from the chapters themselves.

19 chapters · 1 hour 2 minutes · 13,849 words

Contents

mapbox/mapbox-agent-skills · Skills Docs

# For Claude Code — copy SKILL.md into .claude/skills/
mkdir -p .claude/skills/mapbox-web-performance-patterns
curl -o .claude/skills/mapbox-web-performance-patterns/SKILL.md \
  https://raw.githubusercontent.com/mapbox/mapbox-agent-skills/main/skills/mapbox-web-performance-patterns/SKILL.md

# For Codex, Copilot, and other AGENTS.md-based tools — copy to project root
curl -O https://raw.githubusercontent.com/mapbox/mapbox-agent-skills/main/skills/mapbox-web-performance-patterns/AGENTS.md

import { useRef, useEffect } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

function MapComponent() {
  const mapRef = useRef(null);
  const mapContainerRef = useRef(null);

  useEffect(() => {
    mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN;

    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current,
      center: [-71.05953, 42.3629],
      zoom: 13
    });

    // CRITICAL: Cleanup to prevent memory leaks
    return () => {
      mapRef.current.remove();
    };
  }, []);

  return <div ref={mapContainerRef} style={{ height: '100vh' }} />;
}

Component	Purpose	Example
Agent Skills (this repo)	Provide expertise	Performance patterns, design principles
MCP Tools	Execute actions	`create_style_tool`, `list_tokens_tool`
MCP Prompts	Orchestrate workflows	`create-and-preview-style` workflow

User: "Create a high-performance map for my restaurant finder"

1. [mapbox-cartography skill] → Understands restaurant maps need high contrast, muted background
2. [mapbox-token-security skill] → Creates token with only styles:read scope, URL restrictions
3. [mapbox-style-patterns skill] → Applies POI Finder pattern
4. [MCP style_builder_tool] → Generates style JSON
5. [MCP create_style_tool] → Creates style in Mapbox account
6. [mapbox-web-performance-patterns skill] → Recommends clustering for > 1,000 markers
7. [MCP preview_style_tool] → Generates preview link

skill-name/
├── SKILL.md              # Main skill file (required)
│   ├── YAML frontmatter  # name, description
│   └── Markdown content  # Instructions and guidance
└── [optional files]      # Additional resources

# Clone repo
git clone https://github.com/mapbox/mapbox-agent-skills.git
cd mapbox-agent-skills

# Install in Claude Code
npx skills add . -a claude-code

# Or symlink for development
mkdir -p .claude
ln -s $(pwd)/skills .claude/skills

Install and provenance

Front matter

Colophon