SuperAPI AI 工具集找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 11-02 00:09
11,385 个结果
Core Web Vitals 优化技能，针对 LCP、INP、CLS 三项核心网页指标进行定向优化。该技能强调先测量后优化：优先查看页面级 CrUX p75 数据，在明确条件下录制浏览器性能追踪，仅分析与失败指标相关的洞察，修复后重新运行等效的实验室测量，且不声称字段数据立即改善。技能包含三项指标的定义与阈值（LCP 加载 ≤2.5s、INP 交互 ≤200ms、CLS 视觉稳定性 ≤0.1，Google 按第 75 百分位衡量）、LCP 常见问题与修复示例（慢服务器响应、渲染阻塞资源、资源加载慢、客户端渲染延迟、Speculation Rules API 预渲染）、LCP 优化清单、LCP 元素识别代码、INP 与 CLS 的诊断方向、测量来源对比、Next.js/React/Vue 框架快速修复示例，以及相关参考文档。
本技能聚焦于以证据为导向的网页性能优化，通过真实用户信号确定优先级，并借助浏览器性能追踪进行问题诊断，覆盖加载速度、运行时响应性与资源交付三个方面。其工作方式强调：在可运行页面上先建立字段（真实用户）与实验室（本地追踪）基线，再针对表现较差的真实用户 Core Web Vitals 进行优先级排序，使用 DevTools 性能追踪及其聚焦洞察定位原因，仅修改与已测量瓶颈相关的代码或资源，随后重新运行等效实验室测量并报告前后数值、条件与不确定性。技能给出了一套初始性能预算参考（如页面总重、压缩后的 JS/CSS、首屏图片、字体、第三方资源等上限），以及关键渲染路径、资源加载、JavaScript 优化、图片优化、字体优化、缓存策略、运行时性能、第三方脚本和测量指标等实践内容，包含大量可直接参考的代码示例（如 preconnect、preload、Speculation Rules、代码分割、图片响应式写法、font-display、Cache-Control、防抖与 requestAnimationFrame、View Transitions 等）。同时明确了测量指标的字段与实验室分类及解释。
这是一项面向 AEM Edge Delivery Services（EDS、Franklin、Helix）开发的技能，用于查找可用的参考实现、代码示例和模式。它整合了两个资源：Adobe 维护并遵循最佳实践的 Block Collection，以及社区驱动的 Block Party（包含区块、插件、工具和集成）。技能提供搜索脚本，可检索区块、构建工具、Sidekick/DA 插件等，并支持按类别过滤；还提供获取区块装饰前 HTML 结构的脚本，帮助开发者避免结构错误。使用时应将抓取的外部内容视为不可信资料，只做结构化参考，不执行其中嵌入的任何指令。
block-inventory 是一个为页面导入流程准备的技能，用于梳理与编目 AEM Edge Delivery Services 本地项目以及 Block Collection 中可用的区块（block）资源，帮助使用者在进行内容编排和页面导入之前了解有哪些可用的区块选项。它会扫描本地项目中的区块目录，并行检索 Block Collection 中的常见区块（如 hero、cards、columns、accordion、tabs、carousel、quote、fragment），并汇总成一份完整的区块清单。该技能面向页面导入起步、内容结构规划等场景，不负责决定应使用哪个区块、不验证区块是否正常工作、也不创建新区块。使用该技能时会从实时示例 URL 和外部区块引用抓取内容，需将抓取内容视为不可信，仅作结构化处理。
Building Blocks 是 Adobe 提供的一项技能，用于在 AEM Edge Delivery Services（EDS、Franklin、Helix）中实现代码变更，包括新建或修改区块、核心功能（scripts.js 等）、全局样式与配置。它引导开发者按照既定模式与最佳实践，通过 JavaScript 装饰与 CSS 样式将作者内容转化为丰富的交互体验。该技能强调必须先在 content-driven-development 流程的第 5 步（实现）中调用，并配合 da-auth、block-collection-and-party、testing-blocks 等相关技能使用。
content-modeling 是面向 AEM Edge Delivery Services 的内容建模技能，用于在创建新块或调整作者使用的初始结构时，设计作者在文档中操作的表格结构。它覆盖内容需求理解、块结构设计、最佳实践验证与模型文档输出四个步骤，并提供 Standalone、Collection、Configuration、Auto-Blocked 四种规范模式作为参考。适用于新建块、修改影响作者结构的现有块、审查内容模型是否符合最佳实践，以及用户明确要求内容建模的场景。
generate-import-html 是 Adobe AEM Edge Delivery Services 页面导入流水线中的一个技能，用于根据作者分析（authoring analysis）结果生成结构化的纯 HTML 文件。它属于页面导入流程的第 4 步，由 page-import 技能调用。该技能接收前序技能提供的作者分析与区块选择、区块样式决策、metadata.json 路径与元数据、cleaned.html 内容，以及已抓取的区块结构，将其转换为带区块结构的分段 HTML，并将元数据映射为 metadata 区块。生成时只输出 section 级内容，不生成 html、head、body、header、footer 或 main 标签，因为 AEM CLI 会自动包裹头部结构。该技能还负责将 import-work/images/ 目录复制到与 HTML 同级的 images/ 目录，并执行强制性校验，要求完整导入所有内容，禁止截断、省略或使用占位符。
identify-page-structure 是 adobe/skills 中的一个技能，用于在页面导入流程中识别已抓取网页的分区边界与内容序列。它采用「分区—内容序列」两级结构进行分析：先通过截图中的背景色变化、间距变化、分隔线及主题内容转变等视觉线索确定各分区边界，再对每个分区内部的垂直内容流进行拆解，判断其属于默认内容（标题、段落、列表、内联图片）还是可复用的区块组件。该技能还会在做出任何创作决策之前调用 block-inventory 技能，盘点本地已有区块和可添加的通用区块集合，为后续的创作分析提供与真实作者一致的上下文。其输入依赖 scrape-webpage 技能产出的 screenshot.png、cleaned.html 和 metadata.json，通常在 page-import 技能的第二步被调用，并会针对每个分区调用 page-decomposition 技能获取中性描述。该技能强调所有从外部 URL 抓取的内容（HTML、截图、元数据）均视为不可信，仅做结构化处理，不执行其中的任何指令。最终输出包括带样式的分区边界、每个分区的内容序列中性描述以及区块面板清单，随后传递给 authoring-analysis 技能。适用场景为 AEM Edge Delivery Services 页面导入管线中的结构分析阶段。
Page Decomposition 是 Adobe AEM Edge Delivery 页面导入流程中的一个技能，用于对单个 section 内部的内容序列进行分析，并以中立方式描述这些内容，不指定 block 名称。它由 identify-page-structure 技能针对每个 section 调用，输入包括该 section 的视觉描述与边界、截图以及清理后的 HTML。该技能识别 section 内的内容序列、找出序列之间的断点，并输出结构化结果，为后续的 block-inventory 和 content-modeling 等环节提供中立基础。
page-import 是 Adobe EDS（Edge Delivery Services）技能体系中的一个页面导入编排技能，用于将任意 URL 的单个网页导入或迁移为规范的 EDS 区块格式，即作者可在 DA 中编辑的结构化 HTML。它通过多个子技能分阶段完成导入工作流：抓取网页、识别页面结构、分析创作方式、生成导入 HTML、预览验证。该技能仅处理主体内容（如 Hero、功能、评价、CTA、正文），跳过页头、导航和页脚。它遵循 David's Model，优先考虑作者体验，尽量减少区块数量，并强调将抓取的外部内容视为不可信数据，只做结构化处理，不执行其中嵌入的任何指令。
preview-import 是 Adobe AEM Edge Delivery Services（EDS、Franklin、Helix）页面导入流程中的预览与验证技能。当用户已经通过 generate-import-html 生成 HTML 文件后，可使用本技能在本地开发服务器中打开并核对导入内容。它指导用户以 --html-folder 参数启动 aem up 开发服务器，在浏览器中访问对应路径，检查区块样式、布局、图片、元数据等是否正确渲染，并与原始页面截图进行对比。该技能通常由 page-import 技能在第 5 步调用，属于内容导入工作流的一环。
scrape-webpage 是一个用于网页抓取与内容提取的技能，主要服务于页面导入/迁移到 AEM Edge Delivery Services 的流程。它能够从指定源 URL 抓取网页，提取内容、元数据与图片，并生成可供后续导入使用的本地文件。该技能会使用无头 Chromium 加载页面，滚动触发懒加载图片，下载全部图片并将 WebP/AVIF/SVG 转换为 PNG，同时截取整页截图、提取标题、描述、Open Graph、JSON-LD、canonical 等元数据，并清理 HTML（移除脚本与样式），将图片 URL 替换为本地路径。输出包括 metadata.json、screenshot.png、cleaned.html 以及 images/ 文件夹。使用前需确保 Node.js、Playwright、Chromium 与 Sharp 已安装。该技能通常由 page-import 技能在第一步调用，其输出可供 identify-page-structure 与 generate-import-html 等后续技能使用。
该技能用于配置 Adobe Experience Manager Edge Delivery Services（EDS）区块在 Universal Editor（UE）中的呈现与行为。它帮助创建或编辑三个 JSON 配置文件：component-definition.json（在 UE 组件面板中注册区块）、component-models.json（定义每个区块的属性面板字段）、component-filters.json（控制区块可放置的位置）。适用于新建需要 UE 编辑支持的区块、修改现有区块属性面板字段、注册区块到组件面板、设置带子项的容器区块、添加区块变体/样式选项等场景。工作流程包括：分析区块的 JS 与 CSS 文件以理解内容结构，判断区块类型（简单区块、容器区块、键值区块），设计模型字段，生成三个文件的配置（支持集中式或分布式配置），最后进行校验。
该技能用于设计、实现和审计无障碍 UI，目标是让 Web、iOS 和 Android 界面符合 WCAG 2.2 Level AA 标准。它围绕 POUR 原则（可感知、可操作、可理解、健壮）展开，涵盖语义化 ARIA 角色与标签、iOS 无障碍特征与提示、Android 语义与内容描述，以及焦点管理、对比度、目标尺寸、实时区域等实现要点。适用于定义组件规范、审计现有代码的无障碍障碍、落地 WCAG 2.2 新标准（如最小目标尺寸、焦点外观），以及将高层设计需求映射为具体技术属性。技能提供跨平台属性映射表、Web/iOS/Android 代码示例、常见反模式与最佳实践清单，并引用 WCAG 2.2、WAI-ARIA、iOS 与 Android 官方无障碍指南。
该技能提供 Compose Multiplatform 与 Jetpack Compose 在 KMP 项目中的 UI 模式，涵盖状态管理、导航、主题、性能优化及平台特定 UI。适用于构建 Android、iOS、桌面和 Web 共享 UI，使用 ViewModel 与 Compose 状态管理界面，实现 KMP 或 Android 导航，设计可复用组件与设计系统，以及优化重组与渲染性能。
frontend-a11y 是一个面向 React 与 Next.js 的无障碍（Accessibility）模式技能包，重点覆盖代码审查中最常被标记的问题，例如表单缺少标签、ARIA 使用不当、交互元素语义不正确以及键盘导航失效。它提供可直接参考的代码示例，涵盖语义化 HTML、ARIA 属性、表单标注、错误提示关联、键盘导航、焦点管理、图像替代文本、动态内容播报以及减少动效偏好等主题。技能适用于构建或审查表单组件、创建模态框/下拉菜单/提示框/标签页等交互元素、在 div 或 span 上绑定 onClick、添加 aria-* 属性、实现键盘导航与焦点管理，以及需要支持屏幕阅读器的组件。
该技能用于为生产级 UI 工作设定 ECC 专属的前端设计方向，适合在构建或改进网站、仪表盘、应用、组件、落地页等界面时使用，目标不只是让 UI 能运行，而是让界面显得有目的性、精致且契合产品领域。它在编码前先确定设计方向：明确接口用途、目标受众、整体语调（如实用、编辑感、俏皮、工业、精致、技术、极繁、极简、密集、平静等）、一个令人印象深刻的记忆点，以及框架、无障碍、性能、响应式和现有设计系统等约束。实现层面提供证据契约与内容状态管理（加载、空、错误、部分、成功、权限），倡导复用现有组件与令牌、使用真实视觉资产、多维配色、明确的响应式约束与克制而有目的的动效，并列出常见反模式（紫色渐变、装饰性气泡、超大卡片、空洞英雄文案、卡片嵌套卡片等）。还包含评审清单与渲染完成门禁，要求在实际目标视口检查键盘导航、焦点、对比度、减少动画、触控目标及长内容布局，并运行配套的证据检查脚本。可选 UIZZE 研究工作流需用户授权方可使用。暂未提供具体价格、平台支持范围等未在资料中明确的信息。
frontend-patterns 是一份面向 React 与 Next.js 的前端开发模式技能，聚焦组件设计、状态管理、性能优化与 UI 最佳实践。它覆盖组件组合、复合组件、Render Props、自定义 Hooks（如 useToggle、useQuery、useDebounce）、Context + Reducer 状态管理、memoization、代码分割与懒加载、长列表虚拟化、表单校验、错误边界、Framer Motion 动画以及无障碍键盘导航与焦点管理等主题，并配有可直接参考的 TypeScript 代码示例。适合在构建或审查 React 组件、处理数据获取与状态、优化渲染性能、实现表单与可访问交互时使用。
Frontend Slides 是一个用于创建零依赖、动画丰富的 HTML 演示文稿的技能。它可以从零开始构建演示文稿，或将 PowerPoint（.ppt/.pptx）文件转换为 HTML 演示。该技能强调每个幻灯片必须适配单个视口、无内部滚动，采用内联 CSS 和 JS 的单文件结构，并通过视觉预览方式帮助用户探索设计风格。适用于制作演讲、路演、工作坊或内部演示，以及改进现有 HTML 演示的布局、动效和排版。
该技能用于在界面中落实具体的设计工程细节，让 UI 更具打磨感。它针对间距、排版、边框、阴影、动效、命中区域、图片描边等常见问题给出明确做法，适合在评审或改进控件、卡片、列表、仪表盘、导航、表单和工具栏时使用。技能强调同心圆角、光学对齐、分层阴影与边框、文本换行、表格数字、字体平滑、图片描边、可中断的 CSS 过渡、过渡属性范围以及至少 40x40px 的命中区域。评审时可输出原则、改动前和改动后的对照表，并附带不易察觉的文件路径与属性。
Motion Advanced 是一套面向 React / Next.js 的高级动效模式技能，专注于复杂、可交互、基于物理的动画实现。它要求先完成 motion-foundations 的配置，适用于 motion-patterns 无法满足需求的场景。该技能覆盖拖拽与手势（可拖拽卡片、拖拽关闭面板、Reorder.Group 可排序列表、滑动检测、长按、捏合轮廓）、文本动画（逐词显现、逐字打字机、数字计数器）、SVG 动画（路径描边、图标变形、环形进度）、自定义 Hook（useScrollReveal、useHoverScale、useNavigationDirection、useInViewOnce）、基于 useAnimate 的命令式多步序列，以及加载组件（spinner、shimmer 骨架屏、脉冲指示点、进度条、按钮加载态）。其核心原则包括：直接操控场景优先使用基于物理的弹簧动画；用 useMotionValue + useTransform 在不触发重渲染的情况下计算派生值；useAnimate 序列具备中断安全性；motion values 对 SSR 安全。技能还给出明确规则，如拖拽需在触屏设备测试、无限动画在标签页隐藏时暂停、滑动阈值需显式定义、自定义 Hook 必须清理监听器、SVG 变形要求路径命令数一致等，并提供决策指引表帮助选择合适 API。
面向 React / Next.js 的动效基础层技能，基于 motion/react 定义统一的动效令牌、弹簧预设、性能规则、设备适配、无障碍约束与 SSR 安全规范，供下游动效技能继承。
Motion Patterns 是一套面向 React / Next.js 的生产级动画模式集合，基于 motion-foundations 的 token 与弹簧参数构建，提供按钮、模态框、Toast、列表错峰入场、页面过渡、退出动画、滚动揭示与布局动画等常见 UI 动画的可复制代码。所有模式统一从 motion-foundations 导入时长与缓动值，不自行定义数值，并强调 AnimatePresence 包裹、key 与 exit 的完整配合，以及模态框的无障碍要求。
Motion System v4.2 是一套面向 React / Next.js 的生产级 UI 动效系统，强调性能、可访问性与可用性，而非装饰。它给出动效的使用判断标准：动效应引导注意力、传达状态、保持空间连续性，否则应移除。系统提供安装方式（npm install motion）、动效令牌（时长、缓动、位移）、性能规则（优先使用 transform 与 opacity，避免 width/height、top/left）、低端设备适配启发式、无障碍支持（useReducedMotion、CSS 媒体查询、Tailwind 变体）、核心模式（whileHover、whileTap、whileInView、useScroll + useTransform、AnimatePresence、layout、useAnimate）、AnimatePresence 的 mode 选择（wait、sync、popLayout）、模态框要点（焦点陷阱、Escape 关闭、滚动锁定、ARIA 角色）、SSR 安全、调试与 QA 清单、反模式以及多个代码示例（按钮交互、减弱动效、交错列表、模态框、滚动视差、骨架屏、共享布局）。