Skills
收录 96,770 个为 Agent 打包的专项能力与操作指引，复制一行命令即可安装。
设计与 UI
将图像（或一组图像参考，包括截图、样稿、Figma URL、在线网站）转换为一对相互对应的设计系统产物：`docs/design.md`（面向编码 Agent，采用 YAML 令牌和文字说明，并遵循 Google 的开放 [design.md](https://github.com/google-labs-code/design.md) 格式）以及 `docs/design.html`（面向用户阅读的独立令牌驱动样式指南，可实时呈现所有令牌和组件）。分析图像，提出有针对性的澄清问题，推导设计令牌（颜色、字体、间距、圆角、组件），并写入这两个文件。完全独立，无需其他文档或 skill。创始人说“create a design system”“design from image”“translate image to design”“create design.md”“image to design system”“extract design tokens”，或分享图像但没有其他明确意图时使用。
UI/UX 设计智能工具。包含 50 种风格、21 套配色、50 种字体搭配、20 种图表和 9 种技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui）。操作：规划、构建、创建、设计、实现、审查、修复、改进、优化、增强、重构和检查 UI/UX 代码。项目：网站、落地页、仪表板、管理面板、电商、SaaS、作品集、博客、移动应用、.html、.tsx、.vue、.svelte。元素：按钮、模态框、导航栏、侧边栏、卡片、表格、表单、图表。风格：玻璃拟态、黏土拟态、极简主义、粗野主义、新拟态、便当网格、深色模式、响应式、拟物设计、扁平设计。主题：配色、无障碍、动画、布局、字体排版、字体搭配、间距、悬停、阴影、渐变。集成：通过 shadcn/ui MCP 搜索组件和示例
使用 `21st` CLI（`@21st-dev/cli`）从终端将自己的作品发布到 21st.dev 并进行管理：将 React 组件发布到团队库，发布 CSS 主题或模板条目，编辑/取消发布/删除已发布内容，列出并重新打开现有组件作品，以及查看/替换公开个人资料页（bento board）。用户说“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”或“сделай демо с контролами”时触发。查找和安装现有条目请使用 `21st-cli-use`；将项目设计令牌转为主题请使用 `21st-design-sync`。
当用户想设计、部署或衡量 Apple Custom Product Pages（CPP）时使用——这类替代 App Store 产品页面会向来自特定 URL（通常是广告活动或社交帖子）的用户显示不同的截图、预览视频和促销文案。用户提及“Custom Product Page”“CPP”“alternate product page”“App Store URL variant”“ASA CPP”“campaign-specific landing page”“product page per audience”“App Store Connect CPP”“ppoUrl”“?cpp=”参数，或“向不同广告受众显示不同截图”时使用。默认页面的 App Store A/B 测试请参阅 ab-test-store-listing。将付费广告活动导向 CPP，请参阅 apple-search-ads 或 ua-campaign。
一本书 → 一幅清晰的「取景框」意向画面 → 一张 2050 图书馆借书卡（PNG）。取景框 = 作者从哪个角度看什么问题、看到了哪幅画面；卡上有真实封面、作者头像、书目信息。取景框 block 用费曼式讲解把这幅意向画面讲得通俗又准确；图解 block 用 AI 生图把这幅画面画出来，继刚是固定主角（从其墨像参考生成、认得出的他）。图解风格：吉田诚治式绘本感（异世界日常空间、暖光斜射、治愈又精致）。浅色光学玻璃卡身、强调色从封面动态提取、宽高自适应。合上书记住这幅画面，就没白读。Use when user says '取景框卡', '图书馆卡', 'library card', '书卡', '铸书卡', '一本书一句话一张卡', '/ljg-library', or provides a book name and wants it distilled into one collectible card. NOT FOR 拆书结构分析（用 ljg-book）、纯文字金句（用 ljg-card -b）、信息图（用 ljg-card -i）、视觉笔记（用 ljg-card -v）。
将 Chakra UI 项目从 v2 迁移到 v3，涵盖包变更、codemod、Provider 设置、颜色模式、属性重命名、复合组件、主题、recipes 和 Next.js 更新。用户升级 Chakra UI 版本、升级后遇到重大变更、转换旧版 v2 模式（ColorModeScript、useColorModeValue、styleConfig、extendTheme、isDisabled、colorScheme、@chakra-ui/icons、framer-motion 依赖）、修复复合组件模式，或询问 Chakra UI v2 与 v3 的差异时，均使用此技能，即使用户没有明确说“迁移”或“升级”。
适用于所有视觉输出的 UI/UX 质量关卡和构建指南，包括落地页、仪表盘、Web 应用、作品集和工具。ui-design 仍是主要入口。集成模式：ui-design 主干 + taste-skill 覆盖层。- ui-design 负责工程质量（技术路线选择、组件库策略、无障碍性、响应式设计、主题、性能、预览交付）- 在 ui-design 工作流中调用 taste-skill 进行风格决策（Brief Inference、Design Dials、Anti-slop 硬性规则）。项目生成视觉 HTML/CSS/JS 时，必须与 project-builder 一起使用。
当用户要求打造品牌，或任务符合下方示例时使用。从任何输入构建实用的品牌形象——创意、现有网站、参考品牌列表、产品照片，或“我想重塑 X 品牌”。对于 founder-kit 用户，默认采用快速品牌方案，并可选择升级为完整的 14–16 页指南。适用于希望建立品牌形象、但不需要完整电商上线（无 Shopify、产品列表或社交媒体发布）的用户。触发语：“帮我打造一个品牌”“为我创建一个品牌”“设计品牌形象”“[X] 的品牌指南”“我想要一本品牌手册”“从零开始创建品牌”“[创意] 的品牌”“我想要一个有 [X] + [Y] 感觉的品牌”“重塑我的[事物]品牌”“[事物]的视觉形象”“build-a-brand”。
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。