Tech Lead Web Skill

An AI agent orchestration skill for building pixel-perfect websites from Figma designs.

What it does

This skill transforms Claude into a Tech Lead that orchestrates multiple Opus agents to build complete websites from Figma designs. It manages:

• Task coordination using Claude's built-in task system
• Sequential agent execution for each section/component
• Automated QA reviews comparing implementation with Figma
• Correction loops until pixel-perfect match is achieved

Requirements

• Claude Code with Opus model access
• Figma MCP configured and connected
• A Figma design with accessible node URLs

Installation

npx add-skill emalorenzo/tech-lead-web

Or manually copy the SKILL.md to your .claude/skills/ directory.

Usage

In Claude Code, run:

/tech-lead-web

The Tech Lead will then ask you for:

1. Figma URLs for each section
2. Tech stack details (Next.js, Tailwind, etc.)
3. Responsive breakpoints to implement

How it works

1. Discovery     -> Gather project requirements
2. Planning      -> Create tasks for each section
3. Execution     -> Launch agents sequentially
4. QA Review     -> Automated visual comparison
5. Corrections   -> Fix issues, re-run QA
6. Completion    -> Report final status

Architecture

The skill enforces a clean architecture pattern:

• Sections live in route folders (e.g., src/app/(home)/hero-section.tsx)
• Components are reusable and live in src/components/
• Spacing is controlled by page.tsx, not individual sections

Key Features

• Pixel Perfect Standard: Every pixel must match Figma
• Task-Based Coordination: All agents share the same task state
• Context Verification: Each section is verified against adjacent sections
• Micro-interactions: Hover, active, and focus states are required

License

MIT

Author

@emalorenzo