New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Draft Patterns

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

A skill your agent uses when asked about UX patterns, interaction best practices, form design, navigation patterns, or loading states.

MITAuto-check: notesFrontend & Design

Install Draft Patterns

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill draft-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace draft-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/ai-agency/tonone/skills/draft-patterns .claude/skills/draft-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
draft-patterns
GitHub stars
2.8k
Token cost
~577 tokens
SKILL.md length
161 words
Files
2
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when asked about UX patterns, interaction best practices, form design, navigation patterns, or loading states.

  • Works in 4 steps: Identify pattern category from user… → Search UX knowledge base → Cross-reference severity ratings from… → …
  • Asked about UX patterns
  • SKILL.md covers When to use, Workflow, Output format and Anti-patterns, plus 1 more section
  • Calls python3

What it does

Draft Patterns is an agent skill from jeremylongshore/tons-of-skills-marketplace. 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"

Its SKILL.md is about 580 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `.claude-plugin/plugin.json`).

It sits in Frontend & Design, covering Forms and validation. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Asked about UX patterns
  • Interaction best practices
  • Navigation patterns

Example prompts

  • “best practice for form validation”
  • “navigation pattern for dashboard”
  • “loading state UX”
  • “/draft-patterns”

Requirements

  • Python 3
  • Pre-approved tools (allowed-tools): Read, Bash, Glob, Grep

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Identify pattern category from user request (forms, navigation, loading, empty states, modals, etc.)
  2. Search UX knowledge base
  3. Cross-reference severity ratings from results — surface Critical and High first
  4. Output structured do/don't table with code examples and severity

What it can do on your machine

Read from SKILL.md and the folder at commit 23ea8d4. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Bash
    • Glob
    • Grep

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • python3

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Draft Patterns loads about 577 tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 161 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~58
When it runs · the whole SKILL.md, loaded when a task matches
~577

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Bash, Glob, Grep

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit 23ea8d4, republished under its MIT licence (© jeremylongshore). 161 words, ~577 tokens.

Download SKILL.mdSave it as .claude/skills/draft-patterns/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
draft-patterns
description
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"
allowed-tools
Read, Bash, Glob, Grep
version
0.6.6
author
tonone-ai <hello@tonone.ai>
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.

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in plugins/ai-agency/tonone/skills/draft-patterns of jeremylongshore/tons-of-skills-marketplace.

  • SKILL.md
  • .claude-plugin/plugin.json

Open the folder on GitHubat commit 23ea8d4

Compare with similar skills

Draft Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Draft Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Draft Patterns this skilljeremylongshore/tons-of-skills-marketplace2.8k—~577Automated safety check: NotesMIT
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Accessibility Fixeribelick/ui-skills9.5k4 repos~1.2kAutomated safety check: PassMIT
Formik Form PatternsChrisWiles/claude-code-showcase6.1k3 repos~2.1kAutomated safety check: PassNone
Buefy Vue UI Componentsbuefy/buefy9.5k—~8.2kAutomated safety check: PassMIT
Formkitformkit/formkit4.8k—~1.7kAutomated safety check: PassMIT

Similar skills

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed

  • Accessibility Fixer

    ibelick/ui-skills

    Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

    9.5k GitHub starsUsed in 4 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Formik Form Patterns

    ChrisWiles/claude-code-showcase

    Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.

    6.1k GitHub starsUsed in 3 repos~2.1k tokens
    Frontend & DesignAuto-check passed

  • Buefy Vue UI Components

    buefy/buefy

    Rules for writing Vue 3 templates with Buefy components on Bulma CSS: install options, prop conventions, b-field wrapping, tables, theming and dialogs.

    9.5k GitHub stars~8.2k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Formkit

    formkit/formkit

    A skill your agent uses when working with FormKit forms, validation, schema, or custom inputs in React, Vue, or Nuxt projects.

    4.8k GitHub stars~1.7k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • HTML Coder

    TokenRhythm/opensquilla

    Guides semantic, accessible HTML work: pages, forms, media and HTML5 APIs, plus how to deliver a runnable webpage project with a preview.

    7.1k GitHub stars~1.4k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo

  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes

  • Analyzing Text With NLP

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to perform natural language processing and text analysis using the nlp-text-analyzer plugin.

    2.8k GitHub starsUsed in 1 repo~819 tokens
    Auto-check passed

  • Building Neural Networks

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill allows AI assistant to construct and configure neural network architectures using the neural-network-builder plugin.

    2.8k GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed

  • Detecting Data Anomalies

    jeremylongshore/tons-of-skills-marketplace

    Process identify anomalies and outliers in datasets using machine learning algorithms.

    2.8k GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check passed

  • Explaining Machine Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill enables AI assistant to provide interpretability and explainability for machine learning models.

    2.8k GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed

  • Optimizing Prompts

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill optimizes prompts for large language models (llms) to reduce token usage, lower costs, and improve performance.

    2.8k GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed

Categories

Questions about Draft Patterns

What does Draft Patterns do?

A skill your agent uses when asked about UX patterns, interaction best practices, form design, navigation patterns, or loading states. Draft Patterns is an agent skill from jeremylongshore/tons-of-skills-marketplace. Use when asked about UX patterns, interaction best practices, form design, navigation patterns, or loading states.

When should I use Draft Patterns?

Draft Patterns fits situations like: asked about UX patterns; interaction best practices; navigation patterns.

How do I install Draft Patterns in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill draft-patterns -a claude-code`. Or copy the skill folder (plugins/ai-agency/tonone/skills/draft-patterns in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/draft-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Draft Patterns in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill draft-patterns -a codex`. Or copy the skill folder (plugins/ai-agency/tonone/skills/draft-patterns in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/draft-patterns in your project. Codex loads it when a task matches its description.

Can I use Draft Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill draft-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/draft-patterns, .gemini/skills/draft-patterns, .github/skills/draft-patterns and .opencode/skills/draft-patterns in your project.

What does Draft Patterns need to run?

Going by SKILL.md and its folder, Draft Patterns needs the command-line tools its instructions call (python3). Our summary lists: Python 3. Its frontmatter pre-approves these tools: Read, Bash, Glob, Grep.

Does Draft Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Draft Patterns safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Draft Patterns use?

Draft Patterns is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Draft Patterns use?

About 577 tokens (SKILL.md is roughly 2.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Draft Patterns?

Skills that share tags, products or a category with Draft Patterns: MCP Development (coollabsio/coolify, 63k stars), Accessibility Fixer (ibelick/ui-skills, 9.5k stars), Formik Form Patterns (ChrisWiles/claude-code-showcase, 6.1k stars) and Buefy Vue UI Components (buefy/buefy, 9.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Draft Patterns?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,821 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 8, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.