Agent skill · design visual · jeremylongshore
draft-patterns
Use when asked about UX patterns, interaction best practices, form design, navigation patterns, or loading states. Examples: "best practice for form validation", "navigation pattern for dashboard", "loading state UX
Why this skill is useful
Provides a structured approach to UX pattern identification and severity ratings that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
draft-patterns — UX Pattern Reference Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose. When to use User asks about interaction patterns, best practices, form design, navigation, or loading/empty states. Workflow 1. Identify pattern category from user request (forms, navigation, loading, empty states, modals, etc.) 2. Search UX knowledge base: 3. Cross-reference severity ratings from results — surface Critical and High first 4. Output structured do/don't table with code examples and severity Output format Anti-patterns Never recommend patterns without checking platform context (web vs. mobile vs. desktop) Never ignore severity ratings — Critical issues must be called out explicitly Never present more than 7 patterns per category without grouping Never omit code examples for implementation-level questions Delivery If output exceeds the 40-line CLI budget, invoke /atlas-report with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/draft-patterns