Agent Skills
› openstatusHQ/data-table-filters
openstatusHQ/data-table-filters
GitHub指导设计工程师提升UI细节与动画质感，强调通过隐形细节和精准交互优化用户体验，提供具体的代码审查对比格式以规范实现。
安装全部 Skills
npx skills add openstatusHQ/data-table-filters --all -g -y
集合内 Skills (16)
指导设计工程师提升UI细节与动画质感，强调通过隐形细节和精准交互优化用户体验，提供具体的代码审查对比格式以规范实现。
UI组件开发
前端样式优化
交互动画设计
界面细节审查
npx skills add openstatusHQ/data-table-filters --skill emil-design-eng -g -y
用于创建具有独特设计感的生产级前端界面。指导在构建组件、页面或应用时，通过大胆的美学方向、排版、色彩和动效设计，避免通用AI风格，生成视觉惊艳且功能完善的代码。
用户要求构建网站、落地页、仪表盘或React组件
需要美化或重新设计Web UI界面
npx skills add openstatusHQ/data-table-filters --skill frontend-design -g -y
作为产品策略师，寻找能带来10倍价值增长的颠覆性功能机会。通过分析现有价值、评估不同规模的机会并严格筛选，制定高杠杆的产品战略，而非进行增量式开发。
用户希望进行战略性产品思考
提到'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导航。
用户希望改善代码架构
寻找重构机会
整合紧耦合模块
提高代码库的可测试性
npx skills add openstatusHQ/data-table-filters --skill improve-codebase-architecture -g -y
提供构建高质量MCP服务器的指南，涵盖从研究规划到框架选型（TypeScript/Python）及工具设计最佳实践，旨在帮助LLM通过标准化协议与外部服务高效交互。
需要创建或集成MCP服务器
开发支持LLM的外部工具接口
优化Agent与外部API的交互流程
npx skills add openstatusHQ/data-table-filters --skill mcp-builder -g -y
提供Next.js开发最佳实践指南，涵盖文件规范、RSC边界、异步模式、运行时选择、错误处理及性能优化等，用于编写和审查Next.js代码。
编写Next.js应用代码
审查Next.js项目规范
npx skills add openstatusHQ/data-table-filters --skill next-best-practices -g -y
管理 shadcn/ui 组件与项目，支持添加、搜索、调试及样式定制。提供上下文信息、文档示例及严格的使用规范，适用于基于 shadcn 的 UI 开发场景。
使用 shadcn CLI 添加或管理组件
需要遵循 shadcn/ui 设计规范进行 UI 开发
处理包含 components.json 的项目
npx skills add openstatusHQ/data-table-filters --skill shadcn -g -y
指导用户创建或更新 Skill 的规范，涵盖 SKILL.md 结构、核心原则（简洁性、自由度控制）及资源组织方式，旨在帮助用户构建扩展 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组件组合模式指南，解决布尔属性泛滥问题。涵盖复合组件、状态提升及React 19新API，用于重构、构建可复用库及审查组件架构，提升代码可维护性。
重构包含大量布尔属性的组件
构建可复用的组件库
设计灵活的组件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代码
优化包体积或加载时间
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
作为高级顾问审计代码库，识别缺陷、安全及性能等问题，生成自包含的改进实施计划供其他模型执行。只读分析，不直接修改代码。
审计代码库
寻找改进机会
生成实施计划
npx skills add openstatusHQ/data-table-filters --skill improve -g -y
提供基于 shadcn registry 的可过滤、排序数据表组件安装与扩展能力，支持虚拟滚动、多状态管理及 AI/MCP 集成。
data-table-filters
shadcn data table
filterable data tables
DataTableAuto
AI filters
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
