like-button
Like Button 是面向开发者的点赞与反应按钮 UX 模式，用于在社交或内容场景中捕获快速、轻量的用户反馈，同时清晰呈现当前状态、计数与撤销路径。该模式强调在降低操作摩擦的同时，不隐藏状态、规则与恢复路径，并配套键盘交互、屏幕阅读器支持、视觉可访问性等无障碍护栏，以及测试与滥用防范建议。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-26 00:15
前端与建站
11,095 个结果
radio
Radio（单选按钮）是一种表单控件模式，用于让用户从一组互斥的选项中恰好选择一个选项。与复选框不同，单选按钮以组为单位工作，选中其中一个会自动取消同组内其他选项的选中状态。该模式适用于用户必须从多个选项中做出单一选择的表单场景，例如选择支付方式、选择尺码或选择配送方式。其关键特性包括：互斥性（同一时间只能选中一个选项）、分组行为（具有相同 name 属性的单选按钮协同工作）、键盘可访问（使用方向键导航、空格键选择）、屏幕阅读器友好（正确播报当前选中状态）以及清晰的视觉反馈。实现时需先确认该模式与问题及约束匹配，再参考模式文档中的结构与示例选择最小可行变体，并在叠加视觉细节前应用无障碍、性能和交互防护措施。无障碍方面要求使用语义化的 fieldset 和 legend 结构、正确的 ARIA 属性标注，并支持 Tab 键进入组、方向键切换选项、空格键选中。性能目标包括状态变更渲染时间小于 16ms、基础实现包体积小于 2KB，并建议使用事件委托、懒渲染和防抖更新等优化策略。常见错误包括：用单选按钮实现多选、缺少 fieldset 结构、分组不一致等。
share-dialog
Share Dialog 是一个面向开发者的社交分享交互模式，用于把复制链接、系统原生分享和指定目标分享整合到一个可预期的交接界面中。它适用于需要复制和分享链接、移动端原生分享交接、推荐或邀请流程等场景。该模式强调在实现时兼顾可访问性、性能与交互防护，包括键盘操作、屏幕阅读器支持、焦点顺序与可见焦点状态，以及不依赖颜色传达状态。同时提醒开发者避免在无真实用户价值时加入社交或互动机制，避免在未理解信任影响的情况下添加公开计数或可见性状态，并在上线前规划审核、滥用与撤销机制。资料还列出了常见错误，如把信任信息当作次要 UI、过度优化首次点击、忽视滥用与欺诈路径，并给出相关模式链接。
slider
Slider（滑块）是 UX Patterns for Developers 收录的一种表单交互模式，用于让用户在一个有界范围内选择一个数值，并让当前所位置与步长保持清晰易懂。它适用于价格与范围筛选、音量或强度控制、评分与偏好选择等场景。该模式的实现流程建议先确认问题与约束是否匹配，再从参考文档的解剖结构与示例中选择最小可行变体，然后依次应用无障碍、性能与交互护栏，最后用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。无障碍方面要求纯键盘可完成操作、焦点顺序合理、保持可见焦点状态，并优先使用语义元素、在语义不足时补充 ARIA，避免仅靠颜色传达状态。常见错误包括在部分输入时立即校验、标签与提示和错误信息分离、忽略触摸与自动填充行为。当取值是二元、范围很小或完全受约束时，应改用更简单的原生控件；当原生浏览器输入已能很好地解决问题时，避免自定义行为。
tag-input
Tag Input 是一种 UX 模式，用于让用户输入、查看和删除多个短值（如标签、关键词），同时保持可读性和键盘操作效率。它适用于标签与关键词、收件人录入、主题与分类分配等场景。该模式强调在复制示例前先确认问题与约束是否匹配，从最小可行变体开始，并优先应用无障碍、性能和交互护栏，再进行视觉打磨。文档还提供了键盘交互、屏幕阅读器支持、视觉无障碍等无障碍护栏，以及常见错误（如验证时机不当、标签提示与错误分离、忽略触摸与自动填充行为）和修复建议。
react-native-expert
面向 React Native CLI（非 Expo）项目的移动开发技能，覆盖 CLI 环境搭建、Turbo Modules/Fabric 新架构、JSI 桥接与自定义原生模块等场景，同时提供导航、平台差异处理、列表性能优化与存储方案等实践指导。
shopify-polaris-design
该技能用于使用 Shopify Polaris 设计系统（React 实现 v13.x）设计并实现 Shopify Admin 界面，适用于构建 Shopify 应用、Admin 扩展或任何面向商家的界面，以确保界面具备原生、可访问且专业的观感。资料同时说明，Polaris React（@shopify/polaris）目前已进入维护模式，Shopify 推出了用于新开发的 Polaris Web Components，但 Polaris React 对现有应用仍可正常使用并受支持。该技能强调以商家为中心、原生观感、可访问性和可预期性等核心原则，并给出依赖版本、App Bridge 集成方式、基础组件、布局原语、数据展示、表单设计、筛选搜索、设计令牌与已弃用组件等实现指引。
html-coder
面向专业 HTML 开发的技能，强调语义化标记、无障碍、HTML5 特性与符合标准的网页内容；可用于创建 HTML 文档、表单、响应式标记、多媒体与 HTML5 API，并排查验证与无障碍问题。
plate-ui
Plate UI 是 udecode/plate 仓库中面向 Plate 编辑器注册表与编辑器界面的组件编写技能，是 shadcn 技能的仓库专属配套。它用于指导开发者编写或重构注册表 UI 与组件，明确哪些代码应保留为开放源码、哪些应抽取到 packages/* 包中，以及 base/live kit 的拆分、跨平台分层和注册表接线方式。该技能强调保留开放代码、只在持久边界处抽取、将跨平台复用放在命令/状态契约而非 JSX 组合中，并要求 React 版本不低于 19.2。
frontend-design
frontend-design 是一个用于创建独特、生产级前端界面的技能，旨在帮助开发者摆脱千篇一律的“AI 味”设计。当用户需要构建 Web 组件、页面、应用或界面时，该技能会引导先进行设计思考，再实现真正可运行的代码。它强调在编码前明确用途、受众、技术约束与差异化亮点，并选定一个大胆而清晰的美学方向，例如极简、极繁、复古未来、自然有机、奢华精致、玩具感、杂志编辑风、粗野主义、装饰艺术、柔和粉彩或工业实用等。实现层面支持 HTML/CSS/JS、React、Vue 等技术，要求代码可运行、视觉醒目、风格统一且细节精致。该技能还给出前端美学指南，涵盖字体、配色与主题、动效、空间构图、背景与视觉细节等方面，并明确避免常见通用字体、俗套配色和可预测布局。
react-component
提供使用 TypeScript 编写 React 组件的实践指南，涵盖 hooks、状态管理、可访问性与测试等现代开发模式，适合构建新 UI 组件时参考。
tailwindcss
Tailwind CSS 是一个用于为应用添加样式的技能，强调始终使用最新版本与现代写法。其核心理念是采用 CSS 优先的 @theme 配置、使用 OKLCH 颜色以获得感知均匀性，并在合适场景优先使用 @container 容器查询而非媒体查询。技能提供快速参考对照表，区分现代做法与应避免的旧做法：配置用 CSS @theme 指令而非 tailwind.config.js，颜色用 OKLCH 而非 RGB/HSL，容器查询用 @container，内容检测为自动而非手动 content 配置，PostCSS 插件用 @tailwindcss/postcss 而非 tailwindcss 包。内容涵盖 Next.js 安装命令、@theme 指令定义设计系统、OKLCH 调色板与语义色、容器查询与命名容器、深色模式、响应式断点、排版、Flexbox 与 Grid、状态与变体、动画以及卡片、按钮、输入框等常见模式。
compose-state-holder-ui-split
该技能介绍 Jetpack Compose 中「状态持有者与 UI 分离」的编码模式：将负责连接 ViewModel/组件、收集状态与副作用、处理导航与 Snackbar 的状态持有者 composable，与只接收不可变 UI 状态和回调、专注描述布局的 UI composable 分开。目的是让屏幕更易预览、测试和复用，适用于 Android、Desktop、TV 及 KMP/CMP 目标。
implementing-figma-to-swiftui
一个将 Figma 设计实现为 SwiftUI 视图的技能，借助 Figma MCP 工具获取设计数据、截图与变量定义，并按六步流程完成组件规划、实现与校验。
swiftui-components
整理 iOS 16 及以上版本 SwiftUI 组件的中文参考目录，按导航、图表、滚动、媒体、动画、布局、TipKit、预览、主题等主题分文件，并提供版本对应表，用于实现界面时查找可用组件与兼容性。
brief
Brief 是一个用于初始化并运营 React/Vite 报告站点的技能，可基于内置模板生成独立的 Brief 风格 HTML 分析报告并发布到站点。
hono-react
在 Hono 项目中使用真正的 React（而非 hono/jsx）的实践指南：当需要 React 专属组件库、完整 React SSR 水合或团队统一用 React 时，改用 React 并通过 vite-ssr-components 接入。
glmv-pdf-to-web
glmv-pdf-to-web 是一个将 PDF 文档（研究论文、技术报告或项目文档）转换为精美单页学术/项目网站的 AI 技能。它通过本地处理完成整个流程：以 DPI 120 将 PDF 页面转换为图片，生成结构化的 outline.json 网页规划文件，在本地裁剪所需图片，并最终通过 generate_web.py 生成单页 HTML 网站。该技能适用于制作类似 NeurIPS/CVPR/ICLR 论文发布页的项目主页，支持本地 PDF 路径或 HTTP/HTTPS URL 输入。依赖 Python 包 pymupdf 和 pillow，以及系统工具 curl。输出目录遵循 {WORKSPACE}/web/<pdf_stem>_<timestamp>/ 约定，包含 outline.json、crops/ 图片目录和 index.html。网站采用自包含 HTML，内嵌 CSS 和少量原生 JS，使用相对路径引用图片，支持响应式布局、粘性导航、平滑滚动和滚动淡入动画。
zereight-react-native-optimizer
用于 React Native / Expo 代码审查的性能检查清单技能，在代码评审阶段发现渲染、动画与原生性能回归。它不教如何优化，而是检测 diff 中引入的性能问题，可与 zereight-review 配合使用。
swiftui-ui-patterns
SwiftUI UI Patterns 是一套面向 SwiftUI 视图与组件构建的实践指南与示例驱动教程，来源为 199-biotechnologies/swiftui-claude-skills。它围绕创建或重构 SwiftUI UI、设计标签页（Tab）架构等任务提供指导，既可用于已有项目，也可用于新项目脚手架搭建。内容涵盖快速上手流程、通用规则、新建 SwiftUI 视图的工作流、组件参考索引、Sheet 使用模式（如 item 驱动的 sheet）以及如何新增组件参考文档。整体强调使用现代 SwiftUI 状态（@State、@Binding、@Observable、@Environment）、组合优于继承、小而专注的子视图、以 async/await 配合 .task 处理异步与显式加载/错误状态，并建议在编辑旧文件时保留既有遗留模式、遵循项目格式化与风格规范。
21st-ui-build
21st-ui-build 是一个面向 UI 构建与大幅改动的技能（Skill），用于在当前项目已有的设计语境、既有组件和 21st 灵感素材基础上，构建或显著修改生产级界面。它强调保留产品原有身份，同时借助 21st 的资源加速实现。工作流上先读取项目内的设计上下文文件（.21st/design.json 与 .21st/DESIGN.md），缺失时执行 21st init --design-context 初始化；随后检查目标路由、相邻组件、项目指令与既有设计 token，并以项目明确事实优先于通用审美。生成前先通过 21st search 检索，优先复用已安装的项目基础组件，仅在能减少重复或明显改进结果时才检索或安装 21st 结果。若无合适结果，可检查 MCP 的 get_usage.aiGenerationEnabled 或运行 21st usage（1.17.1+ 支持 --json）确认 AI 生成是否启用，仅在明确启用时使用 21st generate 生成项目感知方案；否则由使用者自己的编码代理实现。最终需在项目真实框架中落地，保留响应式、键盘交互、可见焦点、语义、减少动效、加载/空/错误状态，并运行项目检查与 21st review，仅自动应用安全的确定性修复。
21st-ui-review
21st-ui-review 是 21st-dev/codex-plugin 中的 UI 审查技能，用于对照项目设计上下文、无障碍预期、响应式行为、交互质量与高置信度的生产要求，审查现有 UI。它强调“用证据审查”，先把可确定的缺陷与主观设计建议分开：先读取 .21st/design.json、项目说明和相关源码，再运行确定性审查命令 21st review <path>（或加 --json 输出 JSON），并检查实际的组件组合与运行时状态，依据代码而非名称推断行为来验证结论。审查结果分为确定性缺陷、设计系统漂移、无障碍与交互缺陷、响应式风险、主观产品/设计建议几类，按用户影响排序，并给出精确的文件与行号定位。修复方面，仅对低歧义的确定性修复使用 21st review <path> --fix，且不得静默重新设计、更改品牌标识或改变产品行为；修复后需运行相关项目测试并重跑审查以证明问题已解决。
angular-material-cdk-animations
这是一个面向 Angular 应用 UI 开发的技能说明，聚焦 @angular/material、@angular/cdk 与 @angular/animations 的使用模式，并与无 Zone（zoneless）、信号优先（signals-first）的 UI 架构以及 Material Design 3（M3）设计令牌保持一致。适用于新增或重构使用 Angular Material 组件库、CDK 基础原语或动画模块的界面，也覆盖浮层、拖放、虚拟滚动、焦点管理和动效过渡等场景。技能以工作流和 PR 检查清单的形式给出实践要求：优先选用最简单的 Material 组件，仅在必要时下沉到 CDK 原语；输入输出保持信号优先，避免组件内部使用 RxJS 管理状态；使用 CDK 浮层、焦点陷阱和观察者时明确所有权并在销毁时释放；动效方面，小状态变化用 CSS 过渡，仅对需要协调的复杂过渡使用 @angular/animations，并始终尊重 prefers-reduced-motion；同时校验无障碍性，包括标签、焦点顺序、键盘操作和可见焦点。
shadcn-svelte
shadcn-svelte 是一个面向 Svelte 5 与 Tailwind v4.1 的组件使用与排错指南，重点讲解 shadcn-svelte 组件、TanStack Table 集成以及常见反应性陷阱。它假设读者已会运行 npx shadcn-svelte@latest add，内容聚焦官方文档未覆盖的坑：Bits UI builder 不能在模块层解构、TanStack Table 必须使用 getter 访问器、Tailwind v4.1 需改用 @import "tailwindcss"、shadcn 组件被复制进代码库需自行维护等。同时给出库选型权衡（shadcn-svelte、Skeleton UI、Melt UI、Bits UI）与数据表格复杂度递增的参考，并提供调试清单与参考文档加载时机。