Agent Skills
› openstatusHQ/data-table-filters
openstatusHQ/data-table-filters
GitHub提供UI设计工程指导，涵盖组件设计、动画决策及细节打磨，旨在通过提升界面质感和用户体验来增强产品竞争力。
Install All Skills
npx skills add openstatusHQ/data-table-filters --all -g -y
Skills in Collection (16)
提供UI设计工程指导，涵盖组件设计、动画决策及细节打磨，旨在通过提升界面质感和用户体验来增强产品竞争力。
UI组件设计规范咨询
前端交互与动画优化
界面细节审查与改进
npx skills add openstatusHQ/data-table-filters --skill emil-design-eng -g -y
指导创建独特且生产级的前端界面，避免通用AI美学。适用于构建网页组件、页面、应用或UI美化，生成具有强烈设计感和创意的高品质代码。
构建网页组件或页面
美化Web UI
设计Dashboard或着陆页
npx skills add openstatusHQ/data-table-filters --skill frontend-design -g -y
作为产品战略家，通过理解当前价值、发现10倍机会并严格评估，寻找能极大提升产品价值的战略性功能和高杠杆改进点。
用户提到 '10x' 或 'product strategy'
询问 'what should we build next'
寻求高影响力功能建议
npx skills add openstatusHQ/data-table-filters --skill game-changing-features -g -y
通过 relentlessly 提问和探索代码库，深入剖析用户计划或设计中的决策树分支，解决依赖关系并提供推荐答案，以达成共同理解并压力测试方案。
用户希望压力测试其计划或设计
用户明确要求 'grill me'
npx skills add openstatusHQ/data-table-filters --skill grill-me -g -y
通过探索代码库识别架构摩擦和耦合问题，提出深化模块的重构方案以提升可测试性和AI导航能力。
希望改进代码库架构
寻找重构机会
整合紧密耦合的模块
提升代码库的可测试性
npx skills add openstatusHQ/data-table-filters --skill improve-codebase-architecture -g -y
指导创建高质量 MCP Server，使 LLM 能通过工具与外部服务交互。涵盖设计原则、协议规范及 TypeScript/Python 框架实现细节，助力 Agent 集成外部 API。
构建 MCP Server
集成外部 API 给 LLM 使用
npx skills add openstatusHQ/data-table-filters --skill mcp-builder -g -y
提供Next.js开发最佳实践指南，涵盖文件约定、RSC边界、异步模式、数据获取、错误处理及性能优化等规范，用于指导代码编写与审查。
需要遵循Next.js项目结构规范
检查React Server Component使用是否合规
进行Next.js代码审查或重构
npx skills add openstatusHQ/data-table-filters --skill next-best-practices -g -y
管理 shadcn/ui 组件，提供 CLI 操作、组件文档、样式规范及组合原则。用于添加、搜索、修复 UI 组件，确保遵循语义化颜色和布局最佳实践。
shadcn init
create an app with --preset
switch to --preset
使用 shadcn/ui 组件
项目包含 components.json
npx skills add openstatusHQ/data-table-filters --skill shadcn -g -y
提供创建和更新 Claude Skills 的指导，涵盖技能结构、核心原则及资源组织方式。用于帮助用户构建具备特定领域知识或工作流的模块化能力包。
用户希望创建新的 Skill
用户需要更新现有 Skill
npx skills add openstatusHQ/data-table-filters --skill skill-creator -g -y
指导基于红-绿-重构循环的测试驱动开发，强调通过公共接口验证行为，避免水平切片反模式，采用垂直切片方式逐步实现功能。
用户要求使用 TDD
提及 red-green-refactor
请求集成测试
询问测试优先开发
npx skills add openstatusHQ/data-table-filters --skill tdd -g -y
提供React组件组合模式指南，用于避免布尔属性泛滥，支持重构复杂组件、构建可复用库及设计灵活API。涵盖复合组件、状态提升和React 19新特性，提升代码可维护性。
重构包含大量布尔属性的组件
构建可复用的组件库
审查组件架构设计
使用复合组件或Context Provider
npx skills add openstatusHQ/data-table-filters --skill vercel-composition-patterns -g -y
提供Vercel工程团队的React和Next.js性能优化指南，涵盖消除数据瀑布、包体积优化及服务端性能等57条规则，用于指导代码编写、审查与重构。
编写或审查React/Next.js组件代码
优化前端应用性能与加载速度
重构现有代码以提升渲染效率
npx skills add openstatusHQ/data-table-filters --skill vercel-react-best-practices -g -y
审查UI代码是否符合Web界面指南，支持检查可访问性、UX及最佳实践。通过获取最新规则并对照文件进行合规审计，输出精简的问题报告。
review my UI
check accessibility
audit design
review UX
check my site against best practices
npx skills add openstatusHQ/data-table-filters --skill web-design-guidelines -g -y
作为高级顾问审计代码库，识别bug、安全及性能等改进点，生成供其他Agent执行的自包含实施计划。严格只读，不直接修改代码，专注于规划与指导。
审计代码库
寻找改进机会
生成实施计划
npx skills add openstatusHQ/data-table-filters --skill improve -g -y
提供基于 shadcn registry 的可过滤、排序数据表格系统，支持多种过滤器、虚拟滚动及状态管理。适用于安装核心模块、扩展 AI 或 ORM 功能、配置适配器及排查集成问题。
提及 data-table-filters 或其域名
需要构建可过滤的数据表格
询问 shadcn registry 块的安装与扩展
配置状态适配器（nuqs/zustand）
集成 Drizzle ORM 或 React Query
使用 DataTableAuto 自动推断 Schema
添加 AI 自然语言过滤功能
将表格暴露为 MCP 端点
npx skills add openstatusHQ/data-table-filters --skill data-table-filters -g -y
提供基于shadcn registry的React数据表系统，支持分面过滤、排序、无限滚动及虚拟化。涵盖状态管理适配、Drizzle ORM服务端集成、自动Schema推断及AI自然语言过滤等扩展模块的安装与配置。
安装 data-table-filters 或相关 shadcn 注册表块
配置 nuqs/zustand/memory 状态适配器
生成数据表 Schema 或使用 DataTableAuto 自动推断
集成 Drizzle ORM 进行服务端过滤
连接 React Query 获取层
添加 AI 自然语言过滤功能
将表格暴露为 MCP 端点
解决集成问题
npx skills add openstatusHQ/data-table-filters --skill data-table-filters -g -y
