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美化，强调大胆的美学方向和精致代码实现。
构建网页或应用界面
设计React/Vue组件
美化现有Web UI
npx skills add openstatusHQ/data-table-filters --skill frontend-design -g -y
作为产品战略家，通过10x思维模式寻找能带来十倍价值增长的高杠杆产品机会。分析当前价值，评估大规模、中等及小规模改进方案，输出纯策略文档，不涉及代码实现。
用户提到 '10x' 或 'game-changing'
询问 'what should we build next'
需要 'product strategy' 建议
寻求高影响力功能改进
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服务器，使LLM通过设计良好的工具与外部服务交互。涵盖Python和Node.js实现，强调API覆盖、命名规范及错误处理。
构建MCP服务器
集成外部API到LLM
开发Model Context Protocol工具
npx skills add openstatusHQ/data-table-filters --skill mcp-builder -g -y
提供 Next.js 开发最佳实践指南，涵盖文件规范、RSC 边界、异步模式、错误处理、数据获取及性能优化等核心规则，用于指导代码编写与审查。
Next.js 项目结构搭建
React Server Components 开发
Next.js 路由与 API 配置
前端性能优化
npx skills add openstatusHQ/data-table-filters --skill next-best-practices -g -y
管理 shadcn/ui 组件项目，涵盖添加、搜索、修复、调试及样式编排。提供上下文与文档，强制遵循 Tailwind 样式、表单结构及组合规范，确保 UI 开发一致性。
shadcn init
创建使用 --preset 的应用
切换到 --preset
项目中存在 components.json 文件
涉及 shadcn/ui 组件注册表或预设代码
npx skills add openstatusHQ/data-table-filters --skill shadcn -g -y
提供创建或更新 Agent Skill 的指导，涵盖技能结构、核心原则（如简洁性、自由度控制）及资源组织规范，帮助用户构建专业化的智能体扩展模块。
用户需要创建新的 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新特性规则。
重构包含大量布尔属性的组件
构建可复用的组件库
审查组件架构设计
使用复合组件或Context Provider
npx skills add openstatusHQ/data-table-filters --skill vercel-composition-patterns -g -y
提供 React 和 Next.js 性能优化指南，涵盖消除瀑布流、代码分割及服务端渲染等57条规则。用于指导编写、审查或重构代码，确保最佳性能表现。
编写或重构 React/Next.js 组件与页面
实施数据获取逻辑
审查代码以发现性能瓶颈
优化应用包体积或加载速度
npx skills add openstatusHQ/data-table-filters --skill vercel-react-best-practices -g -y
用于审查UI代码是否符合Web界面指南。通过Fetch获取最新规则，检查指定文件并输出file:line格式的合规性问题，适用于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
作为高级顾问审计代码库，生成自包含的实施计划供其他智能体执行。专注于发现缺陷、安全、性能及债务等改进机会，严格只读，不直接修改代码。
审计代码库
寻找改进机会
生成实施计划
npx skills add openstatusHQ/data-table-filters --skill improve -g -y
提供基于 shadcn 的可筛选、排序及虚拟化 React 数据表格系统，支持多状态管理适配器、Drizzle ORM 服务端过滤、React Query 集成及 AI 自然语言过滤功能。
安装 data-table-filters 组件
配置表头过滤器与排序
集成 Drizzle ORM 和 React Query
添加 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
