artify
artify 是一个用于构建自包含单文件 HTML 产物的技能，配合 artify CLI 使用，可打开、实时服务并快照页面状态。适用于可视化、交互工具、演示、表单与仪表盘等浏览器原生场景。
Skill 广场
找到适合任务的 Agent Skill，阅读介绍并复制安装命令。
更新于 10-30 00:12
前端与建站
11,290 个结果
rectangular
Rectangular 是一个以对话为核心的任务看板技能，工单即用户与工作者之间的会话。工作者通过 rect 命令行读取工单、执行工作并在工单上回复，默认不改变工单状态。
static-site-experience-release
用于审计、精修、验证并发布已有的静态个人主页、作品集或博客站点，采用分支优先的工作流。适用于体验优化或发布检查类需求，不用于从零建站、添加数据库评论服务或部署常驻服务器。
lov-align-wechat-uiux
这是一个用于诊断并修复产品与微信官方在消息、会话、联系人、朋友圈及交互上语义与 UIUX 偏差的技能包。它按“数据契约先行”的思路，从原始数据、语义建模、界面语法到验证逐步排查，而非仅改 CSS。支持中文触发（如“对齐微信官方”“这条微信消息显示不对”）和英文触发（如 fix WeChat UI parity、audit WeChat behavior），提供修复、审计、语义建模、验收四条流程，并包含证据分级、根因定位、下游一致性检查与真机验证步骤。
lov-frontend-select-with-search
该技能用于把候选项超过 5 个的 Select（下拉选择框）升级为可搜索、可滚动且键盘可访问的兼容组件，并验证其在 Dialog/Portal 中的真实滚轮事件。它采用渐进增强策略：候选项不超过 5 个时保留轻量原生体验，达到 6 个时支持搜索；长列表在普通页面和弹窗中都能真实滚动、选择和键盘操作。适用于“下拉选项太多需要筛选”“候选项无法滚动”“make selects searchable”等需求。技能要求先盘点所有 Select 使用面，定义兼容既有 value、onChange、表单语义等行为的契约，优先扩展共享组件而非逐屏修补，并完成边界、搜索、滚动、选择、键盘与回归验证后报告证据。
lov-integrate-agent-uiux
该技能用于在现有 React Native 或 React 应用中集成生产级 Agent 对话界面，包含标准化对话记录契约、可访问的 UI 组件、目标技术栈适配器以及验证报告。
lov-integrate-modern-screenshot
该技能为静态 HTML 页面或任意网页源文件添加右下角“导出图片”按钮，点击后使用 modern-screenshot 将页面主体内容导出为 PNG。截图与浏览器实际渲染保持一致，避免文字因容器宽度测量错误而换行；默认输出 2x 分辨率，适合网络传播。适用于 HTML 报表、数据看板、落地页等内容的图片化分享。不适用于导出 HTML/MD/DOCX/PDF 交付包、HTML 转 PPTX、PNG 转 SVG 等场景，也不处理仅截取浏览器视口且无需修改源码的需求。
tanstack-alpine-table-create-table-hook
TanStack Alpine Table 的 createTableHook 技能：用工厂集中共享 tableFeatures、默认配置、createAppTable 与 createAppColumnHelper，适合多个 Alpine 表格重复基础设施时复用。
tanstack-alpine-table-getting-started
介绍在 Alpine.js 中使用 TanStack Table v9 创建表格的入门技能：通过 createTable、显式 tableFeatures、Alpine.reactive 数据 getter、x-for 渲染与 FlexRender 构建响应式表格。
tanstack-alpine-table-table-state
该技能讲解 TanStack Table 在 Alpine.js 适配器下的表格状态管理方式。核心是把表格视为状态协调器：默认由表格内部持有各状态切片，除非其他系统需要读取、持久化或驱动状态。table.baseAtoms 是内部可写原子，table.atoms 是只读派生原子，table.store 将原子合并为只读扁平 store。Alpine 适配器代理表格并订阅 store，使 x-text、x-for、x-if、绑定属性、x-effect 或 Alpine getter 中的读取自动具备响应性。技能涵盖状态归属选择（内部状态、initialState、外部原子、Alpine.reactive 加回调）、初始化/更新/重置方式，以及常见错误，如虚构 Subscribe 组件、受控快照不刷新、状态与原子所有者冲突。
tanstack-angular-table-devtools
该技能用于在 Angular 应用中把 Table v9 实例注册到 TanStack Table Devtools，核心 API 是 injectTanStackTableDevtools。它基于 @tanstack/table-core 与 @tanstack/table-devtools，需在 Angular 注入上下文（组件/服务的字段初始化器或构造函数）中调用，并配合 injectTable 使用。注册的表必须提供稳定唯一的 options.key，否则核心注册会记录错误并跳过。注入器选项函数可返回 table: undefined 或 enabled 函数，以响应式地移除或禁用注册。需在应用配置层提供一次 Angular TanStack Devtools 宿主。默认导出仅在开发模式生效，生产环境需显式使用 /production 入口。
tanstack-octane-table-create-table-hook
该技能介绍如何使用 @tanstack/octane-table 的 createTableHook 构建可复用的表格基础设施，包括 useAppTable、createAppColumnHelper、注册组件、稳定的 App 包装器与类型化上下文。它基于 @tanstack/table-core 的核心、入门与表格状态能力，适合在多个表格间复用统一约定时使用；一次性表格仍建议直接用 useTable。文档涵盖工厂创建、列助手、上下文消费、嵌套表格隔离，以及抽象单表、在错误提供者外读取、渲染期重建工厂等常见错误。
tanstack-octane-table-table-state
TanStack Octane Table v9 状态管理技能，讲解 useTable 选择器、table.state、table.Subscribe、受控状态切片与 @tanstack/octane-store 原子，用于读取和掌控表格状态。
tanstack-preact-table-create-table-hook
基于 @tanstack/preact-table 的 createTableHook 技能，用于创建可复用的 Preact 表格基础设施，集中共享 features、getRowId 等约定，并生成 useAppTable、createAppColumnHelper、useTableContext 等绑定钩子与组件注册表。
tanstack-preact-table-devtools
该技能用于将原生 Preact Table v9 实例接入 TanStack Devtools，通过 tableDevtoolsPlugin 与 useTanStackTableDevtools 完成注册。它基于 @tanstack/table-core 与 @tanstack/table-devtools，强调在 Preact 项目中应使用原生 Preact 包（@tanstack/preact-table-devtools 配合 @tanstack/preact-devtools），而非通过兼容层混用 React 版本。技能文档给出了完整的初始化示例：定义 tableFeatures、columns 与 data，在 useTable 中传入唯一 key，再调用 useTanStackTableDevtools(table)。同时列出常见错误：React Devtools 包混入 Preact、缺少或重复 key、以及把生产环境下的 no-op 行为误判为失败。
tanstack-preact-table-getting-started
TanStack Preact Table v9 入门技能，讲解如何使用原生 @tanstack/preact-table 适配器搭建表格，包括 useTable、tableFeatures、稳定的列与特性输入、行/表头模型，以及 Preact FlexRender 渲染辅助组件。
tanstack-preact-table-migrate-v8-to-v9
面向 Preact 的 TanStack Table v8 到 v9 迁移技能，提供从 React 适配器切换到原生 @tanstack/preact-table 的完整清单，涵盖显式特性注册、行模型迁移、状态订阅、固定/排序/尺寸等 API 变更与常见失败点。
tanstack-preact-table-table-state
用于在 Preact 中管理 TanStack Table v9 状态的技能，涵盖 useTable 选择器、table.state、table.Subscribe、atoms/store、受控状态切片及外部 Preact atoms 的用法与常见错误。
tanstack-preact-table-with-tanstack-query
该技能介绍如何在 Preact 中组合使用 TanStack Table v9 与 @tanstack/preact-query：以表格状态作为查询键，实现手动服务端过滤、排序、分页，并配合服务端返回的总行数。资料强调查询负责获取已处理好的行数据，而 Table 的 manual 标志仅用于声明这一边界，不会自行发起请求或计算总数。内容包含安装导入示例、核心模式与常见错误，例如必须使用 Preact 版 Query 与 Store 集成、每个服务端结果需要包含请求状态的缓存键、手动分页需配合 rowCount 等。
tanstack-preact-table-with-tanstack-virtual
该技能介绍如何在 Preact 项目中为 TanStack Table 的行或列模型接入 TanStack Virtual 虚拟化渲染。其核心思路是：虚拟化并非 Table 的 tableFeatures 插槽，而是在最终 Table 模型之上做的一层渲染组合。标准 Preact 配置若已将 React 别名为 preact/compat，则可直接使用维护中的 React 适配器 @tanstack/react-virtual 的 useVirtualizer；若应用无法使用 compat 别名，则直接集成 @tanstack/virtual-core 的 Virtualizer 类，由应用自行管理生命周期与订阅。技能强调只能对 table.getRowModel().rows 这类最终行模型做虚拟化，而非原始数据，否则会丢失当前的过滤、排序、展开、分组和分页结果。同时提醒虚拟化只计算几何信息，应用需自行提供滚动容器、占位符（spacer）和绝对定位样式。技能以 @tanstack/table-core 的基础、入门和表格状态为前提，属于表格性能优化的进阶用法。
tanstack-query-intent-compositions-compose-query-with-t-d0bcdebe
该技能用于在 TanStack Router 或 TanStack Start 中组合使用 TanStack Query，核心是把 QueryClient 放入 router context，并在 createFileRoute 的 loader 中通过 ensureQueryData 预取数据，让路由在组件渲染前加载关键数据。组件仍应使用 useQuery 或 useSuspenseQuery 保持活跃的 Query observer，以支持重新获取、失效和垃圾回收。对于 Router SSR，推荐使用 setupRouterSsrQueryIntegration 处理脱水、水合、流式查询结果与重定向，而非手写 hydration。
tanstack-query-intent-compositions-persist-offline-and-ca66cce0
本技能面向使用 TanStack Query 持久化与离线能力的开发场景，涵盖 persistQueryClient、PersistQueryClientProvider、createSyncStoragePersister、createAsyncStoragePersister 等 API 的集成方式。内容包含基础 Setup 示例、恢复暂停的 mutation、缓存生命周期与持久化对齐、使用 networkMode 实现离线优先写入，以及常见错误（gcTime 短于 maxAge、恢复前渲染、缺少默认 mutationFn）的说明与修正代码。
tanstack-query-intent-compositions-query-data-and-forms
该技能用于在表单中整合 TanStack Query 的数据查询与变更（mutation），处理服务端初始状态、可编辑的客户端状态、脏字段、后台更新与提交等场景。核心思路是：用户开始编辑后，表单状态应视为客户端状态；服务端状态可用于初始化表单，但不应在每次查询更新时被盲目复制。技能涵盖三种模式：仅用初始数据（staleTime 设为 Infinity，适合单一用户拥有表单且编辑期间无需后台更新）、派生服务端加客户端状态（未触碰字段仍可见后台更新）、以及在等待失效完成后重置表单。同时列出常见错误：在查询数据存在前初始化表单默认值、后台重新获取覆盖或隐藏脏客户端状态、表单提交可能重复执行。
tanstack-query-intent-core-build-query-abstractions
介绍 TanStack Query 查询抽象的核心模式：以 queryOptions 工厂作为基础抽象，供 hooks、loader、预取与 QueryClient 复用，并列出常见错误与限制。