writing-react-ts-code
一套面向 React/TypeScript 代码的严格编码规范技能，涵盖 TypeScript 严格配置、类型安全、Result 错误处理、组件模式与动态数据校验，适用于编写或修改 React/TypeScript 代码时遵循统一标准。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-31 00:15
前端与建站
11,329 个结果
product-ui-kit
用于启动、搭建或夯实 React 前端仓库的通用技能：默认采用 Next.js/Vite、TypeScript、Tailwind CSS 与 shadcn/ui，优先复用开源 shadcn 兼容区块，必要时为地图应用接入 MapLibre GL JS。
ss-shadcn-svelte
面向 SvelteKit 项目的 shadcn-svelte 组件使用助手，先检测项目是否已初始化 shadcn-svelte 并列出已装组件，再按需拉取组件文档并指导选用与安装。
ss-shadcn-svelte
用于在 SvelteKit 项目中使用 shadcn-svelte 组件的技能，能检测项目是否已初始化 shadcn-svelte、列出已安装组件，并引导查阅组件文档。
web-artifacts-builder
用于构建复杂多组件 claude.ai HTML 工件的工具套件，基于 React、Tailwind CSS 与 shadcn/ui，可将前端项目打包成单个自包含 HTML 文件。
container-bounds
container-bounds 是一项用于审查“容器尺寸随内容变化”动画的技能。它要求把测量与动画分开：外层元素负责宽高过渡，内层元素负责被测量，避免同一节点既测量又动画导致布局自反馈循环。技能按固定检查对给出问题与替代写法，涵盖双 div 模式、首帧从 0 生长的守卫、使用 ResizeObserver 而非渲染副作用中的 getBoundingClientRect、以回调 ref 保存节点、动画期间外层 overflow: hidden、过渡参数 duration: 0.2 与 delay: 0.05，以及避免对静态区块滥用尺寸动画。它适用于按钮文字切换、手风琴、展开区、披露面板、FAQ 等随内容改变边界的场景，不适用于静态页面区块或屏幕上每张卡片。输出按根因逐条报告 file:line 与规则编号，并按 HIGH/MEDIUM/LOW 分级汇总；存在 HIGH 时阻止通过，未读取的文件不得批准。
predictive-prefetch
这是一个面向代码审查的预取（prefetch）检查技能，用于评估“在点击之前就开始加载”的预取实现是否合理。它主张用光标轨迹预测和键盘焦点接近来触发预取，而不是用悬停或对可视范围内所有链接预取。该技能会读取项目内相关文件，找出 prefetch、router.prefetch、onMouseEnter 加载器或轨迹辅助函数，并按五组对照检查规则给出结论：轨迹预测优于悬停、按意图预取而非全量预取、hitSlop 取 20 而非 0、触屏与键盘的降级路径、页面已即时加载时移除轨迹预取。它明确不安装预取依赖，只输出按严重程度分级（HIGH/MEDIUM/LOW）的发现和汇总表；存在 HIGH 时阻止通过，否则批准。适用场景包括依赖网络导航、数据重载仪表盘、慢 API 的多页应用等；不适用于已即时导航的静态站点或数据已加载的页面。
synthesize-sound
该技能用于审查以 Web Audio API 编写的、程序化生成的界面音效（如点击声、弹出声、确认音），重点检查四个方面：整个页面是否只使用一个 AudioContext、是否采用指数衰减包络且不以 0 为目标值、以及点击类音效的参数是否合理（时长、滤波频率、增益、Q 值）。审查以“坏例 / 替代写法”成对规则呈现，按 HIGH / MEDIUM / LOW 分级报告，存在 HIGH 问题时阻止通过。
browser-automation
面向 AI 智能体的浏览器自动化 CLI 工具 agent-browser，可通过命令行导航网页、填写表单、点击按钮、截图、抓取数据与检查网络请求，支持会话持久化、认证复用、并行会话与安全策略配置。
recoup-internal-consulting-copy-reviewer
Recoup 内部咨询工作流中的文案审阅技能，以非技术客户视角对已完成草稿做读者反应审阅，返回笔记供主智能体重写，不直接改文件。
redpanda-frontend-kit
Redpanda Frontend Kit 是一个元技能，用于在通用前端脚手架基础上叠加 React 技能与 Redpanda 专用注册表工作流，适合初始化新的 Redpanda 前端项目。
setup-tanstack-router
用于自动生成 TanStack Router 路由树并通过 PostToolUse 钩子强制路由规范的技能，禁止 react-router-dom、window.location 与无类型钩子，适用于采用 TanStack Router 的前端项目。
distinctive-frontend-design
一个面向前端界面设计的中文技能，指导 Claude 在排版、配色、动效与背景上做出有辨识度、可上生产的界面，避免通用 AI 默认风格。
site-generation
将 Markdown 研究报告转换为交互式 React 演示网站的技能，基于 Vite、Tailwind CSS v4 与 shadcn/ui，支持部署为 GitHub Pages 静态站点。
marketing-pages
用于在 Resend 代码库中创建、更新、编辑或删除营销/公开页面的技能，涵盖页面结构、组件复用规则与样式约定，仅适用于 src/app/(website)/ 路由组，不涉及产品仪表盘页面。
resend-design-system
面向 Resend 代码库的 UI 开发技能：说明如何从 src/ui/ 使用设计系统基础组件，提供组件 API、变体选项、设计令牌与组合模式，避免在已有基础组件时自建组件。
webtoon-assembly
面向竖屏条漫的组装、嵌字、质检与打包方法：将已烘焙好对话框与韩文对白的 PNG 面板按顺序拼成无叠加的竖滚查看器 index.html，并设计嵌字规范、执行 QA 与连载连续性管理，最终按 RELEASE 结构打包。
dev-nuxt
该技能用于构建、审查、迁移和调试 Nuxt 4 应用，强制采用 app/ 优先的源码布局、Nuxt 4 运行时默认值以及当前 Vue + TypeScript 模式，并拒绝 v3 时代的目录指导。它要求先检测 Nuxt 代际与工具链、确定渲染模式，再使用 Composition API、<script setup lang="ts">、类型化组合式函数和服务器/客户端分离来实施；优先使用 VueUse 和现代生态默认项，按需加载架构、TypeScript、生态偏好及 Nuxt 3 到 4 迁移差异等参考文档，并在编辑后验证类型、lint/构建输出和框架特定约束。
appkit-interop
用于判断 macOS 应用何时以及如何从 SwiftUI 桥接到 AppKit 的技能，涵盖 NSViewRepresentable、NSViewControllerRepresentable、窗口与面板、响应者链、菜单校验、拖放与剪贴板等场景，强调最小桥接与明确所有权。
expo-tailwind-setup
该技能用于在 Expo 项目中配置 Tailwind CSS v4，结合 react-native-css 与 NativeWind v5，实现面向 iOS、Android 和 Web 的通用样式方案。内容覆盖依赖安装命令、Metro 与 PostCSS 配置文件、全局 CSS 导入方式、CSS 组件包装器、自定义主题变量、平台专属样式与 Apple 系统颜色变量，并说明与 NativeWind v4 / Tailwind v3 的关键差异及常见问题排查。
expo-ui-swift-ui
Expo 的 @expo/ui/swift-ui 包，让开发者在应用中使用 SwiftUI 视图与修饰符；资料仅明确适用于 SDK 55，安装后需原生重建。
ux-audit
ux-audit 是一个对 Web 项目执行结构化 UX/UI 审计的技能，可扫描硬编码 CSS 值、无障碍违规、设计令牌不一致与组件模式，并输出 reveal.js、Figma 或 HTML 报告。
frontend-dev-plain-web
用于以纯 HTML 和 CSS 构建网页的技能，仅在需求明确需要交互时才添加 JavaScript，适合落地页、静态页和简单交互页等轻量代码优先场景。
clean
面向 React Native 项目的智能环境重置技能：先诊断缓存与状态是否真的过期，再执行必要的清理步骤，避免盲目全量清除。触发词包含 clean。