21st-dev/claude-code-plugin

Última atividade de origem registrada: 9 de setembro de 2026 às 20:02

Catálogo do SkillsMP atualizado: 29 de outubro de 2026 às 18:30

skills coletadas: 7

Estrelas no GitHub: 20
Forks no GitHub: 2

Instalar com um assistente de IA

Copie este prompt para o assistente de IA que você usa.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/21st-dev/claude-code-plugin.

README do repositório

Arquivo de origem do README: README.md

Ler o README original

Expandir README completo

# 21st — Claude Code plugin One install wires up **both** the 21st MCP server and the 21st.dev Agent Skills in Claude Code, so Claude searches, installs and publishes on 21st.dev from the terminal or via MCP tool calls, instead of hand-writing UI. ## What's inside - **MCP server `21st`** — the remote endpoint `https://21st.dev/api/mcp` (JSON-RPC over HTTP), exposing 21 tools: `search`, `get_component`, `get_theme`, bookmarks + bookmark lists, teams, `get_usage`, `generate`, and edit/delete for components/themes/templates. Metadata search is free; component code, generation and writes are metered. - **Skills** — seven focused Agent Skills that teach the `21st` CLI (`npx @21st-dev/cli`), auto-activating when the project has a `components.json`: `21st-cli-use` (search / install), `21st-ai` (generate, iterate on, and grab code from 21st AI drafts), `21st-registry` (publish & manage components/themes/templates), and `21st-design-sync` (publish the project's design tokens as a theme), plus project-aware Build, Explore, and Review workflows. ## Install 1. Set your 21st API key in the environment (get one at https://21st.dev/settings/api-keys): ```bash export API_KEY_21ST="sk_..." ``` 2. Add this marketplace and install the plugin from inside Claude Code: ``` /plugin marketplace add 21st-dev/claude-code-plugin /plugin install 21st@21st ``` (`21st@21st` = plugin `21st` from marketplace `21st`. Replace `21st-dev/claude-code-plugin` with the actual `<org>/<repo>` that hosts this directory, or a local path / git URL.) 3. Restart Claude Code (or reload) so the MCP server connects. Verify with `/mcp` — you should see the `21st` server with its full tool list (`search`, `get_component`, `get_theme`, bookmarks, teams, `generate`, …). ## Auth The MCP server reads your key from the `API_KEY_21ST` environment variable and sends it as the `x-api-key` header (see `plugins/21st/.mcp.json`). If tool calls report "Not authenticated," confirm `API_KEY_21ST` is exported in the shell that launched Claude Code, then reconnect via `/mcp`. ## Layout ``` .claude-plugin/ marketplace.json # marketplace listing this plugin plugins/ 21st/ .claude-plugin/ plugin.json # skills + mcpServers (via ${CLAUDE_PLUGIN_ROOT}) .mcp.json # remote 21st MCP (x-api-key: ${API_KEY_21ST}) skills/ 21st-cli-use/ SKILL.md # bundled Agent Skills (same source as 21st-ai/ # https://21st.dev/api/skills/<name>) SKILL.md 21st-registry/ SKILL.md 21st-design-sync/ SKILL.md ``` Bundled paths in `plugin.json` use `${CLAUDE_PLUGIN_ROOT}` so they resolve regardless of where the plugin is installed.

Carregando o README do repositório…

Skills neste repositório

Desenvolvedores de software Analistas de garantia de qualidade de software e testadores

2 categorias ocupacionais · 43% classificado

skill

ocupação

descrição

atualizado

21st-ai

sem classificação

Generate and iterate on UI with 21st AI from the terminal via the `21st` CLI (`@21st-dev/cli`): sketch a UI from a prompt, preview the variants in the browser, edit any variant in place with a natural-language change, and pull the final code into the project.…