| name | documentation_robotics_viewer-api-sync |
| description | Sync OpenAPI specs and generate TypeScript types |
| user_invocable | true |
| args | null |
| generated | true |
| generation_timestamp | "2026-02-23T16:10:03.055Z" |
| generation_version | 2.0 |
| source_project | documentation_robotics_viewer |
| source_codebase_hash | 00a2f9723e9a7f64 |
API Sync & Type Generation
Quick-reference skill for documentation_robotics_viewer - syncs OpenAPI specs from DR CLI server and generates TypeScript types.
Usage
/documentation_robotics_viewer-api-sync
Purpose
Synchronize OpenAPI specifications from the Documentation Robotics CLI server (REST API endpoints) and generate TypeScript type definitions for:
- DR CLI REST API (
/api/model, /api/validate, /api/changeset/*, etc.)
- WebSocket JSON-RPC 2.0 Protocol (model updates, validation events)
- Authentication Types (token-based auth, user sessions)
- Model Element Types (across 12 architecture layers: Motivation, Business, Security, Application, Technology, API, DataModel, Dataset, UX, Navigation, APM, Testing)
This ensures type safety across the src/apps/embedded/services/ integration layer and src/core/types/ model definitions.
Implementation
Step 1: Fetch OpenAPI Spec from DR CLI Server
curl http://localhost:3090/api/openapi.json -o openapi.json
Step 2: Generate TypeScript Types
npx openapi-typescript openapi.json -o src/core/types/generated/dr-cli-api.ts
npm run types:generate
Step 3: Validate Generated Types
npx tsc --noEmit
npm test -- tests/unit/types
Step 4: Update Type Imports
Update imports in integration files:
src/apps/embedded/services/apiClient.ts - REST API client types
src/apps/embedded/services/websocketClient.ts - WebSocket message types
src/core/types/model.ts - Core model element types
src/core/stores/modelStore.ts - Store state types
Critical Files to Check After Sync
src/core/types/model.ts - Core MetaModel types (Element, Relationship, Layer)
src/core/types/reactflow.ts - React Flow node data interfaces (extends BaseNodeData)
src/apps/embedded/services/apiClient.ts - DR CLI REST client
src/apps/embedded/services/websocketClient.ts - DR CLI WebSocket client
src/apps/embedded/stores/authStore.ts - Authentication state types
Examples
Example 1: Full Sync Workflow
dr-cli serve --port 3090
/documentation_robotics_viewer-api-sync
npx tsc --noEmit
npm test -- tests/integration/api
Example 2: After DR CLI API Changes
When the DR CLI server adds new endpoints (e.g., /api/security/analyze):
curl http://localhost:3090/api/openapi.json -o openapi.json
/documentation_robotics_viewer-api-sync
Example 3: Type-Safe WebSocket Messages
After regenerating types, use them in WebSocket handlers:
import type { ModelUpdateNotification, ValidationEvent } from '@/core/types/generated/dr-cli-api';
socket.on('model.updated', (msg: ModelUpdateNotification) => {
modelStore.getState().updateElement(msg.elementId, msg.changes);
});
Related Documentation
- DR CLI Integration Guide:
documentation/DR_CLI_INTEGRATION_GUIDE.md (400+ lines)
- WebSocket Protocol:
documentation/WEBSOCKET_JSONRPC_IMPLEMENTATION.md
- Type Definitions:
src/core/types/model.ts, src/core/types/reactflow.ts
- API Client:
src/apps/embedded/services/apiClient.ts
Troubleshooting
Issue: Type generation fails
Check:
- DR CLI server is running (
curl http://localhost:3090/health)
- OpenAPI spec is valid JSON (
jq . openapi.json)
- Node.js version matches project requirements (20.x/22.x)
Issue: Generated types conflict with existing types
Solution:
- Review
src/core/types/model.ts for manual type definitions
- Use TypeScript module augmentation for extending generated types
- Keep generated types separate in
src/core/types/generated/
Issue: Tests fail after type sync
Solution:
npm test -- tests/fixtures/
npm run test:fixtures:update
This skill was automatically generated for the documentation_robotics_viewer project (TypeScript 5.9.3, React 19.2.0, @xyflow/react 12.9.3).