Publishing Skills

Create, document, and share your design skills with the TokenUI community.

What is a Skill?

A skill is a self-contained package of design knowledge. It can include UI components, design patterns, coding conventions, or any reusable pattern that helps developers build consistent interfaces.

Skills are stored as SKILL.md files with YAML frontmatter describing the skill's metadata, followed by markdown documentation explaining how to use it.

Getting Started

1

Create Your Skill

Start by navigating to the Publish pageor run the CLI command:
npx tokenui.sh publish
2

Write Documentation

Write your skill documentation in the code editor. The main file is alwaysSKILL.md, which contains the YAML frontmatter and markdown content.
3

Add Code Files

You can add additional files to your skill — examples, component code, styles, etc. Organize them in a folder structure that makes sense for your skill.
4

Add Metadata

Fill in your skill's metadata: name, slug, description, category, and upload a preview thumbnail. This information helps others find and understand your skill.
5

Submit

Submit your skill for review. You can save it as a draft to keep working on it, or submit it for approval to appear in the public gallery.

Skill Lifecycle

Draft

When you first create a skill, it starts as a draft. Drafts are private — only you can see them. Use this stage to iterate on your design, documentation, and examples until you're ready to share.

Pending

When you submit your skill, it enters the pending state. An admin will review your submission to ensure it meets quality standards and doesn't contain inappropriate content. This usually takes 1-2 business days.

Approved

Once approved, your skill appears in the public gallery. Other users can discover it, install it, and use it in their projects. You'll be able to see analytics like views, stars, and downloads in your Studio dashboard.

Rejected

If your skill doesn't meet the guidelines, it will be rejected with feedback on what needs to be changed. You can edit your skill and resubmit it.

Writing Good Documentation

Frontmatter

Every SKILL.md file starts with YAML frontmatter between triple dashes:

SKILL.md
---
name: my-skill
description: A brief description of what this skill does
---

Content Structure

Good skill documentation includes:

  • Description — What the skill does and when to use it
  • Usage — How to tell AI agents to use this skill
  • Examples — Code examples showing the skill in action
  • API Reference — If applicable, document props/options
  • Best Practices — Guidelines for using the skill correctly

Tips for AI-Optimized Skills

  • Be specific and clear in your instructions
  • Include example prompts that users can copy
  • Document common mistakes and how to avoid them
  • Provide context on when NOT to use the skill

Creating a Demo Preview

A good preview helps users understand what your skill does before installing it. In the publish flow, you can:

  • Upload a screenshot or image showing the skill in action
  • Write HTML demo code that renders an interactive preview
  • Toggle between desktop and mobile views to show responsiveness

The demo HTML can include Tailwind CSS classes — they'll be rendered in the preview using the Tailwind CDN.

Studio Dashboard

Your Studio is where you manage all your skills. From here you can:

  • View all your skills organized by status (draft, pending, approved, rejected)
  • See analytics: views, stars, and CLI downloads
  • Edit existing skills
  • Delete skills you no longer want to share

Best Practices

Focus

A great skill does one thing well. Don't try to pack too many unrelated patterns into a single skill. If you have multiple related patterns, consider creating a skill for each or a comprehensive design system skill.

Accessibility

Document accessibility considerations. If your skill includes UI components, mention keyboard navigation, screen reader support, and ARIA attributes.

Flexibility

Make your skill adaptable. Document how users can customize the patterns to match their own design systems.

Testing

Test your skill documentation with actual AI agents. Make sure the instructions are clear enough for an AI to follow correctly.

Ownership & Licensing

You retain ownership of your skills. By publishing, you grant TokenUI users a license to use your skill according to the license you specify. We recommend using MIT license for maximum compatibility, but you can choose any license you prefer.

You can remove your skills from the gallery at any time. However, users who have already installed the skill will retain their copy.