Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add manalkaff/opendesign --skill handoff-to-claude-codegit clone --depth 1 https://github.com/manalkaff/opendesignWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/manalkaff/opendesign/handoff-to-claude-code)<a href="https://agentmods.dev/skills/manalkaff/opendesign/handoff-to-claude-code"><img src="https://agentmods.dev/badge/skills/manalkaff/opendesign/handoff-to-claude-code.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00052 | $0.00890 |
| Opus 5 | $0.00026 | $0.00445 |
| Sonnet 5 | $0.00010 | $0.00178 |
| Haiku 4.5 | $0.00005 | $0.00089 |
Grade A, and why
handoff-to-claude-code scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 44 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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). Neverhandoff/,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.mdat 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.
- Overview. One short paragraph: what the feature is and what it accomplishes. No design history.
- 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.
- 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.
- 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.
- 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.
- State management. State variables, transitions and their triggers, data-fetching requirements.
- Design tokens. Colors (with hex), spacing scale, type scale, border radii, shadows. Flat list, not prose.
- Assets. Every image, icon, font, or other asset used in the design, with its source.
- Files. List the HTML/CSS/JS files included in the bundle and what each one corresponds to.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 44 lines · 52 tokens per session scan A a91550132c0b
handoff-to-claude-code is a skill published in the GitHub repository manalkaff/opendesign (255 stars, last pushed 2mo ago), licensed MIT. It adds 52 tokens to every session and 890 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
html-ppt-hermes-cyber-terminal
OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
html-ppt-taste-brutalist
16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).
accessibility
Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.
make-resume
A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.