SuperAPI AI 工具集找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-25 00:14
11,088 个结果
LCP（Largest Contentful Paint，最大内容绘制）是衡量页面感知加载速度的核心 Web 指标，用于记录页面中最大可见内容元素完成渲染的时间点，目标应控制在 2.5 秒以内。该技能面向前端性能审计场景，当页面加载缓慢、资源过重或渲染延迟与 LCP 相关时使用。它提供检查、修复与解释三类操作：通过 Lighthouse 或 PageSpeed Insights 测量 LCP，确认最大可见元素是否在 2.5 秒内渲染；通过预加载关键资源、优化图片格式与响应式尺寸、使用 CDN、降低服务器响应时间（TTFB）等方式进行优化；并解释 LCP 如何通过追踪最大可见内容元素的出现时间来反映感知加载速度。此外还包含代码审查环节，用于定位影响 LCP 的路由、资源与加载行为，标记增加不必要网络、CPU 或布局成本的具体文件、请求或渲染步骤，并说明确认问题所用的测量方法。完整实现细节、代码示例与框架相关指导见 references/rule.md。
这是一个面向开发者的复选框（Checkbox）UX 模式技能，用于在界面中实现单选或多选选择。它说明了复选框的适用场景（表单偏好、筛选、设置开关、多选列表、协议勾选、功能选择等），并给出何时应改用单选按钮、开关或下拉菜单。内容涵盖实现流程、无障碍 ARIA 属性与键盘交互、性能指标与优化策略，以及常见错误（如用复选框做单选、标签关联不当、分组不一致）和修复方法。
Hamburger Menu（汉堡菜单）是一种由三条横线（☰）组成的图标，用于在移动端和小屏幕设备上切换隐藏的导航面板。点击或轻触图标即可展开站点导航，关闭时再次隐藏。该模式在小视口中节省屏幕空间，同时通过一个被广泛识别的交互入口保持完整导航的可访问性。它适用于横向空间有限的移动端或响应式网站、导航项较多无法单行排列的站点、模仿原生移动应用模式的渐进式 Web 应用、桌面导航的响应式改造，以及导航项众多的管理后台或复杂应用。不适合仅有 3-4 个导航项、桌面专用、大屏或信息亭界面，以及导航可见性对主要任务至关重要的页面。实现时需注意无障碍与性能：使用 button 元素配合 aria-expanded 和 aria-controls，打开时限制焦点在面板内，按 Escape 关闭并返回焦点，使用 aria-label 描述当前操作；避免用 div 或 span 作为切换元素，避免焦点逃逸到遮罩后方，避免移除菜单链接的可见焦点指示。性能目标包括切换响应小于 50ms、面板动画 250-300ms 保持 60fps、切换后 100ms 内可交互、组件包体小于 3KB、仅使用 transform/opacity 实现 GPU 加速动画。常见错误包括在桌面端使用汉堡菜单、缺少焦点管理、不支持 Escape 键。
Image Gallery 是 thedaviddias/ux-patterns-for-developers 技能库中的一个 UX 模式，用于在界面中展示和浏览图片集合。它帮助团队在用户浏览多张相关图片时保持方向感、上下文与性能，适用于作品集与画廊页面、产品图片集合、文档截图与操作演示等场景。该模式强调从结构（anatomy）与示例出发选择最小可行变体，并在视觉打磨之前先落实无障碍、性能与交互护栏，同时提供键盘、屏幕阅读器、响应式与失败场景的测试指引。资料还列出了常见错误（如把媒体仅当装饰、忽略回退行为、遗漏无障碍要素）及修复思路，并给出轮播、模态框、图片上传等相关模式链接。
Load More（加载更多）是一种按用户需求动态加载额外内容的交互模式，属于 UX 模式集合 ux-patterns-for-developers 中的一项。它让用户主动请求更多内容，而不是在页面初始加载时一次性载入全部数据，从而缩短首屏加载时间，并在用户需要时提供无缝的更多内容访问。该模式适合需要分页的大型内容列表（如新闻流、商品列表）、希望通过初始只加载部分数据来提升页面性能、用户希望按自己节奏渐进浏览，以及需要比无限滚动更具用户控制力的替代方案等场景。文档同时给出了无障碍（ARIA 属性、屏幕阅读器支持）、性能指标、常见错误与修复方法等实现要点。
Loading Indicator 是一个面向开发者的 UX 模式，用于在内容加载过程中向用户展示进度状态。它适用于按钮提交与保存、列表或面板数据获取、以及时长未知的后台同步与上传等场景。该模式强调在不夸大完成时间或确定性的前提下，可靠地传达“正在进行中”的信息，并配套键盘交互、屏幕阅读器支持与视觉无障碍等实现准则，帮助团队减少使用摩擦，同时不隐藏状态、规则或恢复路径。
Megamenu（巨型菜单）是一种从导航栏展开的大型多列下拉面板，用于在单个菜单中展示大量链接、分类，有时还包含推广内容。与标准下拉菜单不同，它利用页面全部或接近全部的宽度，一次性组织大量导航选项，帮助用户无需反复点击即可浏览庞大的导航结构，常见于企业、电商和内容密集型网站。本条目来自 thedaviddias/ux-patterns-for-developers，介绍了该模式的适用场景、应避免的情况、实现流程、无障碍与性能护栏、常见错误及相关模式。
多选输入（Multi-select Input）是一种表单组件，允许用户从一组预定义选项中选取多个条目。它与自动补全不同，只作用于已知的、有边界的选项列表，用户只能选择列表中已有的内容。最常见的实现是基于标签/芯片的选择器：已选项以可移除标签的形式显示在输入框内，其余选项在下拉列表中展示。其他形式还包括复选框列表、双列表和原生 <select multiple>。适用于标签分类、权限角色管理、筛选面板、收件人选择、功能模块配置等场景。
phone-number 是一个用于实现电话号码格式化与校验的 UX 模式，帮助团队创建易输入、易检查且适用于国际场景的电话号码采集方式，常用于联系与配送表单、验证与 MFA 设置等场景。
Popover 是一种界面模式，用于在主内容之上叠加显示聚焦的内容或操作。它在保持周围页面可见的同时，向用户提供上下文相关的信息或快捷操作。与阻断页面交互的模态框不同，Popover 让主界面保持可见和可交互，适合展示针对特定上下文的帮助信息、快捷操作、紧凑工具栏或预览补充信息。该模式要求触发元素带有 aria-haspopup="true" 和 aria-expanded 属性，容器使用 role="dialog"（或作为菜单时使用 role="menu"），并需管理焦点以确保键盘用户获得上下文。
Prompt Input 是一种面向 AI 提示的增强型文本输入模式，用于帮助团队以可靠方式收集结构化提示、后续指令和可选附件，同时避免输入区显得过于沉重。它主要适用于聊天式输入体验、AI 工作台提示，以及带附件或模式的结构化提示场景。该模式强调在减少操作摩擦的同时，不隐藏状态、规则和恢复路径，并给出键盘交互、屏幕阅读器支持、视觉可访问性、性能预算等实现护栏，以及常见错误与修复建议。
富文本编辑器（Rich Text Editor）是一种 UX 模式，用于让用户创建和格式化文本内容，同时保持编辑界面可理解、可访问且可安全提交。该模式最适用于知识库撰写、长文内容创作以及带格式的内部备注和描述等场景。它强调在实现时遵循无障碍规范，包括键盘操作、屏幕阅读器支持和视觉可访问性，并提醒开发者避免在输入过程中过早校验、避免标签与错误信息分离、以及注意触屏和自动填充行为。资料还列出了常见错误及修复方式，并提供了相关模式链接和完整实现细节的参考文件位置。
Signature Pad（签名板）是一种用于采集手写签名或同意签署的交互模式，适用于需要用户签名确认的场景，如同意授权、交付确认、文档签署等任务。该模式强调签名采集过程应当可靠、可恢复、且能适配不同设备，在降低用户操作摩擦的同时，不隐藏状态、规则或恢复路径。资料给出了完整的实施流程，包括确认模式与问题是否匹配、参考解剖结构与示例选择最小可行变体、先应用无障碍与性能护栏再做视觉打磨、并通过测试验证键盘、屏幕阅读器、响应式和失败场景下的行为。资料还列出了应避免使用的场景（值过于二元、微小或完全受限时应使用更简单的原生控件，避免在原生输入已能很好解决问题时添加自定义行为，以及在不带来收益时添加额外格式或验证），并提供了常见错误与修复方式，如验证时机不当、标签提示错误分离、忽略触摸与自动填充行为。
Textarea 是一种用于收集较长自由文本的多行输入模式，帮助团队在可控范围内管理文本长度、填写引导与校验。它适用于评论与支持备注、描述与个人简介、问题报告与反馈等场景。该模式强调在减少填写阻力的同时，不隐藏状态、规则和恢复路径，并给出键盘交互、屏幕阅读器支持、视觉可访问性等无障碍护栏，以及常见错误与修复建议。
Time Input 是一个用于以结构化格式输入时间值的 UX 模式，旨在避免时间格式、区域设置和精度上的歧义。它适用于需要可用性与排程的场景，例如预约时间窗口、班次或提醒配置。该模式强调在复制示例前先确认问题与约束是否匹配，从模式解剖和示例出发选择最小可行变体，并在视觉打磨前先应用无障碍、性能和交互护栏。无障碍方面要求支持纯键盘完成输入、保持逻辑焦点顺序、保留高缩放下的可见焦点状态；优先使用语义元素，仅在语义不足时补充 ARIA，并通过 aria-describedby 关联标签、提示和状态文本，不单靠颜色传达状态。常见错误包括在部分输入时立即校验、标签提示与错误信息分离、忽略触摸与自动填充行为。
Video Player 是一个面向开发者的 UX 模式，用于实现带控件的视频播放。它帮助团队构建可靠的视频播放体验，具备可理解的控件、可应对的缓冲状态以及无障碍的替代访问路径，尤其适用于课程与教程类视频播放场景。该模式强调将状态、元数据与控件作为核心组成部分，而非事后叠加的装饰，并要求规划降级方案与无障碍支持（如字幕、转录文本、可见状态）。
面向 Vue 3 应用开发的专家技能，专注 Composition API、Nuxt 3、Pinia、TypeScript、Quasar 与 Capacitor 移动应用、PWA 及 Vite 配置，用于构建高性能响应式前端应用。
Frontend Inferencer 是一个前端技术栈推断技能，通过分析 JavaScript、DOM、HTML、CSS 与 HTTP 头部等已采集信号，识别网站使用的框架、元框架、CSS 框架、UI 组件库、状态管理与构建工具，并输出带证据与权重的结果。
一份用于 Svelte 组件拆分的技能指南，主张以“归属权优先”的方式划分组件边界：让组件端到端拥有自己的远程结果、状态、错误与重试，避免只搬动标记而把状态集中在路由控制器中。
一个编写语义化、可访问 HTML5 标记的技能规范，涵盖文档结构、语义元素、表单、图片、链接、列表、表格与交互元素等最佳实践，用于创建 HTML 模板或修复标记问题。
Base UI（@base-ui/react）无样式 React 组件库使用指南，用于构建可访问界面。组件 headless、可组合、符合 WAI-ARIA，支持 React 17+，单包可 tree-shaking。本文介绍安装、导入模式、样式、组合与常见陷阱。
TW-Blocks 是一套为 Tailwind CSS v4 设计的语义化间距系统，基于 block（2rem / 32px）与 tab（0.25rem / 4px）两个基础单位。其中 block 用于组件尺寸，如按钮、输入框、头部、工具栏和头像；tab 用于内边距、外边距和间隙等元素内外的间距。两者保持 4:1 的比例，即 4 个 tab 等于 1 个 block，从而形成可预测、协调的布局。它通过 npm/pnpm 包提供，在应用的全局 CSS 中通过 @import "tw-blocks" 引入，并支持 padding、margin、gap、宽高、inset、space 等标准 Tailwind 间距工具类前缀。官方还提供了组件高度、水平内边距、圆角以及紧凑/常规/宽松 UI 密度等最佳实践示例，并建议颜色、排版、Flexbox/Grid、边框和阴影等仍使用标准 Tailwind 类。
用于搭建 Tailwind v4 与 shadcn-vue 主题化 UI 的技能，含暗色模式配置。工作流程包括安装依赖、配置 Vite、按四步顺序编写 CSS 变量、设置暗色模式与验证，适用于初始化项目、配置主题或修复颜色失效与动画错误。
该技能聚焦 Vue Router 4 的使用模式、导航守卫、路由参数以及路由与组件生命周期的交互。内容以“最佳实践与常见陷阱”为主线，列出了在同路由不同参数间导航、在 beforeRouteEnter 中访问组件实例、导航守卫中未等待 API 调用、无限重定向循环、使用已废弃的 next() 函数、同路由切换导致数据陈旧、组件卸载后事件监听未清理，以及构建生产级单页应用等具体问题，并分别指向对应的独立条目。适合正在使用 Vue Router 4 进行前端路由开发的开发者参考，帮助识别和规避常见错误。除上述要点外，具体代码示例、安装命令、版本要求、收费方式与平台信息暂未提供。