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审美。适用于构建Web组件、页面、应用及UI美化，强调大胆的美学方向和精细的视觉细节实现。
用户要求构建网站、落地页或仪表盘
需要生成React组件或HTML/CSS布局
请求对现有Web UI进行样式美化或重新设计
npx skills add openstatusHQ/data-table-filters --skill frontend-design -g -y
作为产品战略家，通过10x思维模式寻找高杠杆的产品机会和改进点。分析当前价值，评估大规模、中等及小规模的机会，输出纯策略文档而非代码，辅助制定产品路线图和构建决策。
用户询问如何让产品提升10倍价值
需要制定产品战略或决定下一步构建什么
寻找高影响力的功能改进机会
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导航体验。
用户希望改进代码库架构
寻找重构机会以消除紧耦合
提升代码库的可测试性
使代码库更易于AI导航
npx skills add openstatusHQ/data-table-filters --skill improve-codebase-architecture -g -y
提供构建高质量MCP服务器的指南，涵盖Python和Node.js实现。指导LLM通过精心设计的工具与外部服务交互，包括协议研究、框架选型、API覆盖设计及错误处理等最佳实践。
需要创建或开发MCP服务器
集成外部API到LLM应用中
询问MCP协议规范或SDK使用
npx skills add openstatusHQ/data-table-filters --skill mcp-builder -g -y
提供Next.js开发最佳实践指南，涵盖文件约定、RSC边界、异步API、数据模式、错误处理及性能优化等规则，用于指导代码编写与审查。
询问Next.js编码规范
审查Next.js项目代码质量
npx skills add openstatusHQ/data-table-filters --skill next-best-practices -g -y
管理 shadcn/ui 组件与项目，支持添加、搜索、修复、调试、样式调整和组合 UI。提供项目上下文、组件文档及使用示例，适用于涉及 shadcn/ui 的项目开发。
需要添加或搜索 shadcn 组件时
处理 shadcn 项目的样式调整或组件组合时
执行 shadcn init 或切换 preset 时
npx skills add openstatusHQ/data-table-filters --skill shadcn -g -y
提供创建和更新 Agent Skill 的指导，涵盖技能结构、核心原则（如精简性、自由度控制）及资源组织方式，帮助用户扩展 Claude 能力。
用户需要创建新的 Skill
用户需要更新现有的 Skill
npx skills add openstatusHQ/data-table-filters --skill skill-creator -g -y
指导基于红绿重构循环的测试驱动开发实践。强调通过公共接口编写集成风格的行为测试，避免耦合实现的水平切片反模式，提倡垂直切片迭代以确保测试覆盖关键业务逻辑且具备可维护性。
用户希望使用 TDD 构建功能或修复 bug
提及 red-green-refactor 流程
要求编写集成测试或测试优先开发
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页面
进行代码性能审查
重构现有代码以优化加载速度
npx skills add openstatusHQ/data-table-filters --skill vercel-react-best-practices -g -y
用于审查UI代码是否符合Web界面指南，支持检查无障碍性、UX和设计规范。通过获取最新规则并比对指定文件，输出简洁的违规位置报告。
review my UI
check accessibility
audit design
npx skills add openstatusHQ/data-table-filters --skill web-design-guidelines -g -y
作为高级顾问审计代码库，生成自包含的实施计划供其他代理执行。严格只读，不修改代码，专注于发现缺陷、安全、性能及债务问题，提供高价值改进建议与路线图规划。
审计代码库以发现改进机会
查找bug、安全漏洞或技术债务
生成供其他代理执行的实施计划
评估项目下一步方向或功能建议
npx skills add openstatusHQ/data-table-filters --skill improve -g -y
提供基于shadcn的React数据表格系统，支持过滤、排序、无限滚动及虚拟化。涵盖核心组件、多种状态适配器（nuqs/zustand）、Drizzle ORM集成、React Query连接及AI自然语言过滤等功能，通过CLI模块化管理安装与扩展。
data-table-filters
filterable data tables with shadcn
DataTableAuto
auto-infer
AI filters
MCP server
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
