CSS

frontend-slides 可帮助你从零创建动效丰富的 HTML 演示文稿，也可以通过转换 PowerPoint 文件来完成。适合用于演讲、路演 deck、工作坊、内部演示，以及做 frontend-slides for UI Design 时的视觉探索；当你需要零依赖的浏览器输出、并且希望幻灯片刚好适配单个视口时，这个 skill 很合适。

使用 frontend-design 构建有鲜明视觉主张、可直接投入生产的前端界面。这个 frontend-design 技能适用于着陆页、仪表盘、应用壳和各类组件，尤其适合层级、字体排版、动效和整体质感与实现同样重要的场景。它还包含面向 design-first UI 工作的安装与使用指引。

使用 design-system skill 生成或审核 UI 系统，从现有代码中提取 tokens，并在真实仓库中检查样式一致性。

overdrive 是一个面向雄心勃勃的 UI 设计工作的 GitHub skill，强调上下文收集、先提案后执行，以及出色的交互质量。适合用于安装并应用 overdrive，以实现电影感过渡、响应式界面和高冲击力的产品体验。

typeset 通过修正字体选择、层级、字号、字重和可读性来提升 UI 排版，让文字更有意图感。若 UI 设计中的文案显得普通、不统一或难以快速扫读，而你又希望用更清晰的排版体系减少试错，就使用 typeset 技能。

当界面显得扁平、拥挤，或布局过于机械时，layout skill 可帮助改进间距、层级和整体构图。它适合处理布局、对齐和视觉节奏相关问题，提供的是面向 UI Design 的实用布局指导，而不是泛泛的样式建议。尤其适用于需要做结构性调整、强化分组关系、优化阅读顺序的场景。

optimize 技能用于诊断并修复 UI 性能问题，涵盖加载速度、渲染、动画、图片和包体积。适合在你需要一份结构化的 optimize 指南时使用，尤其是面对加载慢、卡顿、掉帧或观感不顺滑的网页体验时，可采用先测量、后排查的方式进行性能优化。

impeccable 是一款面向 UI 设计与前端开发的 skill，可用于打造有辨识度、可投入生产的界面。你可以通过 craft、teach 或 extract 工作流推进设计、加载高相关参考资料，并实现更精致的组件、页面与设计系统模式；同时它也提供了更明确的安装与使用指引。

layout 技能用于审查并优化 UI 的构图、间距、层级、对齐和视觉节奏。它尤其适合界面拥挤或结构薄弱的页面，但使用前依赖 /impeccable 先完成上下文收集。

frontend-design 是一项以上下文为先的技能，用于打造更有辨识度的前端 UI 代码。它能把目标受众、使用场景和品牌语调转化为更出色的布局、排版、配色、动效、交互状态与 UX 文案，适用于页面、组件和完整流程设计。

harden skill 可帮助前端 UI 更好地达到生产可用标准，重点覆盖更完善的错误处理、空状态与加载状态、文本溢出修复、i18n 支持，以及面向真实数据场景的边界情况处理。

guizang-ppt-skill 是一款演示技能，用于构建单文件 HTML 幻灯片，整体风格偏编辑杂志 × 电子墨水屏。它适合制作用于发布会、演讲和演示的横向滑动式 deck，强调强排版、WebGL 背景和可复用布局。使用 guizang-ppt-skill 指南，可以更快、更稳定地生成 deck。

hyperframes-registry 帮助你更少靠猜测地安装并接入可复用的 HyperFrames registry 项目。可用它来执行 `hyperframes add`，区分 blocks 和 components，合并 snippets，将 blocks 接入 `index.html`，并按照 `hyperframes.json` 的路径映射完成设计落地和 registry 发现。

gsap 是面向 HyperFrames 作品的实用动画参考。它能帮你在 gsap.to()、from()、fromTo() 和 gsap.timeline() 之间做出选择，并正确应用 vars、easing、stagger、transform 以及性能模式。需要可直接落地的入场动画、过渡效果和可复用设计动效时，可以用这份 gsap 指南来确定实现方案。

hyperframes 是一项工作流技能，用于在 HyperFrames 中构建基于 HTML 的视频合成。适用于需要结构化、以代码为先的 hyperframes 视频编辑场景，比如标题卡、叠加层、字幕、配音、音频驱动动效和场景转场。它更强调布局、时序和动画决策，而不是泛泛的只靠提示词生成视频请求。

vue-best-practices 是一项面向 Vue 3 的技能，适用于代码生成、代码审查和重构。它会引导代理优先采用 Composition API、`<script setup lang="ts">`、清晰明确的数据流、兼顾 SSR 的实现选择，并提供关于 reactivity、SFC、composables、Router、Pinia 以及基于 Vite 的应用的核心参考资料。

infocard 通过在页面中直接嵌入 HTML 和 CSS，帮助你用 Markdown 创建编辑风格的信息卡片。它适用于摘要、主题速览、重点面板、活动卡片、对比模块以及其他希望呈现出“刻意设计感”的 UI 设计友好内容。它不适合图表或数据可视化；这类需求应改用专门的图表或流程图技能。

Architecture 是一项用于在 HTML 和 CSS 中构建分层系统视图的制图 skill，支持颜色分区、网格布局和清晰的组件层级。它尤其适合用户/应用/数据/基础设施图、微服务拓扑和企业架构。与通用提示词相比，当你需要快速、可编辑的 Diagramming 输出时，它更适合直接使用。

ui-web 帮助你设计和美化 Web UI 组件，提供 WCAG 2.1 AA 检查、强对比度、可见控件以及适合深色模式的 Tailwind 模式。对于 React 风格前端，当你需要实用的 UI 设计指导来提升可访问性并减少试错时，可以使用这个 ui-web 技能。

web-design-guidelines 是一套与框架无关的指南，帮助你构建、审查并修复可访问、响应式的 Web UI。适用于语义化 HTML、WCAG 2.2 检查、表单、焦点状态、对比度、深色模式、性能，以及跨 HTML、CSS 和 JS 的布局决策。

使用内联 SVG，将技术架构图制作成独立的 HTML 文件，呈现精致的深色主题效果。architecture-diagram skill 面向系统架构、基础设施、云、安全和网络拓扑图，提供可直接在浏览器中打开的可视化结果，具备语义化配色、清晰的组件关系和统一的技术风格。

pptx-posters 可帮助你用 HTML/CSS 制作适合 PowerPoint 交付的研究海报，并支持导出为 PDF 或转换为 PPTX。仅在用户明确需要 PPTX 海报或需要在 PowerPoint 中编辑时使用此技能。对于常规研究海报，latex-posters 通常更合适。

redesign-existing-projects 技能可将现有网站和应用升级到高端质感。它会审查当前设计，识别通用的 AI 痕迹，并在不破坏功能的前提下实现更精致的高阶设计。适用于任何 CSS 框架或纯 CSS。

fixing-motion-performance 可帮助你审查并修复 UI 动画性能问题，默认不更改你的技术栈。适合前端场景中动画卡顿、与滚动联动的效果开销过高，或过渡动画触发布局、绘制或合成工作时使用。它能把动画 bug 转化为清晰、可直接落到代码层面的修复方案。