Pipeline
Documentation
handsOff orchestrates six specialized AI agents that turn your Figma designs into production-ready code.
Quick Start
Clone the repository and run the orchestration pipeline to transform your Figma designs into production-ready code.
Clone the repository and install dependencies:
git clone https://github.com/Darry17/handsoff-skills.git
cd handsoff-skills
npm installRun the orchestration pipeline:
# The orchestrator will guide you through:
# 1. Connecting your Figma file
# 2. Selecting the target framework
# 3. Running the six specialized agentsSkills Reference
Complete breakdown of all skills owned by each agent in the pipeline.
Orchestrator
intent-validator Validates user intent before pipeline starts
stage-gate Validates stage entry requirements
pipeline-guardian Validates skill readiness by checking dependencies
orchestrator Main pipeline coordination and context management
Researcher
framework-detector Scans for evidence of frameworks in the codebase
design-system-detector Identifies token and theme sources (Tailwind config, CSS variables, etc.)
docs-fetcher Fetches official documentation for the detected framework version
setup-wizard Interactive guide for manual framework/design system selection when detection is inconclusive
Designer
figma-reader Primary Figma node extraction via API
token-extractor Maps colors, typography, and spacing scales to design tokens
layout-analyzer Translates Figma constraints to flexbox/grid intent
component-mapper Identifies and names atom/molecule component candidates
section-detector Organizes page structure into landing page sections
design-system-creator Creates tailored design systems when no existing one is found
ux-auditor Validates UX quality against the original design
Developer
code-generator Writes component logic and markup using detected framework
token-applier Injects token constants/variables into generated code
responsive-adapter Applies layout overrides for mobile and tablet breakpoints
scaffold-writer Creates initial directory structure and base config files
QA Specialist
qa-validator Accessibility validation (WCAG 2.1 AA compliance)
fidelity-checker Visual comparison between generated code and Figma design
preview-builder Assembles renderable bundles for interactable previews
issue-reporter Aggregates all feedback into a unified structured report
SEO Specialist
semantic-auditor Checks heading hierarchy and layout semantics
meta-writer Crafts titles, descriptions, and Open Graph tags
performance-advisor Suggestions for lazy loading and asset optimization
sitemap-writer Generates sitemap.xml and robots.txt files
Detailed Workflow
Step-by-step execution flow from initialization to SEO optimization.
Initialize
The Orchestrator starts by collecting your project configuration: Figma file URL, target framework, and output directory. This becomes the shared context passed to all agents.
Research
The Researcher analyzes your codebase to detect the framework and design system. It fetches relevant documentation to ensure all subsequent agents work with accurate API references.
Design Analysis
The Designer connects to your Figma file via the API, extracts all design tokens (colors, typography, spacing), and maps components and their variants to code structures.
Code Generation
The Developer generates idiomatic code using the detected framework. It applies all design tokens, implements responsive layouts, and follows your project's coding conventions.
Validation
The QA Specialist runs accessibility audits, verifies design fidelity against the Figma source, and builds preview deployments for visual review.
SEO Optimization
The SEO Specialist audits the semantic structure, generates appropriate meta tags, and validates performance optimizations.