frontend-design
frontend-design 是一个用于创建独特、生产级前端界面的技能，强调避免通用“AI 味”审美，通过明确的美学方向、字体、配色、动效与空间构图，产出可运行且视觉出众的代码。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-24 00:15
前端与建站
11,036 个结果
recipe-front-adjust
这是一个用于在会话内调整已实现 UI 的工作流技能，核心是在编辑后对照设计源进行验证。它面向已经实现的前端功能，通过「编辑 → 对照设计源检查 → 细化」的循环在父会话中运行，并将一次性任务（如质量检查）委派给子代理。技能包含外部资源听取、写入集检查、结构边界判断、调整上下文确认、调整与验证、质量验证和提交等步骤，并在关键节点设置停止标记等待用户确认。当请求跨越职责或已批准的 UI 边界、需要完整设计文档或涉及持久技术选择时，会升级到完整的前端设计阶段。
svg
这是 Software Mansion 提供的 React Native SVG 渲染最佳实践技能，用于在 React Native 应用中使用 react-native-svg 渲染矢量图形、图标、图表等内容。技能包含生产环境下的 SVG 模式与参考文档，帮助开发者决定何时使用 react-native-svg、expo-image、@expo/vector-icons、Skia 或 Lottie，并涵盖安装、从 URI/XML 字符串/文件加载 SVG、滤镜、触摸事件、性能注意事项及已知问题。
vue-dev
vue-dev 是一个面向 Vue 3 开发的指导型智能体技能，来源标识为 story-has-you/skills。它定位为资深 Vue 3（Composition API）开发专家，用于在编写 Vue 3 或 TypeScript 代码时提供架构、组件设计、状态管理、代码规范等方面的权威指导。其技术基线包括 Vue 3 + <script setup>、Vite、严格模式 TypeScript、Element Plus 或 Naive UI（按需引入）、Tailwind CSS 或 Scoped SCSS、Pinia、Vue Router 4、VueUse Motion 或 GSAP 动画以及 pnpm 包管理。工作流覆盖需求分析与拆解、组件实现与封装、国际化处理等环节，并给出状态管理、副作用管理、性能优化、错误处理、组件渲染策略等核心原则，以及 17 条组件封装原则和代码质量规范。该技能强调生产级、可扩展、可维护的前端实现，要求单一职责、逻辑与视图分离、文案不硬编码、类型不使用 any、单文件组件行数不超过 300 行等。
syncfusion-react-autocomplete
Syncfusion React AutoComplete 是用于输入联想与筛选下拉的 React 组件，随用户输入返回匹配建议列表并支持选择。支持本地与远程数据、多种过滤、模板、分组、虚拟滚动与无障碍。
syncfusion-vue-dropdowns
Syncfusion Vue 3 下拉类 UI 组件的实现指南，覆盖 AutoComplete、ComboBox、DropdownList、ListBox、Mention、MultiColumnComboBox、MultiSelect、DropdownTree 等组件。内容按组件组织，包含快速入门、数据绑定、过滤、分组、模板、值绑定、虚拟滚动、禁用项、无障碍与本地化、样式定制、常见问题与 API 参考等主题，并给出对应的参考文档路径。适合在 Vue 3 项目中集成 Syncfusion 下拉组件的开发者查阅。
syncfusion-vue-layouts
Syncfusion Vue 3 布局组件指南，涵盖 Card、DashboardLayout、ListView、Splitter、Timeline 五类界面搭建模块，基于 Vue 3 Composition API 与 script setup 编写示例，含安装、CSS 引入与用法参考。
syncfusion-vue-navigations
Syncfusion Vue 3 导航组件技能，涵盖 AppBar、Accordion、Breadcrumb、Carousel、ContextMenu、Menu、Sidebar、Tabs、Toolbar、TreeView、Stepper 共 11 个导航类组件的使用指导，适用响应式菜单、标签页、侧边栏与多步骤流程等界面构建。
syncfusion-vue-popups
Syncfusion Vue 弹出组件（Dialog、ToolTip）使用指南，涵盖模态/非模态对话框、预定义 Alert/Confirm/Prompt、工具提示的内容、定位、打开模式、动画、无障碍与本地化等能力，含安装命令与代码示例。
scroll-cinema
Scroll Cinema 是一个用于生成电影感滚动叙事（scrollytelling）网站的技能。它把 Lenis 平滑滚动、GSAP ScrollTrigger 章节揭示动画与 Three.js 着色器背景整合为一套统一系统：Lenis 提供顺滑的滚动运动，GSAP ScrollTrigger 编排带流体色彩过渡的章节入场，Three.js 渲染随光标位置与滚动进度变化的绘画质感背景。该技能提供四种模式（chapter-reveal、painted-backdrop、full-cinema、catalog）、三种着色器预设（painted-dots、watercolor、domain-warp）、OKLCH 色彩插值系统与四条电影感缓动曲线，并附带生成脚本与校验脚本。输出为单文件 HTML，仅使用 CDN 引入依赖，要求纯原生 HTML/CSS/JS，不依赖 React、Vue 或 Svelte。
image-optimization
该技能用于审查网页图片资源、标记与 CDN 或构建转换，目标是优化所有图片以适配 Web。图片通常占页面体积的 50% 以上，未优化会导致加载缓慢、带宽浪费、Core Web Vitals 评分差。技能涵盖格式选择（AVIF > WebP > JPEG/PNG）、压缩质量、响应式 srcset、picture 元素回退、宽高属性防布局偏移、懒加载等检查与修复建议。
button
面向开发者的按钮（Button）UX 模式参考，说明何时使用按钮触发操作或提交表单、何时应改用链接等其他组件，并给出无障碍属性与实现流程要点。
table
该技能用于在界面中以行和列的形式展示结构化数据，属于数据展示类的 UX 模式。适用于需要让用户快速浏览、比较、分析并与较大数据集交互的场景，例如财务数据、库存、用户列表或分析数据。文档强调在数据关系适合用网格呈现、需要支持排序/筛选/搜索、支持批量操作或便于导出时使用；并明确列出不适合的场景，如属性极少的简单列表、复杂层级数据、内容繁重的条目、缺少响应式方案的小屏移动端、对实时更新有强需求的情况，以及非结构化叙述内容。文档还给出实现工作流、无障碍与性能护栏（如首屏 50 行渲染目标 <300ms、1000 行排序 <100ms、虚拟滚动保持 60 FPS、10000 行内存 <50MB）、客户端与服务端排序/筛选的选择依据，以及常见错误与修复建议。
joy-ui
Joy UI（@mui/joy）是 MUI 推出的替代性组件库，提供区别于 Google Material Design 的现代简洁设计语言。它以 CSS 变量作为一等特性，具备灵活的 variant 系统（solid、soft、outlined、plain）和更简单的 API。Joy UI 沿用 MUI 的工程品质（无障碍、TypeScript、可组合性），但设计决策不同：默认使用 CSS 变量、语义化颜色（primary、neutral、danger、success、warning）、用 decoration levels 替代 elevation，外观圆润现代。适合不希望应用看起来像 Material Design、需要零配置暗色模式、构建现代 SaaS 仪表盘的场景；若需符合 Material Design 规范或最大组件目录，则应选 Material UI。安装命令为 npm install @mui/joy @emotion/react @emotion/styled 或 pnpm add @mui/joy @emotion/react @emotion/styled。
vendure-ui
vendure-ui 是一套用于在 @vendure/dashboard 或 @vendure-io/ui 的消费方中构建与审查前端界面的技能。它强调先对宿主环境进行分类，再决定导入方式：Dashboard 扩展应从 @vendure/dashboard 导入设计系统 UI 与仪表盘布局/表单 API，独立消费方则从 @vendure-io/ui 的 atoms 或 molecules 子路径精确导入，避免桶式导入。技能要求优先复用已有 molecule，其次用现有 atoms 组合，不复制或修改设计系统源码，并保持领域数据、请求、路由、授权、持久化与应用状态由消费方拥有。整页界面需参考 screen-recipes.md，组件决策需查阅 component-decisions.md，跨切面规则涵盖每视图一个主按钮、使用状态字典与 StatusBadge、用 LoadingState/EmptyState/ErrorState 呈现等待与空错状态、表单标签与校验、破坏性操作确认等。审查时保持只读，检查导入、组合、层级、操作强调、表单、状态、插图、可访问性等，并给出文件与行号证据。
hiui
HiUI CLI（@hi-ui/hiui-cli）是一个用于查询 HiUI（@hi-ui/*）组件文档并自动化常见升级任务的命令行工具。它面向需要在项目中编写或调试 HiUI 组件、查询组件 props/文档、从 HiUI V4 迁移到 V5，以及处理 React 19 兼容补丁的场景。组件文档通过官方 llms 端点获取，因此 list / doc / info / url 命令需要网络；迁移和 React 19 补丁则在项目文件系统本地运行。安装方式为全局安装 @hi-ui/hiui-cli，常用命令包括 hiui info、hiui doc、hiui list、hiui url、hiui migrate 4 5 和 hiui patch-for-react，并建议始终使用 --format json 获取可解析的结构化输出。工具还支持自定义文档源（--base-url 或 HIUI_DOCS_BASE_URL），以及在无 CLI 时直接获取 llms.txt / llms-full.txt / 单组件 markdown 文档。
wireframe-writer
为网站、落地页或销售页规划分节线框结构。
design-taste-frontend
面向落地页、作品集与改版的前端设计技能，强调先读需求再定设计方向，避免AI默认审美。提供设计推断、三个调节旋钮、设计系统选择、技术栈与排版配色规范等指导。
imagegen-frontend-web
这是一套用于生成网站设计参考图的前端图像艺术指导技能。它把首页或整站拆成一个个独立版块，为每个版块单独生成一张横向设计图，而不是把整页塞进一张长图。技能内置了一套视觉指导规范：默认设计变化度 8、视觉密度 4、艺术方向 8、实现清晰度 9、图像使用优先级 9、留白充裕度 8、布局变化 8、转化纪律 8，并强调输出要为开发者或编码模型提供可读、可落地的 UI 参考，而非抽象氛围图。它要求每次生成都遵循版块数量与图片数量一一对应的硬性规则，例如请求「落地页」默认 6 张、「完整网站」默认 8 张，并逐张标注「第 X 张，共 N 张」。在版块构成上，技能提供了主题范式、背景特征、字体气质、英雄区结构、版块系统、标志性组件、动效暗示、构图锚点、背景模式、CTA 变体、英雄尺度、叙事主线、二次阅读点等可组合选项，用于避免千篇一律的 AI 默认样式。资料未提供该技能的安装命令、运行平台、收费方式或具体使用步骤。
render-optimization
React 渲染性能优化技能，面向 React 19+，涵盖 React Compiler 集成、memoization 策略、TanStack Virtual 虚拟化、状态就近放置与 DevTools 性能分析。核心思路是优先启用 React Compiler 自动处理 memoization，仅在必要时使用 useMemo/useCallback 作为逃生舱；列表超过 100 项考虑虚拟化，500 项以上必须虚拟化；优化前先用 React DevTools Profiler 测量瓶颈。适用于调试 React 应用渲染性能问题、减少不必要的重渲染、处理长列表卡顿等场景。
styling-react-with-tailwind
这是一个面向特定代码库的 React + Tailwind CSS 样式开发技能，用于指导在该代码库中构建 React 组件时的样式规范。它涵盖语义化设计令牌（token）的使用、tailwind-variants 的 tv() 变体样式模式，以及组件结构约定。该技能基于 tw-colors 插件实现语义化设计令牌，采用 Rose Pine 配色（浅色 Dawn、深色 Moon），并通过 tailwind-variants 提供类型安全的变体样式。文档给出了颜色令牌命名规则（{property}-{category}-{semantic}）、文本/背景/边框令牌示例、间距与布局约定，以及三种组件模式：多元素组件的 slots 模式、单元素组件的 base 模式、条件样式组合的 compoundVariants 模式。同时介绍了 classnames() 合并工具、支持 asChild 的多态 Box 组件，并列出常见错误（使用原始颜色、忘记 classnames()、解构 props、缺少 VariantProps）。
makepad-widgets
Makepad Widgets 是 Makepad 框架的 UI 组件技能，用于编写和解答 Makepad 小部件与界面组件相关问题。它覆盖 View、Button、Label、Image、TextInput 等核心控件，以及容器、导航、浮层、媒体、布局、富文本等 84 个内置组件，并提供代码模式、属性说明和变体参考。适用于使用 Makepad 构建跨平台界面的开发场景。
21st-design-sync
21st Design Sync 是一个用于将当前项目已定义的设计主题发布到 21st.dev 社区主题库的技能。它面向使用 shadcn / Tailwind CSS 的项目，读取项目中的 CSS 变量（即 :root 与 .dark 两个代码块里的颜色令牌），整理为一个独立的主题 CSS 文件，再通过 @21st-dev/cli 提供的 21st publish-theme 命令发布。发布后的主题会立即在社区主题库中公开可见，其他人可以预览、收藏并应用。工具本身不重新设计配色，只同步项目已经使用的设计；如果项目缺少或为空的深色模式，需要先补全深色变体再发布。发布属于公开的对外操作，且主题没有隐藏或私有选项，因此在发布前应获得用户确认。认证需要 21st_sk_ 前缀的管理 API 密钥，不接受普通登录会话令牌。
artifacts-builder
Artifacts Builder 是一套用于创建复杂、多组件 claude.ai HTML 工件的工具集，基于现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）。它通过初始化脚本生成配置完整的 React + TypeScript 项目，开发完成后可将全部代码打包为单个自包含 HTML 文件，直接在 Claude 对话中作为工件展示。