Agent Skills Hub

Building Frontend Dashboards

使用 TypeScript、shadcn/ui、TanStack Query 和 Supabase 构建响应式 React 仪表板。适用于制作 KPI 卡片、数据表格、Recharts 图表及 event-studio 管理后台。

components-build

根据 components.build 规范构建现代化、可组合且易于访问的 React UI 组件。适用于设计系统、组件库及可重用 UI 架构的开发与维护。

web-artifacts-builder

一套用于开发与打包复杂、多组件 React/TypeScript 网页实体的工具包，整合了 Vite、Tailwind CSS 与 shadcn/ui。

reactive-ui-patterns

用于远程数据获取的响应式 UI 模式，通过 .current 属性实现流畅的原位更新、保持滚动位置并有效管理加载状态。

fix

为 React 开发者提供的自动化代码维护工具，用于解决 lint、代码格式化及 CI 验证错误。

state-management

前端状态管理指南，涵盖 Zustand/Pinia 全局存储、TanStack Query 服务器状态以及 URL 状态处理。

react-vite-best-practices

React 与 Vite 性能优化指南。适用于编写、审查或优化基于 Vite 构建的 React 组件。

testing-patterns

Jest 测试模式、工厂函数、模拟策略与 TDD 工作流程。适用于编写单元测试、创建测试工厂或遵循 TDD 红绿重构循环。

context7

通过 Context7 API 获取 React、FastAPI、Next.js 等框架的实时技术文档、代码示例与开发指导。

react-router-data-mode

使用 React Router 的数据模式 (data mode) 开发 React 应用程序，包含 createBrowserRouter、路由器 (RouterProvider)、loaders、actions、fetchers 与乐观 UI 更新。

react-native-design

精通 React Native 样式、导航与 Reanimated 动画。构建高性能、跨平台的原生体验移动应用。

react-native-state

精通 React Native 状态管理，涵盖 Redux Toolkit、Zustand、TanStack Query 及 AsyncStorage 数据持久化。