design-import
SolidScaffolds React components out of an exported Claude Design handoff bundle and stops at files on disk: no stories, no tests, no pull request. Takes a claude.ai/design URL or a local bundle file, validates the tarball layout, reconciles the bundle's design tokens against the project's, deduplicates every proposed component against the existing codebase via component-search, pipes the survivors through the design-to-code pipeline, and records provenance so a later re-export can be diffed for drift. This is the import step by itself. Use it when you want the scaffolded code sitting in the working tree to inspect or edit yourself; when that same scaffold should carry on through test generation, browser verification and an opened PR, run /ork:design-ship instead.
Install
Quality Score: 88/100
Skill Content
Details
- Author
- yonatangross
- Repository
- yonatangross/orchestkit
- Created
- 6 months ago
- Last Updated
- today
- Language
- TypeScript
- License
- MIT
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
design-ship
One-shot pipeline that turns a claude.ai/design link into a reviewable pull request, four stages chained end to end: scaffold the components (delegated to /ork:design-import), generate Storybook stories and Playwright specs via /ork:cover, run diff-aware browser verification via /ork:expect, then open a PR whose body carries the design link, before/after screenshots, the component decision table and the coverage delta. Guards the run with a pre-flight check for a dirty tree or a protected branch, and patches the opened PR number back into the provenance record. Use it when a designer or PM hands you a design link and wants a PR back with no intermediate steps; if all you need is the components written to disk, run /ork:design-import instead.
claude-design-handoff
Implement designs handed off from Claude Design (claude.ai/design) into a real Next.js/TypeScript/React codebase with 1:1 visual fidelity AND working integration with live data and AI features. Use this whenever the user wants to build, implement, port, or "make real" a design that came from Claude Design: a handoff bundle (a folder whose README starts with "CODING AGENTS: READ THIS FIRST"), an exported .zip or standalone HTML, a set of .jsx prototype files plus a primary .html, or the user says things like "implement this design," "build this 1:1," "pixel-perfect," "I exported this from Claude Design," or "wire this design into the app." Trigger it even when the user only attaches a screenshot or PDF of a Claude Design mockup and asks to build it, and even when they describe a dashboard/report/genome/page design rather than naming Claude Design explicitly. Do not skip this skill in favor of eyeballing a screenshot and free-handing components: the failure mode it exists to prevent is exactly that.
claude-design-production-architect
Production-grade implementation workflow for Claude Design exports, handoff ZIPs, screenshots, or HTML/CSS/JSX prototypes. Use when the user wants to create a Claude Design prompt, convert Claude Design files into React/TypeScript, implement a design into a complex app/backend, wire AI-powered features safely, audit responsive/layout problems, or detect and repair AI-slop/prototype-only design patterns. Builds on claude-design-handoff by adding converter-assisted inventory, backend/AI contract discovery, responsive breakpoint triage, design issue repair, and strict verification gates.