AgentStack
Sign in Publish
MCP servers Skills Toolkits Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Craft Signals

skill-dragoon0x-taste-skills-craft-signals · by Dragoon0x

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.

↗ Repository
— No reviews yet
0 installs
2 views
0.0% view→install

Install

$ agentstack add skill-dragoon0x-taste-skills-craft-signals

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of Craft Signals? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

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)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet — be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Agent Skills