Skills
收录 97,222 个为 Agent 打包的专项能力与操作指引,复制一行命令即可安装。
设计与 UI
Kuroco 与 Vite / React / Nuxt.js / Next.js 等前端框架的集成模式(SPA、SSG、SSR 的实现)。覆盖 Kuroco 站点的界面设计与设计改进(抑制模式化的 AI 表达、Kuroco 与前端的职责分工)、SPA / SSG 中的内容展示(包括需要 SSR、ISR 时切换发布目标)、登录、会员注册与认证状态管理(Cookie 认证、动态访问令牌)、第三方 Cookie 问题的规避、XSS 防护、发布目标的确定(默认为 KurocoFront,指定 Vercel、Codex Sites 时的确认事项)、部署到 KurocoFront(kuroco_front.json、GitHub 集成、Admin MCP 直接部署)。在涉及 Kuroco 站点界面设计与外观修改、前端与 Kuroco 集成、认证状态管理、静态生成与动态路由、部署、发布目标选择的请求时使用。
审查现有 React Native / Expo 应用的设计——运行 AI-tells grep 检查清单、按十类评分标准检查各界面、对每个界面做 Trunk Test,并产出带影响等级的发现项,附设计评分与 AI Slop Score 以及回归基线。默认仅报告;可选进入修复模式。当被要求审查、审计、点评或对应用的设计或 UI 质量做 QA 时使用。构建新界面请使用 mobile-taste;实际重设计请使用 mobile-redesign-screen 或 mobile-redesign-app。
提出并生成 React Native 应用的设计系统——语义化颜色 token(浅色 + 深色)、带 Dynamic Type 边界的字号阶梯、圆角/阴影/间距刻度、触感反馈与动效基调——以 SAFE/RISK 提案形式给出,然后写入实际的主题文件(NativeWind 配置或 StyleSheet token)和 MOBILE-DESIGN.md。适用于启动应用的视觉识别、被要求提供主题/调色板/设计 token,或应用使用内联样式且需要 token 系统时。构建界面请使用 mobile-taste;审查现有应用请使用 mobile-design-review。
个人前端审美、功能驱动的信息组织与持续演化的 UI 设计指南。Use when designing, building, polishing or reviewing this user's frontend UI, dashboards, charts, forms or admin panels; choosing task-fit interactions such as joint rankings, rollups and drill-down; following 我的品味/个人审美; or recording approved feedback. Applies scoped preferences and interaction patterns across projects. Not for backend-only work.
将线上网页克隆到本地 Next.js + Tailwind CSS 项目中,用于快速原型设计。每当用户分享 URL 或截图并希望在本地复制、重新设计或迭代该页面时,使用此 skill——无论用户说"clone this site"、"make a prototype based on this page"、"recreate this UI"、"build something that looks like this",还是只是粘贴一个链接并要求你把它变成代码。当用户想要添加新页面、修改现有页面,或扩展此前由该 skill 创建的原型项目时也会触发。即使用户只是说"I want to build a page like X"并附上参考链接或图片,此 skill 同样适用。
审计页面能被 AI Agent 和具备 Agent 能力的浏览器操作的程度——语义化交互控件(使用 <button>/<a href> 而非 div/span 点击处理器)、具名按钮和链接、带标签的表单控件、不使用 javascript: href、主要内容不在 iframe 内,以及 WebMCP 检测——遵循 Google 的生成式 AI 指南和 web.dev 的 agent-friendly websites 指南。模块 M22 "Agent-readiness"。为 AI Visibility 分数提供输入(权重 4,全部为方向性)。
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 搜索组件和示例
当用户想要生成营销图片或撰写图片提示词时使用 — 个人品牌肖像、徽标和字母组合、活动主视觉、日常社交图形、编辑艺术、信息图、网页主视觉模型图和引言图形。从项目上下文读取品牌标识,撰写符合品牌的提示词,在存在 API 密钥时通过 gpt-image-2 生成,否则输出可直接粘贴用于 DALL-E 3、MidJourney、Leonardo 或 Ideogram 的提示词。触发词:'design an image'、'make me a logo'、'MidJourney prompt'、'key visual for the campaign'、'generate a graphic for this post'、'I need a visual and have no designer'。不适用 — 向人类设计师简报静态图,见 `42-image-brief-global`;幻灯片序列,见 `43-carousel-brief-global`;品牌规则本身,见 `46-brand-guideline-global`;为完成的设计评分,见 `47-design-review-global`。
使用 Nano Banana Pro AI 与智能迭代优化创建专业信息图,通过 Gemini 3.1 Pro 进行自动化质量审查,并可选使用 Perplexity Sonar 研究阶段获取有来源的数据——支持 10 种信息图类型、8 种行业风格以及色盲友好配色。适用于请求制作信息图、数据故事图、统计海报、对比图表、时间线、流程/操作说明可视化或列表/社交图,且需要将设计版式与数字搭配使用的情况。技术流程图、CONSORT/PRISMA、通路图或架构图请改用 alterlab-scientific-schematics;非信息图类插画请使用 alterlab-generate-image;数据集的精确图表请使用 alterlab-matplotlib。属于 AlterLab Academic Skills 套件。
Beamer LaTeX 幻灯片工作流:创建、编译、审查并打磨学术演示。每当用户处理 Beamer .tex 幻灯片,或要求创建幻灯片、制作演示、准备讲座、构建演讲,或从论文 PDF 或 Markdown 生成 Beamer 幻灯片时,使用本技能。涵盖:创建、编辑、编译、校对、视觉审查、教学审查、TikZ 图表、图片提取以及全面的质量检查。触发于:beamer、slides、lecture、presentation、seminar talk、conference talk、defense slides、tikz、compile latex、proofread slides、slide review、讨论班、论文讲解。不要触发于:powerpoint、pptx、PPT、做PPT——请改用 powerpoint-slides 技能。
为 tryelements.dev 注册表创建新的 UI 元素。使用场景:(1) 添加新的 UI 组件(按钮、输入框、卡片),(2) 构建集成组件(Clerk、Stripe、Uploadthing),(3) 创建主题相关元素,(4) 任何 shadcn 风格的注册表组件。重要:对于带变体(icon/wordmark/logo + dark/light)的 logo 组件,请改用 logo-with-variants 技能。本技能包含脚手架、注册表 schema 和组件模式。实现前务必使用 Context7 MCP 获取最新的依赖文档。
从任意设计参考构建完整、可供 AI 使用的设计系统——一份风格描述(“暗色模式金融科技风,带玻璃拟态”)、现有应用的截图/图片,或 Figma 链接。输出结构化的设计 token(JSON)、CSS 变量、Markdown 规范和 HTML 预览页——全部设计为可直接输入 AI 编码 Agent(如 frontend-design),从而无需猜测即可产出视觉一致的界面。当有人提出以下需求时使用本技能:创建设计系统、提取设计 token、构建组件库、生成风格指南、定义配色方案或字体层级、统一 UI,或为 AI 辅助开发准备设计上下文。当有人说“让我的应用看起来一致”、“我需要一个主题”、“设置设计变量”、“建立风格基础”或“从这个设计里提取风格”时也应触发。
将资深设计师的判断力应用于任何前端 UI —— React、HTML/CSS、Framer 或任何 Web 组件。此技能源于对 AI Agent 设计判断力究竟什么有效、什么无效的亲身研究:不是理论准则,而是通过真实项目和 AI 生成输出的迭代反复验证的原则。当用户构建、审查或迭代 UI 代码且设计质量至关重要时使用。触发条件包括:创建组件或页面、审查现有 UI、征求设计反馈、构建仪表盘或数据展示、调整视觉层级、开发 Framer 组件,或任何输出包含渲染界面元素的任务。即使用户只是要求 "make it look better" 或 "clean this up",也应使用此技能 —— 它包含区分有意设计与生成式平庸的原则。
一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。
