skill_skill

Overview

This skill is a complete AIRIOT platform development guide for building a React + TypeScript client using shadcn/ui, Vite, and the AIRIOT MCP server. It presents project initialization, directory and naming conventions, and a comprehensive client library reference. The guide focuses on practical integrations: API client, authentication, schema-driven forms, Jotai-based models, realtime subscriptions, page hooks, and global configuration.

How this skill works

The guide explains how to bootstrap a shadcn/ui Vite project and configure the MCP server with environment variables for API access. It documents the @airiot/client APIs: creating API clients (createAPI), performing CRUD and queries, managing auth hooks, rendering JSON schema forms, using Model/TableModel and related hooks for state, and subscribing to realtime data via Subscribe and useDataTag. It also covers global configuration and message utilities.

When to use it

• Start a new AIRIOT frontend with shadcn/ui and Vite.
• Integrate with an AIRIOT MCP server for API and realtime data.
• Implement typed API calls, CRUD flows, and paginated lists.
• Build dynamic forms from JSON Schema and custom field renderers.
• Manage app state with Jotai models and real-time subscriptions.

Best practices

• Follow the prescribed src directory layout: pages, blocks, components, components/ui for base UI components.
• Use TypeScript everywhere; prefer functional components and hooks for logic separation.
• Name components by role: PascalCase for pages/blocks/business components, kebab-case for pure UI components.
• Encapsulate server logic with createAPI and convertItem to normalize responses centrally.
• Wrap app with Subscribe provider and centralize setConfig/getConfig at startup.

Example use cases

• Create a user management module: createAPI('core/user'), build CRUD forms with SchemaForm, and manage lists with useModelList.
• Build a device monitor: Subscribe provider, useDataTag for live telemetry, and useTableData for static device details.
• Implement protected routes using useUser to load session and redirect to /login when unauthenticated.
• Dynamic table pages: TableModel to fetch table schema and render DataGrid with server-driven columns.
• Custom forms: register custom field components via setFormFields and compose FieldArray for repeatable inputs.