mcpbeat Sign in

Draft Patterns Agent Skill

| Use when asked about UX patterns, interaction best practices, form design, validation", "navigation pattern for dashboard", "loading state UX"

763 tokens
context cost
the whole folder, loaded on every use
2
files
instructions only
0
copies elsewhere
how many repositories repackaged it
2679
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/jeremylongshore/tons-of-skills-marketplace --skill draft-patterns

What comes with it

278 bytes besides the instruction
.claude-plugin/plugin.json

The instruction itself

6 sections, as written by the author

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

  • Identify pattern category from user request (forms, navigation, loading, empty states, modals, etc.)
  • Search UX knowledge base:
   python3 -m draft_agent.uiux search --domain ux --query "{pattern_category}" --limit 5
  • Cross-reference severity ratings from results — surface Critical and High first
  • 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.

How to use it

Copy the folder

Take jeremylongshore/draft-patterns from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.