docs_skill

Overview

This skill is a complete development guide for the AIRIOT client built with React + TypeScript, shadcn/ui and Vite. It explains project initialization, directory and coding standards, and the full client library surface for API, auth, forms, state models, page hooks, real-time subscriptions and global configuration. The guide focuses on practical patterns and ready-to-use hooks/components to accelerate building AIRIOT-enabled frontends.

How this skill works

The guide inspects and documents the @airiot/client library to show how to create typed API clients, perform CRUD and paginated queries, and wire authentication flows with useLogin/useUser hooks. It covers JSON Schema driven forms (SchemaForm, FieldArray), Jotai-based models and TableModel for shared state, page-scoped hooks for variables and data sources, and real-time subscriptions via Subscribe, useDataTag and useTableData. It also shows how to set global behavior with setConfig and useMessage.

When to use it

• Start a new AIRIOT frontend using Vite and shadcn/ui and need a production-ready guide.
• Implement typed REST calls, pagination and custom conversions for AIRIOT resources.
• Add user authentication, session persistence and registration flows in a React app.
• Build dynamic admin pages driven by JSON Schema forms and array fields.
• Manage shared UI state and dynamic table schemas using Jotai-based models.
• Subscribe to real-time device or telemetry updates using data tags and table subscriptions.

Best practices

• Follow the prescribed src directory layout: pages, blocks, components, components/ui.
• Use TypeScript and functional components; define Props via interfaces or types.
• Create API instances with createAPI and use convertItem to normalize server data.
• Encapsulate business logic in Model/TableModel and expose actions via hooks.
• Register custom form fields with setFormFields instead of mutating form internals.
• Wrap the app with Subscribe provider for consistent real-time behavior and use manual subscribeTags only when needed.

Example use cases

• Admin user management page: createAPI for core/user, SchemaForm for create/update, useModelList for listing.
• Device dashboard: real-time temperature display using useDataTag and Subscribe, with fallback offline state handling.
• Dynamic data table: TableModel fetches schema and renders DataGrid, with server-driven columns and CRUD hooks.
• Settings page: usePageVar and useSetPageVar for per-page preferences and useDatasourceValue for shared datasets.
• Onboarding flow: useLogin and useUserReg for authentication, then load user profile with useUser.