skills.rest
YamadaAoi
YamadaAoiCOMMUNITY
Explore all skills by this author →
GitHub

sketch-workflow

Orchestrate Sketch artboard selection into reusable component code generation.

5|Updated Mar 3, 2026
Search Tags:#workflow orchestration#component generation#typecheck#sketch#code synthesis#incremental build#routing planning
One-click install
npx skills add https://github.com/YamadaAoi/mcp-sketch --skill sketch-workflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch-workflow
Source: https://github.com/YamadaAoi/mcp-sketch/tree/main/skills/sketch-workflow
Command: npx skills add https://github.com/YamadaAoi/mcp-sketch --skill sketch-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It orchestrates an end-to-end workflow that turns selected Sketch artboards into reusable components and fully generated code, while preventing duplicate routes/files and ensuring fixes when typechecking or linting fails.

Core Features & Use Cases

  • On-demand artboard selection: Enumerates Sketch artboards, lets users choose by index/range/name (including “all”), and processes only the selected set.
  • Incremental, non-destructive generation: Reuses existing routes and skips overwriting non-empty component files; creates only missing skeletons and code.
  • Coordination of sub-skills: Delegates initialization (sketch-init), structure planning (sketch-split), and actual code generation (sketch-draw), then runs typecheck/lint and triggers repair loops when validation fails.
  • Use case: For a multi-page product design exported as a Sketch zip, generate a consistent codebase by selecting only the relevant pages, producing shared/common and page-specific components, and iteratively fixing errors until checks pass.

Quick Start

Ask the AI to run the sketch-workflow flow on your Sketch export zip, prompting me to select which pages/artboards to generate, then produce the components and code for only those selections.

Frequently Asked Questions about sketch-workflow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate code from a Sketch export zip without overwriting existing components?▼

To generate code from a Sketch export zip non-destructively, the workflow skips overwriting non-empty component files and reuses existing routes, creating only missing skeletons and drawing per-component only when needed.

Can I select specific Sketch artboards to convert to code instead of processing everything?▼

Yes, you can select specific Sketch artboards to convert to code by choosing them via index, range, or name, including an option for all. The workflow processes only the selected set to generate page-specific components.

What is the best way to orchestrate end-to-end Sketch component generation with typecheck enforcement?▼

The best way to orchestrate end-to-end Sketch component generation is to coordinate initialization, structure planning, and code generation sub-tasks, then run typecheck and lint to trigger repair loops when validation fails.

Does the Sketch-to-code workflow prevent duplicate routes during component skeleton creation?▼

Yes, the Sketch-to-code workflow prevents duplicate routes during component skeleton creation by enforcing strict guardrails, ensuring routing reuse and stopping non-empty file overwrites throughout the code synthesis process.

Why does my Sketch design export require an orchestration workflow for code synthesis?▼

A Sketch design export requires an orchestration workflow for code synthesis because multi-page designs need coordinated splitting, incremental skeleton creation, and delegated drawing to ensure consistent codebase generation without duplicate files.

Related Skills

Explore More Design & Creative Skills→
partme-aipartme-ai
610

sketch

Guide Sketch design tool workflows for artboards, symbols, styles, prototyping, and asset export.

Official
Intermediate
pantheon-orgpantheon-org
1

pr-iteration

Iteratively fix lint, typecheck, test, and build failures until CI passes.

Official
Intermediate
prestariusprestarius
1

power-phrase

Coordinate six build-session phases using native Claude Code skills.

Community
Advanced
STUkhSTUkh
27

sparq:manual-to-e2e

Convert manual test cases into Playwright or Cypress end-to-end tests.

Community
Intermediate