frontend-design
frontend-design 是一个用于创建独特、生产级前端界面的技能，强调高设计质量与鲜明美学方向，避免常见的“AI 味”设计。适用于用户要求构建 Web 组件、页面或界面时使用。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-27 00:15
前端与建站
11,191 个结果
sfnext-data-fetching
该技能介绍 Storefront Next 中服务端数据获取模式，涵盖 loader、action 与 useScapiFetcher 钩子，用于编写 loader 函数、调用 SCAPI 及处理表单变更等场景。
semantic-html
semantic-html 是 claude-toolkit 中的一项技能，用于编写服务所有用户的语义化 HTML。适用于创建组件、页面结构或审查标记，强调优先使用原生 HTML 元素而非 ARIA，并涵盖地标、标题层级、列表、交互元素与表单等实践。
impeccable-polish
在仅支持技能的环境中运行 Impeccable /polish 流程的前端交付前终检工具，用于系统性修复对齐、间距、一致性与细节问题，把功能完成的界面打磨到可发布的质量水准。
free-website-dr-checker
免费 Ahrefs 域名评级（DR）查询工具，打开 dr.serp.co 输入域名即可查看 0-100 的 DR 分数并生成验证徽章，无需登录，可用于外链建设、客座发文、竞品调研、过期域名评估和代理拓展等 SEO 场景。
markstream-svelte
用于在 Svelte 5 或 SvelteKit 中集成 beta 版 markstream-svelte 渲染器的技能：使用 runes、显式 CSS、流畅流式输出与 worker，并保持 SSR 安全边界。Svelte 4 不支持。
frontend-developer
frontend-developer 是一个面向现代 React 应用的前端开发技能，用于构建 React 组件、实现响应式布局、管理客户端状态，并关注前端性能与无障碍。
chartjs-integrations
Chart.js 框架集成指南（v4.5.1），介绍在 React、Vue、Angular、Rails 8 及原生 JavaScript 中使用 Chart.js 的安装方式、组件用法、动态更新与 SSR 处理。
chartjs-tooltips
Chart.js 工具提示（Tooltip）配置与自定义指南，涵盖 options.plugins.tooltip 的样式选项、交互模式、各类回调（标题、内容、页脚、颜色），以及 external 外部 HTML 提示框实现与 React、Vue 集成示例。
kinde-nextjs
用于在现有 Next.js App Router 项目中集成或修复 Kinde 身份认证的技能，按“先检查、再写设置契约、按依赖顺序实施、最后验证”的流程工作，涵盖路由保护、服务端授权、共享导航栏会话与部署配置。
vean-ui
Vean 是一个面向 Vue 3 的 UI 库，提供 styled 与 aria 两个包。本技能帮助开发者在 Vue 和 Nuxt 应用中正确使用 Vean，包括在 @vean/ui（预置样式的 S* 组件）与 @vean/aria（无样式、含逻辑与无障碍能力的原语）之间做选择，配置样式与 SConfigProvider，以及查阅组件文档。技能内含 REFERENCE.md、aria-vs-styled、theming、components 等参考文件，并按需加载具体组件的说明，涵盖组件概览、特性、导出符号、props、emits 与 slots。
ui-workflow
Storybook 提供的 UI 变更工作流技能，用于在已安装 Storybook 的项目中处理前端界面改动：查找可复用组件、编写与更新 story、运行 story 测试，并发布可审阅的 Storybook 预览。该技能要求 Storybook 版本不低于 11.0，需从安装 Storybook 的同一工作目录运行开发服务器和所有 CLI 命令，并通过 npx storybook skills ui-workflow 获取强制且有序的工作流程说明。
human-optimized-frontend
human-optimized-frontend 是一个前端设计技能，通过联合优化美学、动效与用户体验，生成视觉悦目且体验合理的前端界面规范。仅在用户明确要求重设计前端并点名该技能时激活，不生成代码、素材或原型。
react-hook-form
React Hook Form 是一个面向 React 的高性能表单库，通过非受控输入减少重渲染，并可与 Zod 等 schema 校验集成，适合处理表单校验、复杂多步表单等场景。
react-native-performance
面向 React Native 应用性能优化的技能，涵盖 FlatList 列表优化、组件记忆化、图片优化、包体积缩减与性能分析等主题，并提供代码示例与常见反模式说明。
react-native-styling
面向 React Native 的样式技能，讲解用 StyleSheet API、Flexbox 布局、响应式设计与主题系统为组件设置样式，覆盖 iOS 与 Android 的平台差异样式和设计令牌、设计系统实践。
citations
前端检查清单中的引用规则，用于审计页面是否引用权威外部来源，以支撑 E-E-A-T 中的可信度信号。属 SEO/元数据检查项，涉及内容外链、锚文本与可索引输出。
consent-mode
前端检查清单中的一项规则，用于核查网站是否正确实现 Google Consent Mode v2：检查 Google Consent Mode v2 的实现及同意状态是否正常发送，适用于排查与隐私合规及转化分析相关的页面加载与渲染延迟问题。
css-grid
CSS Grid 是前端检查清单中的一条规则，用于指导在需要同时控制行和列的二维布局时使用 CSS Grid，而非 Flexbox 或浮动布局。该规则强调：Grid 适合二维布局（行与列），Flexbox 适合一维布局；grid-template-areas 可在 CSS 中直观呈现布局结构；minmax() 配合 auto-fill/auto-fit 能创建无需媒体查询的响应式网格；subgrid 可让嵌套元素对齐父网格轨道。规则提供了检查、修复、讲解和代码审查四种使用方式，帮助开发者识别并改造用 Flexbox 或浮动实现二维布局的样式，并针对具体选择器、声明或断点给出反馈。
css-minification
CSS 压缩检查规则，来自前端检查清单。用于审查生产环境样式表是否已压缩，减少空白、注释与冗余写法以缩小体积。提供启用构建工具压缩、使用 cssnano 或 lightningcss、结合 Gzip/Brotli 等要点，并说明典型可减少 20-40% 体积。
css-non-blocking
前端检查清单中的“无阻塞加载 CSS”技能，用于审查样式表、组件样式与响应式表现，减少渲染阻塞对首次内容绘制（FCP）的影响。
decorative-elements
该规则用于在审查已渲染 HTML、交互组件或设计系统时，将纯装饰性元素从辅助技术中隐藏，避免屏幕阅读器逐条朗读无意义的图像和图标，从而减少无障碍体验中的噪声。
dimensions
前端检查清单中的图片尺寸规则，用于审查图片资源、标记与 CDN/构建转换，确保为图片设置明确的 width 和 height，以减少累积布局偏移（CLS）。
font-loading
font-loading 是前端检查清单（front-end-checklist）中的一项性能规则，用于审计与优化网页字体加载。当页面加载缓慢、资源体积过大或渲染延迟与字体加载相关时，可使用该规则排查问题。它关注字体加载策略，检查是否使用 font-display、是否预加载关键字体，并给出修复建议：在 @font-face 声明中添加 font-display: swap 以避免加载期间出现不可见文本（FOIT），使用 <link rel='preload'> 提前发现并加载最重要的字体，同时建议采用 WOFF2 等现代格式以获得更好的压缩效果。该规则还要求解释字体加载如何影响感知性能与布局稳定性，并在代码审查中定位影响字体加载的路由、资源与加载行为，指出增加不必要网络、CPU 或布局成本的具体文件、请求或渲染步骤，并说明确认问题所用的测量方法。完整实现细节、代码示例与框架相关指导见 references/rule.md。