mcpField

Skills

收录 96,981 个为 Agent 打包的专项能力与操作指引,复制一行命令即可安装。

设计与 UI

T
tab-navigation
tab-navigation
dembrandt / dembrandt-skills

标签页在共享上下文中切换视图。适用于设计包含多个数据视图的标签页布局、设置页面、详情视图或仪表盘。

设计与 UI702
L
localization-l10n
localization-l10n
mindrally / skills

实现本地化 (l10n) 最佳实践,使应用适配特定地区、语言和文化偏好。

开发700
E
efecto-web-design
efecto-web-design
pablostanley / efecto-plugin

使用 Efecto 设计网页和应用 UI:创建会话、用 JSX 和 Tailwind CSS 构建布局、管理画板,并通过 MCP 工具推送实时设计改动。当用户要求「设计一个页面」「搭建落地页」「做个网站」「设计仪表盘」「做个 UI」或任何视觉设计任务时使用。需要 Efecto MCP 服务。

设计与 UI699
F
frontend-design
frontend-design
aladicf / better-web-ui

创建独具特色、可用于生产的前端界面,层级清晰、系统设计考究、实现精致,避免千篇一律的 AI 风格。当用户想要构建或重新设计网页、流程、组件或整个应用界面时使用,或者当其他 better-web-ui 技能在开始前需要共享的项目设计上下文时使用。

设计与 UI698
C
coordinated-data-views
coordinated-data-views
dembrandt / dembrandt-skills

将表格与其地图、图示、时间线或图表一起展示,并双向同步选择。适用于数据同时以两种表示形式出现的场景。

设计与 UI697
P
page-cro
page-cro
alirezarezvani / claude-skills

当用户希望优化、改进或提升任何营销页面的转化率时使用——包括首页、落地页、定价页、功能页或博客文章。当用户说“CRO”“转化率优化”“这个页面转化不好”“提升转化”“为什么这个页面没效果”时,也使用本技能。对于注册/报名流程,见 signup-flow-cro;对于注册后的激活,见 onboarding-cro;对于注册之外的表单,见 form-cro;对于弹窗/模态框,见 popup-cro。

营销与增长695
R
responsive-web-design
responsive-web-design
secondsky / claude-skills

使用 Flexbox、CSS Grid 和媒体查询,以移动端优先的方式构建自适应网页界面。适用于创建设备多端布局、实现灵活的 UI 系统或确保跨浏览器兼容性。

设计与 UI695
A
authentic-product-representation
authentic-product-representation
dembrandt / dembrandt-skills

产品视觉素材必须展示真实产品和真实数据。在构建落地页、主视觉区域、截图或演示面板时使用。

设计与 UI693
K
k2f-invoice
k2f-invoice
suzheng / k2f

根据行项目、费率、客户信息、税务规则和条款生成可直接付款的发票——结构化设计,让金额可核对,AP 部门无需反复沟通即可付款。当用户要求开票、账单、应收款、形式发票(pro forma invoice)或带品牌标识的发票 PDF 时使用。由 K2F 格式和引擎驱动,以 AI 原生设计和最高美学标准创建发票。K2F 专为 AI Agent 打造,让它们专注于语义内容和设计意图,同时自动处理排版、字体排印和格式等复杂问题。

文档处理693
K
k2f-menu
k2f-menu
suzheng / k2f

将场所记录、菜品清单和品牌线索转化为易浏览的餐饮菜单:清晰的分类、统一的菜品结构,以及契合氛围的视觉意图——而不是宣传单、食谱书或网站站点地图。当用户要求餐厅菜单、咖啡馆菜单、酒吧或酒单、外烩单、客房送餐卡、品鉴菜单,或用于酒店印刷品或 PDF 的季节性插页时使用。以 K2F 格式和引擎驱动,打造 AI 原生设计且达到最高美学标准的菜单。K2F 专为 AI Agent 打造,让它们专注于语义内容和设计意图,同时自动处理布局、字体排印和格式复杂度。

文档处理693
R
react-joyride
react-joyride
gilbarbara / react-joyride

关于实现、配置和调试 React Joyride v3 引导式导览的指南。当用户提到 joyride、引导式导览、新手引导导览、演示流程、提示气泡导览、分步指引、产品导览,或希望依次高亮 UI 元素时,请使用此技能。也用于排查导览问题,如提示气泡不显示、未找到目标元素或受控模式问题。本技能涵盖 useJoyride 钩子、Joyride 组件、步骤配置、事件、控件、自定义组件和样式。

开发692
D
domain-expert-configuration
domain-expert-configuration
dembrandt / dembrandt-skills

面向非开发者专家的设置界面 — 领域语言、合理的默认值、按专业概念分组。在设计设置面板、求解器配置或约束编辑器时使用。

设计与 UI691
A
antv-x6-editor
antv-x6-editor
antvis / chart-visualization-skills

当用户想要创建、定制或排查 X6 v3 图编辑器问题时,请使用此技能。触发词包括:任何提及「X6」「antv x6」「@antv/x6」「X6 editor」「X6 图编辑」「流程图」「DAG」「ER图」「实体关系图」「血缘图」「组织架构图」「UML类图」「flowchart」「DAG diagram」「ER diagram」「lineage graph」「org chart」「network topology」「stencil」「drag-and-drop editor」「port connection」「node port edge」「graph editor」「diagram editor」,或涉及 X6 节点/边样式、插件(Selection、History、Clipboard、Keyboard、MiniMap、Scroller、Snapline、Stencil、Dnd、Transform、Export)、交互(平移、滚轮、连线、嵌入)、HTML 形状节点、自定义形状、序列化或布局的请求。调试 X6 渲染错误、v2→v3 迁移或编辑器交互问题时同样适用。不适用于 G2 统计图表、G6 网络图或 S2 数据透视表。

开发690
A
art-direction
art-direction
rampstackco / claude-skills

为广告活动、摄影、插画、视频和品牌体验提供直接的视觉与创意指导。当用户希望向摄影师下达需求说明、指导插画师、策划创意活动、构思视觉概念,或评估创意作品是否契合时,使用此技能。触发词包括 art direction、photo brief、photography brief、illustration brief、campaign concept、creative concept、visual direction、mood board、look and feel、visual treatment、video direction。当用户已确认品牌识别,但需要将其延伸为具体创意交付物时,也会触发。若需求是面向整个项目的美学方向说明(本技能会将它作为输入),请改用 `creative-direction`。

创意与媒体690
H
hig-platforms
hig-platforms
raintree-technology / hig-doctor

面向平台专属设计的 Apple 人机界面指南。当用户询问「为 iOS 设计」「iPad 应用设计」「macOS 设计」「tvOS」「visionOS」「watchOS」「Apple 平台」「该选哪个平台」「平台差异」「平台专属惯例」或多平台应用设计时,使用此技能。当用户说「iPad 和 iPhone 应该分别设计吗」「我的应用在 visionOS 上如何运行」「macOS 应用有什么不同」「把我的应用移植到另一个平台」「通用应用设计」或「这个平台使用哪些输入方式」时也使用。相关参考:hig-foundations 共享的设计基础,hig-patterns 交互模式,hig-components-layout 导航结构,hig-components-content 内容展示。

设计与 UI690
D
disney-animation-rule-skill
disney-animation-rule-skill
vibe-motion / skills

将迪士尼的 12 条原则作为程序化动画的实用设计与工程规则加以应用。适用于创建、改进、审查或调试代码驱动的运动表现(涵盖 web、SVG、canvas、React、Remotion、游戏、UI、角色、镜头或 3D 场景);尤其当运动显得僵硬、毫无重量感、机械、含义不清,或物理正确但视觉表现薄弱时。

创意与媒体689
K
k2f-one-pager
k2f-one-pager
suzheng / k2f

将笔记、规格或发布信息转化为单页简报,让利益相关方围绕一个故事达成一致 —— 问题、方案、证据、范围或变更日志 —— 而不是幻灯片、宣传单或多页 PRD。当用户要求 one-pager、产品简报、高管摘要页、方案概览、专项简报或可打印的单页规格说明时使用。以 K2F 格式与引擎驱动,用 AI 原生设计和最高美学标准生成单页文档,专为 AI Agent 打造,让它们专注于语义内容和设计意图,同时自动处理排版、字体排印与格式等复杂问题。

文档处理689
S
shadcn-ui-flutter
shadcn-ui-flutter
nank1ro / flutter-shadcn-ui

受 shadcn/ui 启发的综合性 Flutter UI 库。提供高质量、可定制且无障碍的组件,包括按钮、卡片、表单等。在构建 Flutter UI、实现设计系统或需要具体组件用法示例时使用此技能。

设计与 UI689
B
behavioural-analytics
behavioural-analytics
owl-listener / designer-skills

以设计师的视角解读漏斗、留存曲线和事件数据,区分设计问题与追踪造成的假象。当你接手并非由自己设计的产品数据,并被问及用户为何流失时使用。选择衡量指标时使用 `metrics-definition`(ux-strategy);运行对照测试时使用 `a-b-test-design`(prototyping-testing)。

数据与数据库688
I
iphone-duo-vertical-bars
iphone-duo-vertical-bars
mirzaaghazadeh / iphone-duo-skills

为 iPhone Duo 的纵向轴调整工具栏、导航栏和标签栏,包括项目排序、符号或文本表示、轴行为、溢出菜单、可见性优先级,以及何时选择退出。工具栏项目显示异常、过早溢出,或需要移到外屏侧边时使用。

设计与 UI688
W
web-design-guidelines

检查 UI 代码是否符合 Web 界面指南。当被要求「审查我的 UI」、「检查可访问性」、「审计设计」、「审查用户体验」或「根据最佳实践检查我的网站」时使用。

设计与 UI688
V
visual-design-system-extractor
visual-design-system-extractor
srinitude / skills

当需要把参考图片、截图、情绪板、风格帧、品牌板、电影剧照、产品界面截图或线上站点 URL 转化为生产级设计系统、设计令牌、艺术指导规范、动效规则或 YAML 样式规范时使用。涵盖将视觉参考逆向解析为确定性的 YAML 规范,并标注分级置信度、证据边界,以及取自 Google Fonts 实时目录并按低使用频率排序的字体。不适用于生成图片,也不适用于无需先解析参考的常规前端开发工作。

设计与 UI687
K
k2f-event-program
k2f-event-program
suzheng / k2f

把已确认的日程、社媒发布决策和赞助商名单,转化为面向参会者的日程手册:以时间优先的导览方式和可安全发布的社媒文案——而不是海报、邀请函或幻灯片。当用户要求会议日程手册、音乐节手册、晚宴流程表、演出节目单或多日参会者日程时使用。以 AI 原生设计和最高审美标准,由 K2F 格式与引擎驱动创建活动日程,专为 AI Agent 打造,让它们专注于语义内容和设计意图,自动处理排版、字体和格式的复杂性。

文档处理686
M
monorepo-tamagui
monorepo-tamagui
mindrally / skills

使用 Tamagui、Turbo、Next.js、Expo、Supabase 以及跨平台最佳实践的 Monorepo 开发指南。

开发686
C
cli-anything-drawio
cli-anything-drawio
hkuds / cli-anything

Drawio 的命令行界面——一个面向 **Draw.io** 的 CLI 工具集,可在命令行中创建、编辑和导出图表。

设计与 UI684
S
sync-figma-token
sync-figma-token
firebenders / sync-figma-token-skill

在代码与 Figma 变量之间同步设计令牌,提供严格的偏移报告、强制审批门禁、安全的差异应用以及持久化的报告。

设计与 UI684
S
syncfusion-react-buttons
syncfusion-react-buttons
syncfusion / react-ui-components-skills

实现 Syncfusion React 按钮组件的全面指南,涵盖 Button、ButtonGroup、DropDownButton、Floating Action Button、ProgressButton、SplitButton、Speed Dial、Switch、RadioButton 和 Chips。适用于为 React 应用添加样式化按钮、切换行为、图标支持、分组选择、下拉操作菜单、以编程方式控制浮动主操作、可展开的 Speed Dial 菜单、带头像和拖放的紧凑交互元素,以及单选/多选能力。

设计与 UI684
D
design
design
rshankras / claude-code-apple-skills

面向 Apple 平台 UI 的设计技能 —— Liquid Glass、动画、游戏手感(触觉反馈、声音、庆祝效果)、UI 原型、UX 文案、SF Symbols 与排版。适用于实现设计语言功能、加入手感与反馈打磨、撰写界面文案,或选择字体与图标。

设计与 UI683
Q
quote-cards-and-text-graphics
quote-cards-and-text-graphics
social-media-skills / skills

将单句引言、文案或统计数据转化为设计精良的字体图形——包括引言卡、引用摘录、图文叠加、数据卡和排版帖子。适用于用户想制作引言卡、文字图形、引用摘录、数据卡,或将有力的句子做成可分享图片时。设计能强化有力的句子,但无法凭空创造。使用 QUOTE 框架。首先读取 brand-profile、design-and-templates 和 voice-builder,并从 hook-writer、storytelling 或 data-and-original-research(统计数据)中提取文案。Agent 选择文案并制定卡片规格;设计工具负责渲染;由人审核;WoopSocial 发布图片(不生成媒体)。绝不捏造引言、将虚构文案归于真实人物,或删去上下文;核实措辞和来源,并确认同意和肖像权。与 infographic-and-data-viz、design-and-templates、caption-writer 和 social-proof-and-testimonials 不同。

设计与 UI683
Q
quasar-skilld
quasar-skilld
skilld-dev / vue-ecosystem-skills

使用 Quasar 框架(`quasar` npm 包,v2.33.1)构建、配置和调试应用。在编写、审查或调试导入 "quasar" 或 "quasar/wrappers" 的代码,将 Quasar 与 Vite、Vitest、Storybook、UMD 或 Quasar CLI 一起配置,使用 Quasar Sass 变量进行样式设置,或在 Quasar v2 各版本之间升级时使用。

开发681
S
syncfusion-react-inputs
syncfusion-react-inputs
syncfusion / react-ui-components-skills

实现 Syncfusion React 输入组件的全面指南,涵盖 Uploader、NumericTextBox、TextBox、TextArea、CheckBox、OTP Input、Signature、RangeSlider、ColorPicker、MaskedTextBox 和 Rating。适用于构建带异步/分块上传的文件上传界面、拖放功能、带校验和格式化的数字输入、带浮动标签的文本输入、自定义附加内容、表单集成、无障碍合规性,以及 React 应用中的样式设置。

设计与 UI680
H
hig-components-controls
hig-components-controls
raintree-technology / hig-doctor

Apple HIG 关于选择类与输入类控件的指导,涵盖选择器、开关、滑块、步进器、分段控件、组合框、文本框、文本视图、标签、token 字段、虚拟键盘、评分指示器和仪表。当用户说“picker 或 segmented control”、“我的表单应该长什么样”、“我该用哪种键盘类型”、“toggle 还是 checkbox”,或询问选择器设计、开关、滑块、步进器、文本输入、分段控件、组合框、标签、token 字段、虚拟键盘、评分指示器、仪表、表单设计、输入校验或控件状态管理时,使用此技能。交叉引用:hig-components-menus、hig-components-dialogs、hig-components-search。

设计与 UI679
Q
qual-quant-triangulation
qual-quant-triangulation
owl-listener / designer-skills

整合数据与用户反馈,并设计能够厘清分歧而非重复陈述的研究。当行为数据与研究发现指向不同结论时使用。单独解读数据时使用 `behavioural-analytics`;单独综合访谈时使用 `affinity-diagram`。

设计与 UI679
V
view-transitions
view-transitions
patternsdev / skills

讲解 View Transitions API,用于为 DOM 变更添加动画。适用于希望不手动编写动画代码,即可在页面或 UI 状态之间实现平滑动画过渡的场景。

设计与 UI679
P
pinterest-pin-design
pinterest-pin-design
social-media-skills / skills

Pinterest 图钉设计技能——与 pinterest-seo 的关键词层配套的视觉部分。用户想设计图钉、Pinterest 图钉图片、图钉文字叠层、现有 URL 的全新图钉变体或看板封面时使用。按 2:3(1000x1500)比例设计并撰写竖版图钉简报:一个焦点、在信息流尺寸下清晰可读的关键词文字叠层、符合品牌风格的模板、安全区域,以及每个目标 URL 3-5 个视觉上明显不同的全新设计。使用 SAVED 框架。首先读取 brand-profile、目标页面和 pinterest-seo 关键词。由人工或图像/设计工具(ideogram/canva/nano-banana/设计师)制作最终光栅图;WoopSocial 发布成品图钉图片、标题、描述、看板和链接。不制作误导性图钉,不把重复发布伪装成新内容,不捏造互动数据。与 pinterest-seo(关键词层,二者配套)、pinterest-growth(策略)、design-and-templates(模板系统)以及 ideogram/canva(生成简报所描述的光栅图)不同。

设计与 UI678
R
react-component-architecture
react-component-architecture
aj-geddes / useful-ai-prompts

使用函数组件、hooks、组合模式和 TypeScript 设计可扩展的 React 组件。适用于构建可复用的组件库和易维护的 UI 系统。

开发677
W
web-design-reviewer

此技能可对本地或远程运行的网站进行视觉检查,以识别并修复设计问题。遇到“审查网站设计”“检查 UI”“修复布局”或“查找设计问题”等请求时触发。检测响应式设计、无障碍性、视觉一致性和布局错乱问题,并直接在源代码中修复

设计与 UI677
B
bklit-ship
bklit-ship
bklit / bklit-ui

仅限 bklit-ui monorepo 贡献者 —— 在 packages/ui 中将 Studio 原型中的图表或组件发布到生产环境,并附带文档和注册表。

开发676
O
overlastic
overlastic
hairyf / skills

使用 Overlastic 的综合技能

开发676
S
storybook-story-writing

在创建或修改组件的 Storybook stories 时使用。确保 stories 遵循 CSF3 格式,恰当地展示组件的各种变体,并能成功构建。

开发676
S
syncfusion-react-dropdowns
syncfusion-react-dropdowns
syncfusion / react-ui-components-skills

实现 Syncfusion React 下拉组件的综合指南,涵盖 AutoComplete、ComboBox、DropDownList、ListBox、Mention、MultiSelect 和 MultiColumn ComboBox。适用于在 React 应用中构建选择界面、数据绑定、筛选、级联下拉、自定义模板以及无障碍的下拉体验。

设计与 UI676
P
page-transitions
page-transitions
dylantarre / animation-principles

在 Web 和移动应用中实现路由切换、视图过渡、模态框开关或导航动画时使用。

设计与 UI675
M
muapi-floor-plan-rendering
muapi-floor-plan-rendering
samuraigpt / generative-media-skills

设计 2D 平面图,并将其转换为逼真的高质量 3D 建筑渲染图。

设计与 UI673
T
tiktok-photo-mode
tiktok-photo-mode
social-media-skills / skills

TikTok Photo Mode 格式执行技能。用户想要“TikTok photo carousel”“photo mode”“TikTok slideshow”“swipeable TikTok post”,或通过 WoopSocial 发布多图 TikTok 帖子(postType PHOTO)时使用。构建面向完成率的 TikTok 原生轮播:第 1 张设置钩子,通过悬念逐步揭示内容,最后提供回报和一个 CTA;并设置准确的 WoopSocial PHOTO 发布配置(隐私、评论、音乐、如实披露标记)。使用 SWIPE 框架。首先读取 brand-profile 和 goals-and-kpis。Agent 编写幻灯片计划、叠加文案、说明文字和配置;图片由人工或图像技能制作,而非 WoopSocial;WoopSocial 发布原生 PHOTO 帖子;绝不捏造指标,也绝不承诺 photo mode 是提升触达的捷径。不同于 tiktok-script(VIDEO)和 carousel-writer(跨平台文案)

营销与增长673
U
ux-extract
ux-extract
jezweb / claude-skills

从参考 Web 应用中彻底提取 UX 模式。遍历每个界面,截取各个状态的屏幕截图,记录交互模式、逐字文案、键盘快捷键、响应式处理、动效以及空状态/错误状态/加载状态。产出一套可复用的模式库,供其他审计进行对比。它是 ux-audit 的反面——它问的是“标准是什么”,而非“这是否符合标准”。触发词包括:“从 X 学习”“从 X 提取模式”“研究 X 的 UX”“逆向工程 X 的 UX”“从 X 构建模式库”。

设计与 UI672
H
hig-components-dialogs
hig-components-dialogs
raintree-technology / hig-doctor

关于呈现类组件的 Apple HIG 指南,包括 alert、action sheet、popover、sheet 和数字输入视图。当用户说"我该用 alert 还是 sheet"、"如何展示确认对话框"、"什么时候该用 popover"、"我的模态框让用户很烦",或询问 alert 设计、action sheet、popover、sheet、modal、dialog、数字输入、确认对话框、警告对话框、模态呈现、非模态内容、破坏性操作确认、浮层 UI 模式时,使用本技能。交叉引用:hig-components-menus、hig-components-controls、hig-components-search、hig-patterns。

设计与 UI671
S
syncfusion-react-popups
syncfusion-react-popups
syncfusion / react-ui-components-skills

实现 Syncfusion React 弹窗组件(包括 Dialog、ToolTip)的全面指南。适用于在 React 应用中构建模态/无模态对话框、确认弹窗、对话框内表单、可拖拽窗口、气泡提示、工具提示,以及带自定义定位、动画、WCAG 2.2 无障碍支持、表单集成和事件处理的覆盖层内容。

设计与 UI671
B
brand-motion-guidelines
brand-motion-guidelines
iart-ai / freelance-motion-skills

用户要求“编写动态指南”“创建品牌动态系统”“定义缓动和时间令牌”“记录动画原则”“构建类似 Slack/IBM/Klarna 的动态语言”“设置进入/退出/过渡规则”或“添加减少动态效果/无障碍部分”时,应使用此技能。它会生成可直接填写的品牌动态指南文档。

设计与 UI670
F
fitness-wellness
fitness-wellness
dylantarre / animation-principles

适用于为健身应用、健康平台、训练记录工具或冥想体验设计动画

设计与 UI670
A
apple-hig-expert
apple-hig-expert
alirezarezvani / claude-skills

依据 Apple 人机界面指南审计和设计 iOS/macOS/watchOS/visionOS 界面,涵盖 Liquid Glass 设计语言(WWDC25 发布,随 iOS 26/macOS Tahoe 于 2025 年 9 月推出)。适用于审查 Apple 平台模型或应用是否符合 HIG、检查对比度或点击目标尺寸,以及设计具备原生质感的 Apple 界面(例如「对照 HIG 审计我的 iOS 应用」「这段文字在 Liquid Glass 上清晰可读吗」)。

设计与 UI669
I
infographic-and-data-viz
infographic-and-data-viz
social-media-skills / skills

将真实数据转化为可信、易读、便于分享的信息图和图表的制作方法。用户想要可视化数据、制作信息图、创建图表、将发现或统计数字转为视觉内容,或修复令人困惑或具有误导性的图表时使用。优秀的数据可视化能在 3 秒内传达一个洞见。采用 CHART 框架(选择图表、提炼标题要点、使用真实比例尺、去除冗余、标注来源并确保无障碍)。首先读取 brand-profile 和 design-and-templates,并从 data-and-original-research / analytics-and-reporting 获取真实数据。Agent 设计规范;设计/图表工具负责渲染;人类审核;WoopSocial 发布图片(不生成媒体)。绝不扭曲比例尺或捏造数据点/来源;注明来源和日期;必须满足无障碍要求。不同于 design-and-templates(品牌设计)、quote-cards-and-text-graphics(单条引言/数字)、data-and-original-research(生成数据)和 analytics-and-reporting。

设计与 UI669
S
syncfusion-react-3d-chart
syncfusion-react-3d-chart
syncfusion / react-ui-components-skills

基于 @syncfusion/ej2-react-charts 包实现 Syncfusion React 3D Chart 组件。当用户需要 3D 柱状图、条形图、堆叠柱状图、堆叠条形图或百分比堆叠图等变体时使用此技能。涵盖 Chart3DComponent、坐标轴配置(category、numeric、datetime、logarithmic)、数据绑定、多窗格、数据标签、图例、工具提示、选择、打印/导出、主题和无障碍。

数据与数据库669
S
syncfusion-react-appbar
syncfusion-react-appbar
syncfusion / react-ui-components-skills

使用 AppBar 组件创建响应式导航页头。可构建顶部、底部或吸顶应用栏,包含按钮、菜单、图标和侧边栏。适用于构建导航元素、工具栏、操作栏或带动态内容布局的响应式页头。包含颜色模式(Light、Dark、Primary、Inherit)、尺寸模式(Regular、Prominent、Dense)、间距、分隔符以及完整的无障碍支持。

设计与 UI669
V
vanilla-web
vanilla-web
janjaszczak / cursor

使用模块化 ES 模块(ESM)、单一职责原则和最小化的全局状态来构建或修改纯 HTML/CSS/JavaScript(无框架),并交付可运行的文件并做轻量验证。适用于静态页面、小型 UI 组件、原生 JS 重构,以及不使用 React/Vue/Angular 的快速原型。

开发669
D
designing-frontend-interfaces
designing-frontend-interfaces
osmontero / opencode-skills

构建或重新设计任何 Web 界面时使用,包括落地页、仪表盘、营销网站、Web 应用、React/Vue 组件、HTML/CSS 布局、创意作品和海报;也适用于希望 UI 更美观、更精致、更具特色、更少千篇一律或更少“AI 生成感”的请求。若在实现前需要设计简报、艺术指导、视觉识别、字号比例或配色系统,也使用此技能。

设计与 UI668
H
hig-components-menus
hig-components-menus
raintree-technology / hig-doctor

Apple HIG 中关于菜单和按钮组件的指导,包括菜单、上下文菜单、Dock 菜单、编辑菜单、菜单栏、工具栏、操作按钮、弹出按钮、下拉按钮、披露控件和标准按钮。当用户说"我的按钮应该长什么样"、"菜单栏里该放什么"、"我该用上下文菜单还是操作单"、"工具栏该怎么设计",或询问按钮设计、菜单设计、上下文菜单、工具栏、菜单栏、操作按钮、弹出按钮、下拉按钮、披露控件、Dock 菜单、编辑菜单,或任何菜单/按钮组件的布局与行为时,使用此技能。交叉引用:hig-components-search、hig-components-controls、hig-components-dialogs。

设计与 UI667
N
nano-banana
nano-banana
kingbootoshi / nano-banana-2-skill

使用 nano-banana CLI 生成 AI 图像(默认 Gemini 3.1 Flash,可选 Pro)。支持多分辨率(512-4K)、宽高比、用于风格迁移的参考图、用于透明素材的绿幕工作流、成本跟踪以及精确尺寸控制。当用户要求"生成图像""创建精灵图""制作素材""生成插画"或任何图像生成任务(UI 模型图、游戏素材、视频、营销物料)时使用。

创意与媒体667
S
syncfusion-react-notifications
syncfusion-react-notifications
syncfusion / react-ui-components-skills

实现 Syncfusion React Notification 组件(Badge、Message、Skeleton、Toast、Spinner)的完整指南。适用于:使用颜色变体和形状的状态标识与徽标;显示信息、成功、警告或错误消息;配置严重级别和显示变体(Text、Outlined、Filled);处理消息关闭;Toast 定位、Toast 模板、Toast 动画;显示带微光动画(Wave、Pulse、Fade)和形状(Circle、Rectangle、Text)的骨架加载占位;或自定义通知的外观与无障碍。

设计与 UI667
3
3d-visualizer
3d-visualizer
daffy0208 / ai-dev-standards

Three.js、3D 图形和交互式 3D 可视化专家

创意与媒体666
M
muapi-3d-logo-animation
muapi-3d-logo-animation
samuraigpt / generative-media-skills

将 2D 标志转换为高质量 3D 版本,并添加专业的电影级动效。

创意与媒体666
第 2101–2160 条,共 10,586 条

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。