21st Ai
21st-dev/skill/skills/21st-aiby 21st-dev15c7436c41dcNo license12 starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 4 weeks ago
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. Use whenever the user wants to BUILD / SKETCH new UI ("sketch a pricing page", "generate a hero with 21st", "make me a <X> section"), ITERATE on a generated draft ("edit the third variant", "add a toggle to that take"), or GRAB the code of a draft ("pull that variant's code", "сгенери UI на 21st", "поправь третий вариант", "забери код того наброска"). For finding/installing existing components use the `21st-cli-use` skill; to publish your own, `21st-registry`.
- 15c7436c41dcCurrentcommit 15c7436Published Oct 9, 2026
Source and attribution
Source:21st-dev/skillinskills/21st-aiat commit15c7436
License: No license
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from 21st-dev/skill
21st Ui Review
21st-dev
Reviews existing UI for accessibility, responsiveness, and design-system defects, with safe deterministic fixes.
21st Ui Explore
21st-dev
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 interface should look. Trigger for requests such as "show me three directions", "explore alternatives", "what could this page look like", or "generate variants". Do not use for a straightforward implementation with an already-selected direction.
21st Ui Build
21st-dev
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. Trigger for requests such as "build this UI", "implement this screen", "make this page production-ready", or "use 21st to create the interface". Use 21st-ui-explore first when the visual direction is intentionally undecided, and 21st-ui-review for critique-only work.
21st Registry
21st-dev
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 existing component work, and read/replace your public profile page (bento board). Triggers when the user says "publish/share/upload this to 21st", "залей в наш регистр", "опубликуй компонент/тему/темплейт", "share with team", "make this reusable", "unpublish/edit/delete my component", "change its visibility", "find/open my old component or draft", "найди/открой мой старый компонент или драфт", "add this to my 21st profile/bento", "update my profile page", "обнови мой профиль на 21st", "добавь блок в бенто", "add controls/knobs to my demo", "сделай демо с контролами". For finding and installing existing items use `21st-cli-use`; for turning a project's design tokens into a theme use `21st-design-sync`.
21st Design Sync
21st-dev
Reads a project's shadcn/Tailwind design tokens and publishes them as a public theme on 21st.dev.
21st Cli Use
21st-dev
Guides use of the 21st CLI to search, install, and pull React/shadcn components, themes, and templates from the 21st.dev catalog.