Skills

Skills give AI assistants project-aware context about Plex UI — component APIs, the 9-step size scale, color system, variants, icons, and import conventions. Once installed, your agent generates correct Plex UI code on the first try.

For example, you can ask your AI assistant to:

• "Add a login form with email and password fields."
• "Create a settings page with tabs, inputs, and a save button."
• "Build a dashboard with a sidebar, stat cards, and a data table."
• "Add a date range picker with size lg."
• "Switch to dark mode."

The skill source lives at skills/plexui/skills/plex-ui and ships with UI metadata for both Codex and Claude Code.

Install

Claude Code

Plex UI is a Claude Code plugin marketplace. Inside Claude Code:

/plugin marketplace add plex-ui/docs
/plugin install plex-ui@plex-ui

Or from the shell:

claude plugin marketplace add plex-ui/docs
claude plugin install plex-ui@plex-ui

Claude Code fetches the skill via sparse git-subdir clone, registers it under the plex-ui namespace, and auto-invokes it when you work with @plexui/ui or Plex UI components. To update later: /plugin marketplace update plex-ui.

npx degit plex-ui/docs/skills/plexui/skills/plex-ui .claude/skills/plex-ui

Codex

npx degit plex-ui/docs/skills/plexui/skills/plex-ui .agents/skills/plex-ui

Codex auto-detects skills under .agents/skills/ and reads the agents/openai.yaml we ship for the display name, icon, brand color, and default prompt shown in the Codex UI. See the Codex Agent Skills docs.

Cursor, Windsurf, Copilot, and others

These agents use rule files rather than the SKILL.md format. Use the single-file AGENT.md setup instead — same knowledge delivered as .cursor/rules/plexui.mdc, AGENTS.md, or CLAUDE.md depending on the agent.

Manual install

Clone or download the skills/plexui/skills/plex-ui folder and place it wherever your agent loads skills from.

Official catalogs

The commands above work today via our GitHub repo. To make Plex UI discoverable from inside the agent itself — browsing the official skill/plugin catalogs — the skill needs to be submitted to each vendor's registry. These submissions are manual and go through forms or pull requests, so they're not auto-updated from this repo.

Anthropic official marketplace

Submit the plex-ui plugin via the in-app form at claude.ai/settings/plugins/submit or platform.claude.com/plugins/submit. The form takes the marketplace URL (github.com/plex-ui/docs); our marketplace.json supplies the rest (name, description, keywords, icon). Once accepted, users see Plex UI in the in-app plugin browser without needing to run /plugin marketplace add.

Docs: Submit your plugin to the official marketplace.

OpenAI Codex curated catalog

The Codex catalog lives at github.com/openai/skills, split into .system, .curated, and .experimental. To get Plex UI into the .curated tier (installable by name with $skill-installer plex-ui), open a pull request against that repo adding the skill under skills/.curated/plex-ui/ — our agents/openai.yaml supplies the UI metadata.

Docs: Codex Agent Skills. Follow the repo's CONTRIBUTING.md for the exact submission checklist.

Aggregators

Third-party aggregators like agentskills.io index any skill that follows the open SKILL.md standard. If they add a submission flow, the skill at skills/plexui/skills/plex-ui/SKILL.md is ready as-is.

What's Included

The skill provides your AI assistant with the following knowledge:

Component Reference

Full API reference for all 35+ components: Button, Input, Select, Sidebar, Menu, Dialog, Tabs, DatePicker, and more. Includes props, composition patterns, and common usage examples.

Size Scale & Conventions

The unified 9-step size scale (3xs to 3xl), how the size prop works across controls, and when to use each size. Ensures consistent sizing across forms, toolbars, and layouts.

Color System & Theming

Semantic color props (primary, secondary, danger, etc.), variant props (solid, soft, outline, ghost), Tailwind utility classes from Plex UI tokens (text-primary, bg-surface), and the three-layer design token architecture.

Dark Mode

How Plex UI uses CSS light-dark() for automatic dark mode — no dark: prefixes needed. Theme toggling via color-scheme.

Icon Library

Import patterns for 460+ built-in icons, auto-sizing behavior inside components, and the iconSize override prop.

Import Patterns

Subpath import convention (@plexui/ui/components/Button), PlexUIProvider setup, and hook imports.

How It Works

1. Project detection — The skill activates when your AI assistant encounters @plexui/ui imports or Plex UI components in the codebase.
2. Context injection — The assistant receives Plex UI's component APIs, conventions, and patterns as project context.
3. Pattern enforcement — The assistant follows Plex UI conventions: subpath imports, semantic color props, unified size scale, and automatic dark mode.
4. Correct on first try — Instead of guessing API shapes, the assistant uses the exact props and patterns from the skill.

Learn More

• AI Setup — single-file AGENT.md for agents without SKILL.md support
• MCP Server — interactive component discovery over MCP
• Installation — manual package setup
• Components — full component documentation
• Design Tokens — token architecture