Skills for Real Engineers. Straight from my .agents directory.
39 skills
stitch::code-to-design
Agent skill from
Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.
How to install stitch::code-to-design
install stitch::code-to-design
# install the stitch-skills pack with the skills CLI
npx skills add google-labs-code/stitch-skills# or add only this skill to Claude Code: copy the folder
plugins/stitch-design/skills/code-to-design/
# into
~/.claude/skills/code-to-design/ (all projects)
.claude/skills/code-to-design/ (one project)
1# Code to Design23Transform your existing frontend code (React + Vite, Next.js, Angular, Vue, etc.) into a Stitch Design so you can iterate and improve it using Stitch.45This skill orchestrates three other skills in sequence:61. `extract-static-html`: Extract a single self-contained HTML file from your build output or running dev server (e.g., Vite dev server or Angular CLI `ng serve`).72. `extract-design-md`: Analyze the source code (including Angular `angular.json`, external `.html` templates, theme files, and components) to create a design system (DESIGN.md).83. `upload-to-stitch`: Upload that HTML file and the design system to your Stitch project.910## Workflow1112Follow these steps to convert your existing code.1314### Prerequisites1516- A running local dev server (e.g. `npm run dev`, `ng serve`) OR a built web application directory containing `index.html` and assets.17- Target Stitch `projectId` (use `list_projects` if unknown).1819### Steps2021#### 1. Extract Self-Contained HTML2223Delegate to the `extract-static-html` skill to generate a standalone HTML file.24Read [skills/extract-static-html/SKILL.md](../extract-static-html/SKILL.md) for detailed instructions and script usage.2526Expected output: A single file like `/path/to/extracted/standalone.html`.2728#### 2. Verify HTML (Optional — User-Driven)2930After extraction, inform the user of the output file path so they can manually31verify in a browser if desired. **Do not block on verification** — proceed32directly to Step 3.33…
Excerpt shown under the repository's Apache-2.0 license.
More skills in stitch-skills
Keep exploring
Similar skill repositories
An agentic skills framework & software development methodology that works.
15 skills
Public repository for Agent Skills
20 skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
CCCXCUGH6 skills
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
CCCXGHGM+135 skills
Production-grade engineering skills for AI coding agents.
CCCXCU25 skills