New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Handoff To Claude Code

by manalkaff in manalkaff/opendesign

A skill your agent uses when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase.

MITAuto-check passedDevelopment

Install Handoff To Claude Code

skills CLI
$ npx skills add manalkaff/opendesign --skill handoff-to-claude-code -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install manalkaff/opendesign handoff-to-claude-code --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/manalkaff/opendesign.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/handoff-to-claude-code .claude/skills/handoff-to-claude-code && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
handoff-to-claude-code
GitHub stars
261
Token cost
~1k tokens
SKILL.md length
566 words
Files
1
Skills in repo
9
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase.

  • Works in 9 steps: Overview. One short paragraph: what the… → About the design files. Disclaimer up… → Fidelity. State explicitly whether the… → …
  • The user asks to hand a finished design off to a developer
  • SKILL.md covers Folder setup, README structure, Hard rules and README tone
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Handoff To Claude Code is an agent skill from manalkaff/opendesign. Use when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase. Produces a self-sufficient handoff folder with a spec README, zipped for download.

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Technical documentation. The repository describes itself as: claude.ai/design open-sourced! The licence is MIT.

When your agent uses it

  • The user asks to hand a finished design off to a developer
  • A coding agent for implementation in a real codebase

Example prompts

  • “/handoff-to-claude-code”

Workflow steps

9 steps, taken from the first numbered list in SKILL.md.

  1. Overview. One short paragraph: what the feature is and what it accomplishes. No design history.
  2. About the design files. Disclaimer up front, verbatim in spirit: the HTML files in this bundle are design references, not production code…
  3. Fidelity. State explicitly whether the designs are high-fidelity (pixel-perfect; recreate exactly) or low-fidelity (wireframe; use for…
  4. Screens / views. For every screen in the design, document
  5. Interactions and behavior. Click handlers, navigation flows, animations (duration, easing, animated properties), hover states, loading…
  6. State management. State variables, transitions and their triggers, data-fetching requirements.
  7. Design tokens. Colors (with hex), spacing scale, type scale, border radii, shadows. Flat list, not prose.
  8. Assets. Every image, icon, font, or other asset used in the design, with its source.
  9. Files. List the HTML/CSS/JS files included in the bundle and what each one corresponds to.

What it can do on your machine

Read from SKILL.md and the folder at commit cecd9bb. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Handoff To Claude Code loads about 1k tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 566 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~58
When it runs · the whole SKILL.md, loaded when a task matches
~1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from manalkaff/opendesign at commit cecd9bb, republished under its MIT licence (© manalkaff). 566 words, ~1,018 tokens.

Download SKILL.mdSave it as .claude/skills/handoff-to-claude-code/SKILL.md (or your agent's skills folder).
name
handoff-to-claude-code
description
Use when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase. Produces a self-sufficient handoff folder with a spec README, zipped for download.

Loaded when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase. The output of this skill is a self-sufficient handoff folder, zipped and presented to the user for download.

Folder setup

  • Create a folder at ./opendesign/handoffs/<feature-slug>/. Slug describes the feature (e.g. onboarding-flow, settings-redesign). Never handoff/, export/, or similar generics at the project root.
  • Copy every relevant HTML prototype, component file, image, font, and referenced asset into the folder. The developer must not have to trace paths back into the main project tree.
  • Generate README.md at the root of the folder. Everything the developer needs to act on lives in the README.

README structure

Every section below is required. Use these exact headings in this order.

  1. Overview. One short paragraph: what the feature is and what it accomplishes. No design history.
  2. About the design files. Disclaimer up front, verbatim in spirit: the HTML files in this bundle are design references, not production code to copy directly. The developer's task is to recreate the designs in the target codebase's existing framework (React, Vue, SwiftUI, native, etc.) using its established patterns and libraries. If no codebase exists yet, pick the most appropriate framework for the project.
  3. Fidelity. State explicitly whether the designs are high-fidelity (pixel-perfect; recreate exactly) or low-fidelity (wireframe; use for layout and flow, apply the existing design system for styling). This call changes how much of the rest of the README is authoritative.
  4. Screens / views. For every screen in the design, document:
    • Name and purpose.
    • Layout — grid structure, flex direction, widths, heights, margins, padding. Exact values.
    • Components. For each: position and size, exact colors (hex), typography (family, size, weight, line-height, letter-spacing), border radius, shadows, borders, hover / active / focus states, exact copy.
  5. Interactions and behavior. Click handlers, navigation flows, animations (duration, easing, animated properties), hover states, loading states, error states, form validation rules, responsive behavior where applicable.
  6. State management. State variables, transitions and their triggers, data-fetching requirements.
  7. Design tokens. Colors (with hex), spacing scale, type scale, border radii, shadows. Flat list, not prose.
  8. Assets. Every image, icon, font, or other asset used in the design, with its source.
  9. Files. List the HTML/CSS/JS files included in the bundle and what each one corresponds to.
Show full SKILL.md (183 more words)Show less

Hard rules

  • Be extremely precise about measurements, colors, and typography. The developer is implementing from this document, not eyeballing the HTML.
  • State up front that the HTML is a reference, not the shipping artifact. This is the single most important thing for the developer to understand — without it they may paste the prototype into the codebase and ship it.
  • If the design uses brand assets, tell the developer to pull from the codebase's existing brand system, not to copy the embedded copies from the HTML.
  • Before finishing, ask the user whether they want screenshots of the designs included in the bundle. Do not include them by default.
  • After writing the folder, zip it and present the archive to the user for download. Name the zip <feature-slug>.zip.

README tone

  • Write for a developer who was not in the design conversation. No "as we discussed." No assumed context.
  • Imperative and concrete. "Use #246BFD for primary buttons" beats "the primary button should use a blue tone."
  • No rationale or design justification unless the developer needs it to implement correctly. This is a spec, not a pitch.

© manalkaff, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/handoff-to-claude-code of manalkaff/opendesign.

Open the folder on GitHubat commit cecd9bb

Compare with similar skills

Handoff To Claude Code next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Handoff To Claude Code compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Handoff To Claude Code this skillmanalkaff/opendesign261—~1kAutomated safety check: PassMIT
Dark Architecture Diagram BuilderCocoon-AI/architecture-diagram-generator7.4k1 repos~2.1kAutomated safety check: PassMIT
Writing Commentswithastro/astro63k—~2.7kAutomated safety check: PassCustom licence
Moonbit Docs Maintainermoonbitlang/moonbit-docs2.4k—~1.1kAutomated safety check: PassCustom licence
README Badges and Headersjal-co/shieldcn916—~4.3kAutomated safety check: PassMIT
Orchardcore Docs WriterOrchardCMS/OrchardCore8.2k—~1.1kAutomated safety check: PassBSD-3-Clause

Similar skills

  • Dark Architecture Diagram Builder

    Cocoon-AI/architecture-diagram-generator

    Creates dark-themed system, cloud, security and network architecture diagrams as self-contained HTML files with inline SVG and CSS.

    7.4k GitHub starsUsed in 1 repo~2.1k tokens
    DevelopmentAuto-check passed

  • Writing Comments

    withastro/astro

    Official

    How to write JSDoc (/ /) and inline (//) comments in the Astro codebase, for contributors reading the source — not end users.

    63k GitHub stars~2.7k tokensUpdated today
    DevelopmentAuto-check passed

  • Moonbit Docs Maintainer

    moonbitlang/moonbit-docs

    A skill your agent uses when maintaining the moonbitlang/moonbit-docs repository, including Sphinx docs under next/, MoonBit examples under next/sources/, error-code documentation, gettext…

    2.4k GitHub stars~1.1k tokensUpdated 17 days ago
    DevelopmentAuto-check passed

  • README Badges and Headers

    jal-co/shieldcn

    Adds shadcn/ui-styled README badges, badge groups, download charts, header banners and sponsor or contributor grids using the shieldcn service.

    916 GitHub stars~4.3k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Orchardcore Docs Writer

    OrchardCMS/OrchardCore

    Authors OrchardCore documentation — MkDocs Material pages, module README docs, nav entries, admonitions, tabbed content, and redirects.

    8.2k GitHub stars~1.1k tokensUpdated today
    DevelopmentAuto-check passed

  • Chisle Audit

    JayPokale/Chisle

    One-shot efficiency audit of a file, diff, or whole repo across BOTH axes at once: over-engineered code (reinvented stdlib, needless abstractions, speculative config) AND bloated prose (verbose…

    633 GitHub stars~687 tokensUpdated 2 days ago
    DevelopmentAuto-check passed

More from manalkaff/opendesign

All 9 skills in this repo

  • Create Design System

    manalkaff/opendesign

    A skill your agent uses when the user asks to produce a reusable design system or UI kit from an existing brand, codebase, or product.

    261 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Make A Deck

    manalkaff/opendesign

    A skill your agent uses when the user asks for a slide presentation.

    261 GitHub stars~1.2k tokensUpdated 3 mo ago
    Auto-check passed

  • Opendesign

    manalkaff/opendesign

    A skill your agent uses when starting any design task — HTML pages, slide decks, interactive prototypes, UI kits, brand systems.

    261 GitHub stars~2.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Frontend Design

    manalkaff/opendesign

    A skill your agent uses when designing without an existing brand system.

    261 GitHub stars~836 tokensUpdated 3 mo ago
    Auto-check passed

  • Make Tweakable

    manalkaff/opendesign

    A skill your agent uses when the user wants in-design controls for toggling variants, swapping colors, editing copy, or flipping feature flags directly inside a design artifact.

    261 GitHub stars~571 tokensUpdated 3 mo ago
    Auto-check passed

  • Wireframe

    manalkaff/opendesign

    A skill your agent uses when the user wants to explore the design space quickly — many rough ideas, not one polished direction.

    261 GitHub stars~650 tokensUpdated 3 mo ago
    Auto-check passed

Categories

Questions about Handoff To Claude Code

What does Handoff To Claude Code do?

A skill your agent uses when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase. Handoff To Claude Code is an agent skill from manalkaff/opendesign. Use when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase.

When should I use Handoff To Claude Code?

Handoff To Claude Code fits situations like: the user asks to hand a finished design off to a developer; A coding agent for implementation in a real codebase.

How do I install Handoff To Claude Code in Claude Code?

Run `npx skills add manalkaff/opendesign --skill handoff-to-claude-code -a claude-code`. Or copy the skill folder (skills/handoff-to-claude-code in manalkaff/opendesign) into .claude/skills/handoff-to-claude-code in your project. Claude Code loads it when a task matches its description.

How do I install Handoff To Claude Code in Codex?

Run `npx skills add manalkaff/opendesign --skill handoff-to-claude-code -a codex`. Or copy the skill folder (skills/handoff-to-claude-code in manalkaff/opendesign) into .agents/skills/handoff-to-claude-code in your project. Codex loads it when a task matches its description.

Can I use Handoff To Claude Code in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add manalkaff/opendesign --skill handoff-to-claude-code -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/handoff-to-claude-code, .gemini/skills/handoff-to-claude-code, .github/skills/handoff-to-claude-code and .opencode/skills/handoff-to-claude-code in your project.

What does Handoff To Claude Code need to run?

SKILL.md names no scripts, command-line tools or credentials: Handoff To Claude Code is instructions for the agent only.

Does Handoff To Claude Code access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Handoff To Claude Code safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Handoff To Claude Code use?

Handoff To Claude Code is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Handoff To Claude Code use?

About 1k tokens (SKILL.md is roughly 4.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Handoff To Claude Code?

Skills that share tags, products or a category with Handoff To Claude Code: Dark Architecture Diagram Builder (Cocoon-AI/architecture-diagram-generator, 7.4k stars), Writing Comments (withastro/astro, 63k stars), Moonbit Docs Maintainer (moonbitlang/moonbit-docs, 2.4k stars) and README Badges and Headers (jal-co/shieldcn, 916 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Handoff To Claude Code?

manalkaff (a GitHub user) maintains it in manalkaff/opendesign, which has 261 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on June 27, 2026.

Source: manalkaff/opendesign on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.