skills.rest
JStaRFilms
JStaRFilmsCOMMUNITY
Explore all skills by this author →
Website𝕏@OlulekeJOkeGitHub

stitch

Orchestrate Stitch design-to-code pipelines converting design artifacts into HTML, React components, and videos.

3|Updated Mar 10, 2026
Search Tags:#pipeline#shadcn-ui#design-to-code#remotion#stitch#react-components#stitch-mcp
One-click install
npx skills add https://github.com/JStaRFilms/Takomi_Code --skill stitch-jstarfilms
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch
Source: https://github.com/JStaRFilms/Takomi_Code/tree/main/.agent/skills/stitch
Command: npx skills add https://github.com/JStaRFilms/Takomi_Code --skill stitch-jstarfilms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Orchestrates the multi-step, design-to-code workflow for Stitch projects so teams can reliably turn UI designs into consistent sites, production-ready React components, and demo videos without manual handoffs or lost context.

Core Features & Use Cases

  • Pipeline orchestration that sequences design system extraction, prompt enhancement, iterative site generation, React conversion, and Remotion video creation.
  • Baton-based iterative build loop (next-prompt.md) for autonomous multi-page site generation and continuous integration into site/public/.
  • Tools and companion flows for shadcn/ui integration to replace primitives with polished components, plus AST-based validation for React outputs.
  • Use cases: onboard an existing Stitch project to produce a DESIGN.md and full site, convert generated HTML into typed React components, or create walkthrough videos for demos.

Quick Start

Use the stitch skill to extract a DESIGN.md, enhance your page prompt, run the stitch-loop to build pages, convert outputs to React components, and optionally render a Remotion walkthrough video.

Frequently Asked Questions about stitch

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

FAQPage Schema
How do I convert design artifacts to production React components?▼

To convert design artifacts to production React components, this Skill orchestrates a design-to-code pipeline that extracts design systems, generates HTML, and transforms it into typed React components with AST-based validation.

What is a design-to-code pipeline for iterative site generation?▼

A design-to-code pipeline for iterative site generation uses a baton-based build loop with next-prompt.md to autonomously create multi-page sites and continuously integrate them into the site/public directory.

Does this design-to-code workflow require a Stitch MCP Server?▼

Yes, this design-to-code workflow requires access to a Stitch MCP Server for generation. It optionally integrates with the Remotion CLI/MCP and shadcn tools for component integration and video rendering.

How do I integrate shadcn-ui into generated React components?▼

You can integrate shadcn-ui into generated React components using companion flows within the pipeline that replace primitive elements with polished shadcn/ui components.

Can I create walkthrough videos from generated site HTML?▼

Yes, you can create walkthrough videos from generated site HTML by running the pipeline's Remotion video creation flow, which optionally uses the Remotion CLI/MCP to render demos.

What's the best way to extract a design system from an existing project?▼

The best way to extract a design system from an existing project is to use the pipeline's design system extraction flow, which generates a DESIGN.md file to guide consistent site generation.

Related Skills

Explore More Design & Creative Skills→
Parthivjoshi29Parthivjoshi29

design-md

Analyze Stitch projects to generate a DESIGN.md design system document.

Community
Advanced
RenyEnnosRenyEnnos
1

remotion

Assemble Stitch screens into Remotion walkthrough videos with configurable timing.

Community
Advanced
vobasevobase
59

react:components

Convert Stitch HTML designs into modular React components with shadcn/ui and Tailwind.

Official
Advanced
vikingokftvikingokft

react:components

Convert Stitch design specs into React components with AST-based validation.

Official
Advanced