tailwind
Tailwind CSS v4 使用约定与配置技能，覆盖无 tailwind.config.js 的 CSS 配置、@variant dark 深色模式、Vite 插件、工具类简写、设计令牌与 shadcn/ui 集成等实践。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-30 00:12
前端与建站
11,292 个结果
frontend-design
frontend-design 是一个用于创建独特、生产级前端界面的技能，强调高设计质量，避免常见的“AI 味”审美。适用于构建 Web 组件、页面、应用或界面，并输出可运行代码。
remotion-best-practices
Remotion 最佳实践技能，为在 React 中创建视频提供领域知识。涵盖动画、音频、字幕、图表、字体、转场、3D、Lottie、地图等主题，按规则文件组织，供处理 Remotion 代码时查阅。
swiftui-view-refactor
用于重构 SwiftUI 视图文件的技能，帮助把大型视图拆分为小而明确、可测试的子视图类型，理顺数据流并规范 Observation 使用，适用于拆分大视图、收紧数据流或清理 Observation 所有权。
taste-skill
taste-skill 是一个面向 Claude Code 的前端 UI/UX 工程师技能，通过度量规则与组件架构约束，减少大模型的通用化设计倾向；涵盖排版、配色、动效、响应式与性能等规范。
agentation
Agentation 是一个开发期可视化反馈工具栏，以单个 React 组件形式提供，用于在项目中添加标注工具。本技能说明如何在 React 与非 React 宿主项目中安装、挂载并确保其不进入生产构建，以及如何配置 MCP 服务器与 AI 智能体同步标注。
component-reuse-first
这是一个面向 UI 组件开发的编码规范类技能，核心主张是「先搜索、再创建」。在编写任何 UI 组件之前，先彻底检查仓库中是否已存在可用或接近可用的组件，只有在复用确实不可行时才新建组件，并且新建时必须按可复用标准设计。技能给出的工作流包括：并行执行 Glob 扫描常见组件目录、Grep 检索概念名及同义词（如 Modal/Dialog/Popup、Button/Btn/CTA）、检查类似页面的导入引用、检查 package.json 中已有的设计系统库（如 shadcn/ui、MUI、Chakra、Ant、Radix 等）并优先使用。搜索后按决策树处理：完全匹配则原样复用，90% 以上接近则通过 props/variants 扩展而非分叉，部分匹配则拆分为基础组件加变体或组合，无匹配才新建。新建组件遵循可复用默认规则，涵盖放置位置（共享目录或特性目录）、API 设计（透传 className 与 ref、展开 rest props、使用变体、语义化 props 命名）、组合优于配置、沿用既有样式方案与设计令牌、类型安全以及无障碍支持。技能还列出需拒绝的反模式与快速判断法则，并定义了触发场景。
jotai-expert
面向 React 应用的 Jotai 状态管理专家技能，用于设计与实现基于 atom 的状态管理，涵盖基础 atom、派生 atom、异步 atom、atomFamily、持久化、性能优化、TypeScript 类型、测试与调试等实践。
tailwind-css
Tailwind CSS v4 与 tailwind-variants 技能，用于编写 CSS-first 配置、现代工具类与类型安全的组件样式，并处理 v3 到 v4 的破坏性变更。
filtering-system
这是一个面向 Saleor storefront 前端代码库的筛选系统技能文档，介绍商品列表的筛选与排序架构。它说明了哪些筛选条件在服务端处理（分类、价格、排序），哪些在客户端处理（颜色、尺码），并列出了相关代码文件、工具函数、React Hook 的用法以及静态价格区间、扩展新服务端筛选条件的示例和应当避免的反模式。适合在修改筛选功能、新增筛选类型或调整分类、集合、商品页面时参考。
tailwind-turbopack
针对 Tailwind CSS 与 Turbopack 配合使用的技能说明，用于处理 CSS 类未生成、需要动态样式或遇到 Turbopack CSS 问题的情况，并给出避免内联样式与改用 CSS 文件定义复杂样式的做法。
variant-selection
Variant Selection 是 Saleor Storefront 中用于商品详情页（PDP）的变体与属性选择系统。它帮助开发者理解并实现变体选择器、调试“加入购物车”按钮状态、为变体选项添加折扣标识，以及排查某个变体为何不可选。核心概念是：加入购物车的是变体（Variant）而非商品（Product），每个变体是特定属性的组合，结账时只需传递 variantId。系统区分两类变体属性：选择型（VARIANT_SELECTION，如颜色、尺寸，用于交互式选择器）和非选择型（NOT_VARIANT_SELECTION，如材质、品牌，仅作展示徽章）。选择状态通过 URL 参数保存，选项具有可用、不兼容、缺货等状态，并支持折扣百分比徽章。系统采用状态机管理选择流程，在不兼容选择时自动清除冲突项而非阻止用户操作。
pug-ui
pug-ui 是一个用于生成单文件 HTML 界面的技能，可用 Pug 语法在浏览器端自行编译，适合制作报告、仪表盘和落地页。它提供四套 CSS 框架预设：pico（默认，无类名，约 10KB gzip）、bulma（语义化，约 66KB，适合复杂仪表盘）、daisyui（语义化加工具类，偏移动端，含标签页、抽屉、轮播等组件）、minimal（约 3KB，无类名，适合文字较多的报告、文档和文章）。默认使用 Claude Code 浅色主题（暖米色 #EEECE2 配陶土色 #DA7756），无需切换主题。使用流程为选择预设、查看对应模板结构、复制到目标路径、替换模板内 Pug 脚本块并设置标题，且只能写 Pug 不能写原始 HTML，需保持两空格缩进，响应式前缀用 class 属性写法，不可混用不同框架的类名，也不应擅自更换主题。
frontend-ui-skill
面向企业级 SaaS 前端的技能指南，基于 Tailwind v4、shadcn/ui 与 Next.js App Router 或 Vite SPA，覆盖仪表盘、定价页、数据表格、引导流程与角色权限 UI，内含 WCAG 2.1 AA 无障碍与 Core Web Vitals 性能要求。
react-native-app
React Native 跨平台移动应用开发技能，涵盖导航、状态管理、原生功能与 API 交互，适用于 iOS/Android 开发、移动端原型与代码复用。
content-negotiation-for-agents-skill
为 Next.js 应用添加 HTTP 内容协商：AI 智能体通过 Accept 头获取干净 Markdown，浏览器仍得到普通 HTML。含检测、范围确认、实现、发现文件与验证流程，仅支持 Next.js。
tailwind-v4
Tailwind CSS v4 技能，专注 CSS 优先配置、@theme 指令、OKLCH 颜色系统与 Vite 集成。适用于新建项目安装、v3 到 v4 迁移、主题与设计令牌定制、响应式与暗色模式布局、自定义工具类与动画，以及优化构建产物。
vue-expert
Vue Expert 是一个面向 Vue 3 开发的高级技能，覆盖 Composition API、Nuxt 3、Pinia、TypeScript、Naive UI、Quasar 及移动/PWA 场景，用于指导组件、状态、构建与性能优化。
vue-fsd
vue-fsd 是一个面向 Vue 3 应用的 Feature-Sliced Design 架构技能，帮助团队按分层结构组织中大型项目，明确业务边界、导入规则与可维护的目录划分，适用于新建或重构大型前端代码库。
cloudflare-pages
Cloudflare Pages 是 Cloudflare 提供的静态站点与全栈应用部署平台，支持预览构建、边缘函数（Pages Functions）、自定义域名和全球 CDN 分发。本条目是一份面向 AI 编程助手的技能说明，介绍如何用 Wrangler CLI 或 Git 集成部署前端项目、配置每分支预览、编写 functions/ 目录下的服务端路由与中间件、绑定 KV/D1/R2、设置 _headers 与 _redirects、接入 CI/CD 并进行常见故障排查。资料同时强调需固定 Wrangler/Node 版本、确认账户与项目后再执行部署或删除操作、为预览和私有数据做好访问控制。
expo-animation
该技能是一份面向 Expo / React Native 的动画构建指南，由 Emil Kowalski 协作创建，强调在真机发布构建上产出经得起严格评审的动效实现。它围绕移动端动画的三个本质约束展开：没有 hover，所有反馈须落在按压、位置或什么都不做；存在两个运行时，动画必须保持在 UI 线程（Reanimated worklets）上；用户手指始终在元素上，手势打断与速度交接是基线而非打磨。内容包括动画必要性判断、目的命名、工具选型（CSS transition、布局动画、Gesture + useAnimatedStyle、原生栈、formSheet、NativeTabs、Lottie、Skia 等）、属性选择（transform/opacity 优先）、时序与弹簧参数、按压反馈、触觉反馈、减弱动态与无障碍、常见静默失败排查，以及一系列可直接照做的实现配方。
geo-audit
geo-audit 是一个网站 GEO（生成式引擎优化）与 SEO 审计技能，通过并行子代理对站点做全面评估，输出 GEO-AUDIT-REPORT.md 改进报告，涵盖可引用性、品牌权威、内容 E-E-A-T、技术 GEO、结构化数据与平台优化。
makepad-2-0-layout
Makepad 2.0 布局指导技能，用于在构建或调试 Makepad UI 代码时提供布局系统参考。内容围绕 Makepad 的 layout turtle 系统展开：Walk 负责单个组件自身的尺寸（width、height、margin），Layout 负责容器如何排列子组件（flow、spacing、padding、align）。该技能涵盖 Fill/Fit/固定像素及约束写法、flow 方向与换行、Overlay 层叠、align 对齐、clip_x/clip_y 裁剪、Inset 内边距与外边距语法、ScrollYView/ScrollXView/ScrollXYView 滚动容器、Filler 占位组件与常见布局模式，并说明弹层定位应优先使用 walk.abs_pos 而非运行时改 margin。资料同时提示：上游 API 变动频繁，需对照当前 Makepad 2.0 文档核实；不要未经用户批准运行附带的脚本；示例代码并非可编译的测试样例，不应整体迁移现有可用应用。
survey-generator
Survey Generator 是一个用于生成学术风格 AI/ML 综述论文产物的技能：给定主题与公开锚点资源，整理真实论文书目，并经 Fireworks 调用 Kimi 模型输出单文件 HTML。