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
创建仪表盘或着陆页
npx skills add openstatusHQ/data-table-filters --skill frontend-design -g -y
作为产品战略助手，专注于寻找能带来10倍价值提升的产品机会和高杠杆改进点。通过理解当前价值和评估不同规模的机会，辅助制定非增量式的游戏改变型产品策略。
用户提到 '10x' 或 'product strategy'
询问如何使产品价值提升10倍
探讨 '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 导航
npx skills add openstatusHQ/data-table-filters --skill improve-codebase-architecture -g -y
指导创建高质量MCP服务器，使LLM能通过设计良好的工具与外部服务交互。涵盖Python和Node/TypeScript实现，包括API覆盖、命名规范、上下文管理及框架文档查阅等开发流程。
构建MCP服务器
集成外部API到LLM
npx skills add openstatusHQ/data-table-filters --skill mcp-builder -g -y
提供 Next.js 开发最佳实践指南，涵盖文件规范、RSC 边界、异步模式、数据获取、错误处理及性能优化等规则，用于指导代码编写与审查。
Next.js 项目开发
前端代码审查
Next.js 版本迁移
npx skills add openstatusHQ/data-table-filters --skill next-best-practices -g -y
管理 shadcn/ui 组件项目，支持添加、搜索、修复、调试、样式调整及组合 UI。提供上下文、文档和使用示例，适用于包含 components.json 的项目或特定初始化命令。
使用 shadcn/ui 构建 UI 或设计系统
执行 shadcn init 或 create app --preset
需要添加、搜索或修复 shadcn 组件
项目中存在 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 修复
用户提及 '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组件
优化数据获取策略
减少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
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数据表格组件安装与扩展能力，支持多维筛选、排序、虚拟滚动及AI过滤。用于快速构建高性能可过滤数据表，集成状态管理、ORM查询及MCP端点。
data-table-filters
shadcn data table
DataTableAuto
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
