draft-patterns — UX Pattern Reference

SkillMedia

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"

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the draft-patterns — UX Pattern Reference skill

What this skill tells your AI

The instructions your AI receives, as published by tonone-ai/tonone in skills/draft-patterns/SKILL.md and read by ahel’s review.

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:
    python3 -m draft_agent.uiux search --domain ux --query "{pattern_category}" --limit 5
    
  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

┌─ UX Patterns — {pattern_category} ──────────────────────────────────────────┐
│ Category    │ Issue              │ Do                  │ Don't    │ Severity │
├─────────────┼────────────────────┼─────────────────────┼──────────┼──────────┤
│ {category}  │ {issue}            │ {do}                │ {dont}   │ Critical │
│ {category}  │ {issue}            │ {do}                │ {dont}   │ High     │
│ {category}  │ {issue}            │ {do}                │ {dont}   │ Medium   │
└─────────────┴────────────────────┴─────────────────────┴──────────┴──────────┘

Code example ({do_example_label}):
{code_block}

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.

Signals

GitHub stars
71
Forks
9
Last commit
Aug 2026
Advanced
Catalog kind
skill
Gateway key
draft-patterns
Source
github.com/tonone-ai/tonone