What does /draft-patterns do?

It provides UX pattern reference for forms, navigation, loading, and empty states with do/don't and code.

How do I install /draft-patterns?

Install Tonone for Claude Code via tonone.ai/get-started.

AI UX Pattern Best Practices

UX patterns are well-known and irregularly applied. Forms have validation that fires after submit when it should fire on blur. Navigation breadcrumbs disagree with the actual route. Loading states are blank screens. Empty states are blank screens. Each is a known pattern with a documented best practice; teams just do not apply it consistently.

The /draft-patterns skill is the reference guide. Forms, navigation, loading states, empty states, with do/don't tables, severity ratings (anti-pattern, common pitfall, best practice), and code examples in the project's framework.

What the guide covers

Forms: validation timing, error placement, field grouping, primary action treatment. Navigation: breadcrumbs, tabs, sidebar. Loading: skeleton, spinner, optimistic. Empty: first-time, no-results, error. Each with do/don't and code.

Tonone's /draft-patterns skill is the UX reference guide for forms, navigation, loading, and empty states with code examples.

DraftUX Design

/draft-patterns

Reference guide for UX interaction patterns — forms, navigation, loading states, and empty states. Surfaces do/don't tables with severity ratings and code examples.

When you need best practices for a specific intera…

DraftUX Design

/draft-flow

Maps a user flow as a Mermaid diagram: the sequence of screens and decision points a user moves through to accomplish a specific goal, with error states, branch conditions, and explicit entry and exit points. Grounded in the job the user is trying to accomplish rather than the features being built.

When a feature needs a flow diagram before visual …

DraftUX Design

/draft-review

Evaluates an existing flow or UI against established usability heuristics: Nielsen's ten heuristics, Fitts's law for touch targets, cognitive load principles. Identifies specific friction points with supporting rationale, rates their severity, and recommends concrete, implementable fixes. Not aesthetic opinion, structured usability analysis.

When users are dropping off at a specific point in…

PrismFrontend

/prism-component

Builds a reusable, accessible, typed UI component with every state handled: default, hover, focus, active, disabled, loading, error, and any domain-specific states. Includes prop documentation, usage examples, keyboard interaction patterns, and ARIA attribute coverage.

When adding a new reusable component to a design s…

Install

/draft-patterns ships with the Draft agent in Tonone for Claude Code.

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install Draft

$ claude plugin install draft@tonone-ai

Frequently asked questions

What does /draft-patterns do?: It provides UX pattern reference for forms, navigation, loading, and empty states with do/don't and code.
How do I install /draft-patterns?: Install Tonone for Claude Code via tonone.ai/get-started.