21st-dev/claude-code-plugin

최근 기록된 소스 활동: 2026년 9월 9일 20:02

SkillsMP 카탈로그 업데이트: 2026년 10월 29일 18:30

수집된 skills: 7

GitHub 스타: 20
GitHub 포크: 2

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

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

저장소 README

README 원본 파일: README.md

README 원본 보기

README 전체 펼치기

# 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.

저장소 README를 불러오는 중…

이 저장소의 skills

소프트웨어 개발자 소프트웨어 품질 보증 분석가·테스터

직업 카테고리 2개 · 43% 분류됨

skill

직업 분류

설명

업데이트

21st-ai

미분류

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.…

원문 언어: 영어

2026-09-09

21st-cli-use

미분류

Search, install and pull code from the 21st.dev catalog with the `21st` CLI (`@21st-dev/cli`): find React/shadcn components, themes and templates, print a component's code or a theme's CSS, install an item into the project, or generate a new component with…

원문 언어: 영어

2026-09-09

21st-ui-build

미분류

Build or substantially change production UI using the current project's design context, existing components, and grounded 21st inspiration. Use when implementing a page, section, component, responsive redesign, or visual polish in an existing web project.…

원문 언어: 영어

2026-09-09

21st-ui-explore

미분류

Explore and compare multiple meaningfully different UI directions grounded in the current project's design system and 21st inspiration. Use when the user wants options, variants, concepts, a redesign direction, visual experimentation, or is unsure how a new…

원문 언어: 영어

2026-09-09

21st-registry

소프트웨어 개발자

Publish your own work to 21st.dev and manage it from the terminal with the `21st` CLI (`@21st-dev/cli`): publish a React component to a team library, publish a CSS theme or a template listing, edit / unpublish / delete your published items, list and reopen…

원문 언어: 영어

2026-08-26

21st-ui-review

소프트웨어 품질 보증 분석가·테스터

Review existing UI against the project's design context, accessibility expectations, responsive behavior, interaction quality, and high-confidence production rules. Use for UI audits, design QA, frontend review, accessibility review, consistency checks, or…

원문 언어: 영어

2026-08-26

21st-design-sync

소프트웨어 개발자

Look at the current project's design (its shadcn / Tailwind CSS variables and color tokens) and publish it to the 21st.dev community as a shareable theme, using `21st publish-theme`. Use when the user says "publish my theme", "share our design as a 21st…

원문 언어: 영어

2026-07-10

수집된 skill 7개 중 7개를 표시합니다.