design-ship

Solid

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.

AI & Automation 208 stars 20 forks Updated today MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# Design Ship One command: Claude Design handoff URL → reviewable GitHub PR. ```bash /ork:design-ship https://claude.ai/design/abc123 # From handoff URL /ork:design-ship /tmp/handoff-bundle.json # From local file ``` ## When to use You have a Claude Design handoff URL (or file) and want a PR opened against the current branch. No intermediate steps, no manual test generation, no manual PR drafting. For just-the-import (no tests, no PR), use `/ork:design-import` instead. ## Pipeline ``` Handoff bundle (URL or file) │ ▼ ┌──────────────────────────────┐ │ 1. /ork:design-import │ Scaffold components, write provenance │ (delegates to orchestrator │ Tokens reconciled │ for parse + dedup) │ Components written or reused └──────────┬───────────────────┘ │ ▼ ┌──────────────────────────────┐ │ 2. /ork:cover │ Storybook stories per new component │ (Storybook + Playwright) │ Playwright E2E for new routes/views └──────────┬───────────────────┘ │ ▼ ┌──────────────────────────────┐ │ 3. /ork:expect │ Diff-aware browser verification │ (CDP + ARIA-tree-first) │ Screenshots saved for PR body └──────────┬───────────────────┘ │ ▼ ┌──────────────────────────────┐ │ 4. /ork:create-pr │ PR opened with: │ │ - Claude Design URL link │ │ - Before/after screenshots │ ...

Details

Author: yonatangross
Repository: yonatangross/orchestkit
Created: 6 months ago
Last Updated: today
Language: TypeScript
License: MIT

Integrates with

Anthropic · AI LangChain · AI GitHub · DevTools FastAPI · Backend Playwright · Testing

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

design-import

Scaffolds 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.

208 Updated today

yonatangross

Code & Development Listed

ship

Push a committed feature branch, open a PR, watch CI, and (only on explicit confirmation) squash-merge and clean up. Use when the user says "ship this", "push and open a PR", "is CI green yet", or asks to merge a PR that's already open. Assumes the branch is already committed — this skill does not stage or commit anything. Does not require ending at a merge: an open, CI-green PR is a valid stopping point.

1 Updated 1 weeks ago

RonenMars

Code & Development Listed

ship

0 Updated 1 weeks ago

RonenMars