Agent Skills
› openstatusHQ/data-table-filters
openstatusHQ/data-table-filters
GitHub该技能编码了Emil Kowalski的UI打磨哲学，涵盖组件设计、动画决策及提升软件质感的隐形细节。旨在通过训练出的品味和关注未被察觉的细节，利用美感作为差异化杠杆，构建让用户感到舒适且专业的界面体验。
安装全部 Skills
npx skills add openstatusHQ/data-table-filters --all -g -y
集合内 Skills (16)
该技能编码了Emil Kowalski的UI打磨哲学，涵盖组件设计、动画决策及提升软件质感的隐形细节。旨在通过训练出的品味和关注未被察觉的细节，利用美感作为差异化杠杆，构建让用户感到舒适且专业的界面体验。
需要优化用户界面交互体验
审查或改进CSS动画与过渡效果
评估UI组件的设计一致性与细节处理
追求极致的UI/UX打磨
npx skills add openstatusHQ/data-table-filters --skill emil-design-eng -g -y
用于创建独特、生产级的前端界面，避免通用AI审美。指导用户构建网页组件、页面或应用，强调大胆的美学方向、排版、色彩和动效细节，生成具有视觉冲击力的代码。
构建前端组件或页面
美化Web UI界面
设计仪表盘或着陆页
npx skills add openstatusHQ/data-table-filters --skill frontend-design -g -y
作为产品战略家，寻找能带来10倍价值提升的产品机会和高杠杆改进。通过分析当前价值、评估不同规模的机会点并 ruthless 筛选，输出纯策略文档，辅助制定高影响力功能规划。
用户想要进行战略性的产品思考
提到 '10x' 或 'high-impact features'
询问 'what would make this 10x better'
讨论 'product strategy' 或 'what should we build next'
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 Server 开发指南，涵盖设计原则、协议规范及 TypeScript/Python 框架使用。用于指导构建高质量 MCP 服务器，使 LLM 能通过工具与外部服务交互，提升 Agent 执行现实任务的能力。
需要创建 MCP Server
集成外部 API 到 LLM Agent
MCP 协议规范查询
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 的项目开发规范。
使用 shadcn/ui 组件库
执行 shadcn CLI 命令如 init, add, search
包含 components.json 文件的项目
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
提及红-绿-重构循环
要求进行测试优先的开发
npx skills add openstatusHQ/data-table-filters --skill tdd -g -y
提供React组件组合模式指南，用于解决布尔属性泛滥、构建灵活API及重构组件架构。涵盖复合组件、状态提升及React 19新特性，辅助AI与开发者编写可维护代码。
重构包含大量布尔属性的组件
构建可复用的组件库
审查组件架构设计
使用复合组件或Context Provider
npx skills add openstatusHQ/data-table-filters --skill vercel-composition-patterns -g -y
基于Vercel工程的React和Next.js性能优化指南，涵盖消除瀑布流、包体积优化及服务端性能等57条规则。用于编写、审查或重构代码时确保最佳实践，提升应用加载速度与运行效率。
编写新的React组件或Next.js页面
实施客户端或服务端数据获取
审查代码以发现性能问题
重构现有React/Next.js代码
优化包体积或加载时间
npx skills add openstatusHQ/data-table-filters --skill vercel-react-best-practices -g -y
用于审查UI代码是否符合Web界面指南。通过获取最新规则，检查指定文件并输出符合格式的违规发现。适用于审查UI、检查无障碍性、审计设计或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执行的自包含实施计划。严禁直接修改代码，仅输出规划方案。
审计代码库以发现改进机会
生成供其他Agent执行的手递手实施计划
评估技术债务或提出产品路线图建议
npx skills add openstatusHQ/data-table-filters --skill improve -g -y
提供基于shadcn的React数据表格系统，支持多类型筛选、排序、无限滚动及虚拟化。涵盖状态管理适配、Drizzle ORM服务端过滤、React Query集成及AI自然语言过滤功能。
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
