# Craft Signals

> Consistent radii, pixel-perfect alignment, state coverage, and the details that signal design quality. Use when polishing designs, auditing quality, or evaluating whether a design is ready to ship.

- Skill: `dragoon0x/craft-signals` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/craft-signals`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/craft-signals/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/craft-signals

---


# Craft Signals

The details that separate 'designed' from 'well-designed.'

## How to use

- `/craft-signals` Apply craft quality constraints to this conversation.

## Constraints

### Consistency Checks
- MUST ensure consistent border radii from the same scale (4, 8, 12, 16, not 4 here and 5 there)
- MUST ensure alignment is pixel-perfect where intended. Near-alignment looks worse than deliberate offset.
- MUST ensure the same component looks and behaves the same everywhere it appears
- SHOULD ensure transitions share the same easing curve and follow a proportional duration scale

### State Coverage
- MUST cover all states: loading, empty, error, success, partial, overflow, truncation
- MUST design each state intentionally, not rely on browser defaults
- SHOULD ensure error messages are specific and actionable, not generic
- SHOULD ensure loading states give spatial hints about what's coming (skeletons over spinners)

### Transition Quality
- Feedback transitions (button press, toggle): 50-150ms, nearly instant
- Navigation transitions (page change, panel open): 200-400ms, noticeable but fast
- Emphasis transitions (notification, celebration): 300-600ms, deliberate
- NEVER let animation block content. If you have to wait for an animation to finish before reading, it's a bug.

### Anti-Patterns
- Inconsistent radii across component types
- Loading states that last longer than the actual load
- Error states that say "something went wrong" with no guidance
- Hover effects on every element (motion should guide attention, not create noise)