skills.rest
codesour-design
codesour-designCOMMUNITY
Explore all skills by this author →
GitHub

source-command-handoff

Create interactive HTML handoffs documenting Gravity prototype user flows and components.

Updated Apr 8, 2026
Search Tags:#html#design system#figma#user stories#handoff#prototype#component inspector
One-click install
npx skills add https://github.com/codesour-design/gravity --skill source-command-handoff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: source-command-handoff
Source: https://github.com/codesour-design/gravity/tree/main/.agents/skills/source-command-handoff
Command: npx skills add https://github.com/codesour-design/gravity --skill source-command-handoff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill transforms completed Gravity HTML prototypes into documented interactive handoffs, reducing the effort needed to explain UI behavior, design decisions, and product flows to development teams.

Core Features & Use Cases

  • Interactive Handoff Generation: Creates an HTML handoff variant with developer tooling, user story tours, component inspection, and inline design notes.
  • Prototype Documentation: Maps screens, selectors, components, domain models, dependencies, and scenarios into structured handoff metadata.
  • Use Case: A product designer can document a Gravity prototype sprint by adding guided user story walkthroughs, inspectable UI components, and implementation notes for engineers.

Quick Start

Ask the skill to create an interactive HTML handoff for a completed Gravity prototype and guide the required documentation flow.

Frequently Asked Questions about source-command-handoff

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an interactive HTML handoff for a completed prototype?▼

To create an interactive HTML handoff, the Skill transforms completed Gravity HTML prototypes into documented interactive handoffs, generating an HTML variant equipped with developer tooling, user story tours, component inspection, and inline design notes for engineers.

What is an interactive prototype handoff and what does it include?▼

An interactive prototype handoff is an HTML variant of a Gravity prototype that maps screens, selectors, components, domain models, and scenarios into structured metadata, providing guided user story walkthroughs and UI inspection tooling for development teams.

Do I need specific configuration files to document user flows for developers?▼

Yes, documenting user flows for developers requires integration with shared handoff tooling, existing prototype HTML structures, and handoff configuration files to enable browser verification and interactive component inspection.

Can I add user story tours and implementation notes to an existing HTML prototype?▼

Yes, you can add user story tours and implementation notes to an existing Gravity HTML prototype by applying this Skill to map UI behavior and design decisions directly into interactive handoff metadata for engineering teams.

What's the best way to document design decisions and domain models for engineers?▼

The best way to document design decisions and domain models is to generate an interactive HTML handoff that maps dependencies and scenarios into structured metadata equipped with inline design notes for engineers.

Related Skills

Explore More Design & Creative Skills→
FoundationForgeFoundationForge

design-handoff

Generate developer handoff documentation from Figma URLs or design descriptions.

Official
Intermediate
MazenMradMazenMrad
1

bmad-testarch-atdd

Generate red-phase API and E2E test scaffolds from acceptance criteria.

Community
Advanced
Clos01Clos01
3

dashboard

Generate single-screen HTML dashboard prototypes with inline SVG charts.

Community
Intermediate
yamk12nfuyamk12nfu

figma-make-spec

Generate a formal SPEC.md from Figma Make prototype URLs through guided interviews.

Community
Advanced