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美学。当用户需要构建网页组件、页面、海报或应用时触发，强调大胆的审美方向和精细的代码实现。
构建网站或着陆页
开发React/Vue组件
设计仪表盘UI
美化现有Web界面
npx skills add openstatusHQ/data-table-filters --skill frontend-design -g -y
作为产品战略家，通过10x思维模式寻找颠覆性产品机会和高杠杆改进点。分析当前价值，从大规模、中等和小规模三个维度评估潜在机会，并 ruthless 地筛选出能极大提升产品价值的功能策略。
用户想要进行战略性产品思考
提到 '10x' 或高影响力功能
询问 '什么能让产品变得更好' 或 '产品策略'
讨论 '下一步该构建什么'
npx skills add openstatusHQ/data-table-filters --skill game-changing-features -g -y
通过持续追问和压力测试，帮助用户深入梳理计划或设计，逐一解决决策树分支中的依赖关系，直至达成共识。
用户希望压力测试计划
用户希望接受设计审查
用户提及 '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服务器，使LLM能通过工具与外部服务交互。涵盖Python和TypeScript实现，包括API设计、命名规范、上下文管理及错误处理等最佳实践。
需要构建或集成支持MCP协议的服务器
开发让LLM调用外部API的工具
npx skills add openstatusHQ/data-table-filters --skill mcp-builder -g -y
提供Next.js开发最佳实践指南，涵盖文件规范、RSC边界、异步模式、错误处理及性能优化等规则，辅助代码编写与审查。
编写Next.js项目代码
审查Next.js代码规范
解决React Server Component问题
npx skills add openstatusHQ/data-table-filters --skill next-best-practices -g -y
管理 shadcn/ui 组件项目，支持添加、搜索、修复、调试和组合 UI 组件。提供项目上下文、文档及使用示例，强制执行 Tailwind 样式、表单输入及组件结构规范。
使用 shadcn/ui 构建或修改 UI
运行 shadcn init 或 --preset 命令
需要添加、搜索或调试 shadcn 组件
涉及 components.json 配置的项目
npx skills add openstatusHQ/data-table-filters --skill shadcn -g -y
提供创建和更新 Skill 的指导，帮助用户扩展 Claude 能力。涵盖技能结构、核心原则（如简洁性、自由度控制）及资源组织方式，适用于需要定制专用工作流或工具集的场景。
用户想要创建一个新的 Skill
用户想要更新现有的 Skill
npx skills add openstatusHQ/data-table-filters --skill skill-creator -g -y
指导采用测试驱动开发(TDD)模式，强调红-绿-重构循环。主张通过公共接口验证行为，避免水平切片，推荐垂直切片方式编写集成测试，确保测试具备鲁棒性并准确描述系统功能。
用户要求进行测试驱动开发
提及红-绿-重构流程
请求编写集成测试
询问测试优先开发方法
npx skills add openstatusHQ/data-table-filters --skill tdd -g -y
提供React组件组合模式指南，涵盖架构、状态管理及实现模式。用于重构布尔属性泛滥的代码、构建可复用库及设计灵活API，支持React 19新特性，提升代码可维护性与扩展性。
重构包含大量布尔属性的组件
构建可复用的组件库
设计灵活的组件API
审查组件架构
处理复合组件或上下文提供者
npx skills add openstatusHQ/data-table-filters --skill vercel-composition-patterns -g -y
提供Vercel工程的React与Next.js性能优化指南，涵盖消除瀑布流、打包体积优化及服务端性能等57条规则。适用于编写、审查或重构相关代码以提升应用性能。
编写新的React组件或Next.js页面
实施客户端或服务端数据获取逻辑
审查代码以识别性能瓶颈
重构现有React/Next.js代码
优化Bundle大小或加载时间
npx skills add openstatusHQ/data-table-filters --skill vercel-react-best-practices -g -y
用于审查UI代码是否符合Web界面指南，支持检查可访问性、UX审计及最佳实践。通过Fetch获取最新规则并比对文件，输出格式化的问题列表。
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
作为高级顾问只读审计代码库，识别安全、性能等改进点并生成自包含实施计划供其他模型执行，不直接修改代码。
审计代码库
寻找改进机会
生成实施计划
npx skills add openstatusHQ/data-table-filters --skill improve -g -y
提供基于shadcn的React数据表格系统，支持分面过滤、排序、无限滚动及虚拟化。涵盖状态管理适配器、Drizzle ORM集成、React Query连接及AI自然语言过滤功能。
安装 data-table-filters
配置状态适配器
生成表结构模式
连接服务器端过滤
添加 AI 过滤功能
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
