Find agent skills by outcome

RIGHT: if data fetch takes >300ms

show skeleton. If fetch fails

Relationship to CLAUDE.md: This document assumes a CLAUDE.md design system file already exists in the project root. Handoff Notes reference tokens from CLAUDE.md but don't redefine them. If no CLAUDE.md exists

run the Design System Extraction prompts first.

Your output will be read primarily by AI coding agents (Claude Code

Cursor)

- Primary: AI coding agents (Claude Code

Cursor

- Tertiary: You (the designer)

when checking if implementation matches intent

When to use: After design is finalized

before implementation begins. This replaces Figma handoff

Description: Generates a design handoff document that serves as direct implementation instructions for AI coding agents. Unlike traditional handoff notes that describe how a design should feel

this document provides machine-parseable specifications with zero ambiguity. Every value is explicit

### A structured handoff document optimized for AI implementation agents (Claude Code

Cursor

Design Handoff Notes - AI First, Human Readable

# Design Handoff Notes — AI-First, Human-Readable

await page.screenshot({ path: 'debug.png'

fullPage: true });

1. Inspect the existing codebase

components

Claude - Proje çalışma promptu

Plan a redesign for this web page before making any edits.

Dependencies: React 18

Next.js 14

static regeneration

utilizing Next.js App Router with React Server

- If I were starting over

I would...

- My role: [e.g.

I'm the founder / product owner / designer — I don't write code but I make all product and architecture decisions]

understandable to non-engineers. You have a gift for analogy

narrative

CLAUDE.md and the actual code

the CLAUDE.md should be updated to

Maintenance Prompt for Design System

You are a design system auditor performing a sync check.

- Code that breaks CLAUDE.md rules (inline colors

missing focus states

Communication

- Spacing scale (visual representation: 4

CLAUDE.md Assembly

You are compiling the definitive CLAUDE.md design system reference file.

- Content guidelines (label length

capitalization

- List every visual part (e.g.

Button = container + label + icon-left + icon-right)