Imported from snaggums/ai-research-project (.agents/skills/air-build-frontend-slice/SKILL.md). Install upstream with npx skills add snaggums/ai-research-project --skill air-build-frontend-slice. Copyright stays with the author.

Build an AIR frontend slice

Name: air-build-frontend-slice
Author: snaggums

Confirm the approved Figma/component contract and read the relevant architecture-pack and existing frontend patterns before coding. Do not invent a backend response shape when a backend contract exists.

Reuse design-system primitives, AIR tokens, and Lucide icons. Add or update TypeScript domain types.
Implement components as semantic data-and-callback contracts; keep fetching, mutations, routing, and orchestration at page/feature level.
Add meaningful Storybook variants, constrained/long content, and route states. Create deterministic MSW fixtures and handlers for server states.
Add adapters, query keys, and React Query hooks for server data; compose the route and page.
Cover loading, empty, no-results, error, disabled, populated, responsive, interaction, keyboard, focus, accessibility, and regression behavior. Run focused tests before broader gates.

Use React Query for remote/server state, React Router for URL and navigation state, React Hook Form for form state, local component state for transient interactions, and Zustand only when shared client-only state is necessary.

# after Install: the listing is in your workspace's routing pool - a plan picks it for its slot curl -s -X POST https://api.opensmartroute.ai/api/v1/route -H 'Authorization: Bearer $OSR_API_KEY' -H 'Content-Type: application/json' -d '{"text": "...", "plan": true}'

{ "ocm": "1", "id": "snaggums-ai-research-project-air-build-frontend-slice", "kind": "skill", "name": "air-build-frontend-slice", "description": "Implement an approved Sky-AIR Figma or component contract in React, Storybook, routing, frontend API adapters, React Query, and MSW. Use for approved AIR components, pages, route states, frontend API/MSW contracts, or Storybook-to-Figma parity work.", "publisher": "snaggums", "version": "1.0.0", "capabilities": { "domains": [ "coding", "legal" ], "tags": [ "skill-md", "github" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Implement an approved Sky-AIR Figma or component contract in React, Storybook, routing, frontend API adapters, React Query, and MSW. Use for approved AIR components, pages, route states, frontend API/MSW contracts, or Storybook-to-Figma parity work." ], "primary": false, "metadata": { "source": { "provider": "github", "repository": "https://github.com/snaggums/ai-research-project", "path": ".agents/skills/air-build-frontend-slice/SKILL.md", "ref": "c4f73983e5b7cc91f4111ef7eb240e5c23cd804e", "url": "https://github.com/snaggums/ai-research-project/blob/c4f73983e5b7cc91f4111ef7eb240e5c23cd804e/.agents/skills/air-build-frontend-slice/SKILL.md", "key": "snaggums/ai-research-project/.agents/skills/air-build-frontend-slice/SKILL.md" } }, "instructions": "# Build an AIR frontend slice\n\nConfirm the approved Figma/component contract and read the relevant architecture-pack and existing frontend patterns before coding. Do not invent a backend response shape when a backend contract exists.\n\n1. Reuse design-system primitives, AIR tokens, and Lucide icons. Add or update TypeScript domain types.\n2. Implement components as semantic data-and-callback contracts; keep fetching, mutations, routing, and orchestration at page/feature level.\n3. Add meaningful Storybook variants, constrained/long content, and route states. Create deterministic MSW fixtures and ", "cost": { "context_tokens": 284 } }

air-build-frontend-slice

About

Build an AIR frontend slice

Use it

Manifest

Reviews