hunt-file-upload
hunt-file-upload 是 claude-bughunter 技能集中针对文件上传漏洞的侦察与利用指南，覆盖通过 webshell 实现 RCE、SVG/HTML 触发 XSS、DOCX 中的 XXE 引发 SSRF、文件名路径遍历等攻击面，并给出十种绕过手法与防护建议。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-18 00:12
前端与建站
10,835 个结果
makeui
makeui 是一个面向 Make App 前端 UI（apps/ui）的技能，用于设计、生成、修改和审阅应用外壳、导航、列表、抽屉、表单、响应式布局等界面结构与表现。默认技术栈为 React + Vite + React Router，移动端使用 @qfei-design/make-app-mobile。
studio-error-handling
Supabase Studio 的错误展示与排查模式：在数据层做错误分类，UI 层按类型渲染排查步骤或通用 AlertError，用于处理失败的 API 请求或查询错误。
cursor-animated-sites
cursor-animated-sites 是建立在 /docs-site-macos 玻璃主题之上的单文件 HTML 演示技能，用左侧步骤列表与右侧动态文件夹树图解生命周期或数据流，光标在左侧栏逐步移动，文件按创建步骤逐字出现。
image-to-code
面向 Codex 的网站图像转代码技能，强调先生成设计图、再深度分析、最后实现前端，避免通用 AI 风格与不可提取的设计。
webperf-loading
WebPerf: Loading Performance 是一套用于在 Chrome DevTools 中测量网页加载性能的 JavaScript 代码片段集合，属于 nucliweb/webperf-snippets 项目。它通过 Chrome DevTools 的脚本执行与日志读取能力运行，覆盖 TTFB 拆解、渲染阻塞检测、脚本加载、资源提示、字体、压缩、Service Worker、SSR 水合数据等加载性能主题，并提供常见工作流与决策树，帮助按结果自动执行后续分析片段。
design-taste-frontend
面向落地页、作品集与改版的前端设计技能，强调先读懂需求再定设计方向，避免 LLM 默认的紫色渐变、居中英雄区等套路化产出。提供设计判读、三个调节维度与配色字体规则。
design-taste-frontend-v1
design-taste-frontend-v1 是 design-taste-frontend 的原始 v1 版本，被保留下来供依赖其确切行为的项目使用；当前默认版本为 design-taste-frontend（v2 experimental）。该技能建立在前端设计基础规范之上，通过一组可配置的基线参数与工程化指令，约束 AI 生成的前端界面风格，减少通用化、模板化的设计倾向。其核心参数包括设计变化度（DESIGN_VARIANCE，默认 8）、动效强度（MOTION_INTENSITY，默认 6）与视觉密度（VISUAL_DENSITY，默认 4），并以此驱动具体的布局、颜色、排版、动效与交互规则。技能还涵盖技术栈约定、性能护栏以及明确禁止的常见 AI 设计套路清单，适用于需要高质量、非模板化前端界面的项目。
imagegen-frontend-web
这是一个面向前端设计的图像生成技能，用于产出高端、注重转化效果的网站设计参考图。其核心输出规则是：每个页面区块单独生成一张横向图片，绝不把多个区块合并到一张图里。技能内置了一套艺术指导基线配置（如设计变化度、视觉密度、艺术方向、实现清晰度等），并提供了组合式变化引擎，涵盖主题范式、背景特征、字体性格、首屏架构、区块系统、标志性组件、动效暗示、构图锚点、背景模式、CTA 变化、首屏尺度、叙事主线等维度，以避免生成千篇一律的 AI 风格图像。它强调首屏构图不应默认采用“左文右图”这一最泛滥的 AI 模式，而应优先考虑居中、左下、右下、堆叠居中、图像即画布、离网编辑式等替代方案。该技能还要求每张图清晰传达布局、区块层级、间距、字体尺度、视觉节奏、CTA 优先级、组件样式和图像处理方式，使开发者或编码模型能据此理解如何构建页面。
react-testing
React 组件测试技能，覆盖组件、Hook、Context 与表单测试模式，主要基于 Vitest Browser Mode 的 vitest-browser-react 与 @testing-library/react。强调像用户一样通过角色、标签或可见文本定位元素，避免 data-testid、CSS 类或选择器，并给出无障碍查询、异步渲染与断言等实践。
ux-audit
ux-audit 是由 mblode/agent-skills 提供的静态 UX 质量审查技能，专门针对 React/Next.js 代码。它以功能（feature）为单位进行审查，例如结账流程、引导流程、仪表盘等，而不是停留在原则层面。该技能默认采用 diff-aware 模式，审查 PR 中改动的文件，帮助前端开发者判断“哪些问题会在生产环境伤害用户，哪些只是锦上添花”。它运行功能级检查清单，检测登录、结账、表单、模态框、列表、仪表盘等特征并应用对应 playbook；每个发现会被赋予 ship 层级（release-blocker、fix-this-sprint、backlog），并提供基于 React 19 API 的具体修复建议。该技能明确不重复 Lighthouse、axe-core、eslint-plugin-jsx-a11y、Chromatic/Percy、size-limit 等工具的职责，遇到重叠问题会引导使用对应工具。它包含三层审查：功能 playbook、现代前端失败模式规则、UX 定律规则。输出支持终端表格、PR 评论和 CI JSON 三种适配器，并支持通过内联注释抑制特定发现。该技能要求提供文件:行号证据，禁止凭空捏造发现，并有自检机制确保审查完整。
internationalization
用于规划与执行多语言、多地区网站的国际化和本地化技能，覆盖 URL 结构、内容组织、hreflang 与 canonical、翻译流程和区域化用户体验，与具体技术栈无关。
vchart-development-assistant
VChart 图表开发助手技能，面向 VChart 2.0.0+，可生成图表配置、诊断修复图表问题、从截图或 Figma 设计稿还原样式，并实现点击事件、动态更新、联动高亮、导出图片、主题切换等交互，支持原生 JS 与 React-VChart。
dagre-react-flow
本项目介绍如何结合 dagre 与 React Flow（@xyflow/react）实现有向图的自动布局。dagre 负责计算层级与树形结构的最优节点坐标，React Flow 负责渲染。文档给出可复用的 getLayoutedElements 布局函数与 useAutoLayout Hook，覆盖坐标转换、节点尺寸处理、布局方向（TB/BT/LR/RL）、边权重与最小层距、节点分组排除及常见问题排查。核心要点包括：dagre 返回节点中心坐标，而 React Flow 使用左上角坐标，需按宽高做半径换算；布局后更新 React Flow 状态需使用新数组引用，否则视图不刷新；fitView 应在节点提交后于下一帧调用。安装命令为 pnpm add @dagrejs/dagre。文档还提示大图性能优化可通过 Web Worker、防抖和增量布局实现。
html-mind-map
用于创建可拖拽的分支式 HTML 思维导图与概念图，帮助捕捉头脑风暴、梳理知识结构、探索调试假设或整理嵌套概念。交互式编辑，可回传给 AI 继续处理。
web-design-studio
Web Design Studio 是一个用于创建或重设计生产级独立网站的技能，使用语义化 HTML、CSS 和 JavaScript，强调鲜明的艺术方向与 Codex 生成的位图素材。它仅产出独立静态站点，不迁移或重写 React、Vue、Next.js、Svelte 等框架项目；若存在 .openai/hosting.json 则改用 Sites 技能。工作流涵盖项目审计、产品与内容定义、确定单一艺术方向、规划视觉素材、用 Codex 内置 image_gen 生成位图、实现完整站点、预览验证，以及按需生成中文设计交付文档。
og-image-generation
该技能介绍如何在 Next.js 中利用文件约定与 next/og 库生成动态社交预览图（OG 图），以 JSX 服务端渲染图片，并可在构建时缓存。资料未提供收费、价格或具体使用效果信息。
shiki-code-blocks
使用 Shiki 对代码块进行语法高亮，支持在 RSC 中服务端渲染，并可自动切换浅色/深色主题。
feature-slicing
Feature-Sliced Design（FSD）是一种前端代码组织方法论，本技能用于在项目中应用 FSD v2.1 进行模块边界决策。它帮助开发者判断代码应放置在哪个层级（app、pages、widgets、features、entities、shared），维护切片之间的导入契约，并设计公开 API。适用于采用 FSD 架构、在已有 FSD 项目中放置代码，或修复切片导入与公开 API 问题的场景。技能强调用户明确指令优先，普通前端编辑不构成迁移架构的许可，并优先保持页面局部所有权，仅在共享使用或职责明确时才进行抽取。
webperf-interaction
这是一套面向 Chrome DevTools 的 JavaScript 性能测量片段集合，聚焦交互与动画性能分析。它通过 mcp__chrome-devtools__evaluate_script 执行脚本、用 mcp__chrome-devtools__get_console_message 捕获输出。脚本覆盖 DOM 大小与深度、强制同步布局检测、输入延迟拆解、交互列表、布局偏移跟踪、长动画帧（LoAF）及其脚本归因、长任务、滚动性能分析等。工具围绕 INP 调试、滚动卡顿排查和主线程阻塞分析，提供了自动化的决策树与性能预算阈值：例如交互超过 200ms 提示运行输入延迟拆解，长动画帧超过 50ms 触发脚本归因，滚动 FPS 低于 30 进入完整卡顿排查流程。资料还给出多种常见工作流，包括完整的交互性能审计、INP 深度排查、滚动卡顿调查、主线程阻塞分析、交互期间的布局偏移、动画性能分析以及第三方脚本对交互的影响，并说明可与 webperf-loading、webperf-core-web-vitals、webperf-media 等技能交叉引用。适用场景为前端性能工程师和开发者定位交互响应慢、动画掉帧、滚动卡顿与主线程阻塞问题。限制方面，工具依赖 Chrome DevTools 环境与相关 MCP 调用；部分能力（如具体脚本实现细节与安装方式）在资料中暂未提供。
html-code-review
用于生成代码评审、PR 说明与代码库理解类 HTML 产物的技能：把真实 diff 渲染成带边注、严重度标记、风险地图与流程图的页面，便于评审者快速定位重点。
react-native-update
用于在 React Native 项目中集成与排查 react-native-update 热更新（OTA）的 Agent Skill，面向 Pushy（中国）与 Cresc（全球）两套服务，覆盖 RN CLI、Expo prebuild 等场景，提供最小改动的集成步骤、校验清单与排错方法。
design-taste-frontend
这是一个面向前端界面设计与实现的高能动性技能，用于在构建或审查 React、Next.js、Tailwind 等前端 UI 时提供严格的设计品味约束。它通过可调的设计变量（设计变化度、动效强度、视觉密度）驱动排版、配色、布局、材质、交互状态与动效规则，主动纠正大模型常见的 UI 套路，如居中英雄区、紫色渐变、卡片滥用、状态缺失和脆弱布局。技能还包含依赖校验、响应式与性能护栏、禁止模式清单以及高端创意组件参考库，帮助产出更精致、非通用化的界面。它提供设计与实现指导，不替代产品需求、无障碍审查和用户测试，生成结果需在目标仓库中验证后再视为可上线。
pinia-colada-skilld
基于 Pinia 的 Vue 数据获取层 @pinia/colada 的技能说明，涵盖查询、变更、缓存失效、无限查询、SSR 与插件等用法，适用于编写、调试或审查使用 @pinia/colada 的代码。