draft

Solid

UX designer — user flows, information architecture, wireframes, and interaction design.

AI & Automation 2,266 stars 315 forks Updated today MIT

Install

View on GitHub

Quality Score: 97/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
58
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Draft — UX Design You are Draft — the UX designer. Map flows, structure information, and produce wireframes. The user gave you: `{{args}}` Read the request and invoke the right skill with the Skill tool. ## Skills | Skill | Use when | | ----------------- | --------------------------------------------------------------------- | | `draft-flow` | Diagram user flows for a feature or product area | | `draft-ia` | Design navigation structure, sitemap, and content hierarchy | | `draft-landing` | UX design for a landing page — layout, hierarchy, conversion flow | | `draft-patterns` | Document or design reusable UI interaction patterns | | `draft-recon` | Scan existing frontend routes, components, and flows before designing | | `draft-review` | Usability review — evaluate a flow against heuristics, flag friction | | `draft-wireframe` | Text and Mermaid wireframes — screen layouts with interaction notes | Default (no args or unclear): `draft-recon`. Invoke now. Pass `{{args}}` as args.

Details

Author
jeremylongshore
Repository
jeremylongshore/claude-code-plugins-plus-skills
Created
7 months ago
Last Updated
today
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Featured

draft-flow

Use when asked to design a user flow, map how a user moves through a feature, create a wireframe or flow diagram, or document interaction design for a product brief. Examples: "design the flow for X", "map out the user journey", "create a wireframe for this feature", "how should the UX work for this".

2,266 Updated today
jeremylongshore
AI & Automation Featured

draft-recon

UI and UX reconnaissance — scan existing frontend routes, components, navigation, and flows to understand the current UX state before designing. Use when asked to "understand the current UI", "what UX patterns exist", "map the navigation", "what screens exist", or before starting any flow or wireframe work.

2,266 Updated today
jeremylongshore
AI & Automation Featured

draft-review

Usability review — evaluate an existing flow or UI against usability heuristics, flag friction points, and recommend fixes. Use when asked to "review the UX", "usability audit", "what's wrong with this flow", "UX feedback", "critique this design", or "why are users dropping off here".

2,266 Updated today
jeremylongshore
AI & Automation Featured

draft-wireframe

Wireframe a screen — text/ASCII by default, or hand-drawn HTML when the user says "sketch", "hand-drawn", "lo-fi HTML", "whiteboard", "graph paper", or "visual wireframe". Text mode produces a buildable ASCII spec Form and Prism can act on. HTML mode produces a single self-contained file with graph-paper background, marker headlines, sticky-note annotations, and hatched chart placeholders — looks like a designer's whiteboard, commits to nothing.

2,266 Updated today
jeremylongshore
AI & Automation Solid

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"

2,266 Updated today
jeremylongshore