handoff-to-claude-code

Developer handoff package

Repository: asgeirtj/system_prompts_leaks
Last source activity: August 19, 2026 at 22:47
Detected SKILL.md language: English
Stars: 63,829
Forks: 10,469

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/asgeirtj/system_prompts_leaks --skill handoff-to-claude-code

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

workflow-authoring

Reference for writing a Workflow tool script (script API and gotchas, resume, quality patterns, worked examples). Load before authoring a script for a workflow the user already opted into; it does not itself authorize running one.

2026-08-27

artifact-capabilities

Runtime capabilities a published Artifact page can be granted — behavior static HTML cannot provide on its own, such as the page reading live or connected data, remembering what people do on it (a poll, a sign-up sheet, a checklist, a document edited in place — it saves new versions of itself), keeping state shared across viewers, knowing who is viewing, asking Claude a question of its own, storing files people add, or handing the viewer a file to save. Serves this user's live capability roster and the typed call definitions. Load it whenever the user asks for an artifact needing any such runtime behavior.

2026-08-25

artifact-design

Design guidance and fundamentals for Artifacts.

2026-08-25

View all from this repository

Handoff to Claude Code

Create a comprehensive handoff package so a developer using Claude Code can implement this design in a real codebase.

Steps

Create a handoff folder in the project directory:

mkdir -p <project-folder>/design_handoff_<feature-name>/

Use a descriptive feature name derived from the design (e.g., design_handoff_onboarding_flow, design_handoff_settings_redesign).

Create a README.md in the handoff folder with the following sections:

README.md Structure

# Handoff: <Feature Name> ## Overview Brief description of what this design is for and what it accomplishes. ## About the Design Files State clearly that the files in this bundle are **design references created in HTML** — prototypes showing intended look and behavior, not production code to copy directly. Explain that the task is to **recreate these HTML designs in the target codebase's existing environment** (React, Vue, SwiftUI, native, etc.) using its established patterns and libraries — or, if no environment exists yet, to choose the most appropriate framework for the project and implement the designs there. State clearly whether the mocks/prototypes created in this conversation are: : Pixel-perfect mockups with final colors, typography, spacing, and interactions. The developer should recreate the UI pixel-perfectly using the codebase's existing libraries and patterns. : Wireframes or rough layouts showing structure and flow. The developer should use these as a guide for layout and functionality but apply the codebase's existing design system for styling. For each screen or view in the design: : What this screen is called : What the user does here : Detailed description of the layout (grid structure, flex directions, widths, heights, margins, padding) : List each UI component with: Position and size Colors (exact hex values if hifi) Typography (font family, size, weight, line-height, letter-spacing) Border radius, shadows, borders Hover/active/focus states Content/copy (exact text used) Click handlers and navigation flows Animations and transitions (duration, easing, properties) Hover states Loading states Error states Form validation rules Responsive behavior (if applicable) What state variables are needed State transitions and their triggers Any data fetching requirements List all design values used: Colors (with hex values) Spacing scale Typography scale Border radius values Shadow values List any images, icons, or other assets used in the design and where they came from. List the HTML/CSS/JS files in the project that contain the design, so the developer can reference them.