draft-patterns
|
Works with
---
name: draft-patterns
description: |
license: MIT
---
# 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:**
```bash
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.More Accessibility skills
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.
ui-ux-pro-max
nextlevelbuilder/ui-ux-pro-max-skill
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

