|
| 1 | +--- |
| 2 | +name: a2ui-implement-new-sdks-for-client-language |
| 3 | +description: Step-by-step phased instructions for building new A2UI Core SDKs, Framework Adapters, and Inference SDKs from scratch in any client language. |
| 4 | +--- |
| 5 | + |
| 6 | +# A2UI SDK Implementation Guide (Phased Execution) |
| 7 | + |
| 8 | +This skill provides expert instructions and sequences for AI agents or contributors tasked with implementing A2UI Core SDKs, Framework Adapters, or Agent/Inference SDKs in a new programming language or UI framework. |
| 9 | + |
| 10 | +--- |
| 11 | + |
| 12 | +## **1. Core State SDK Phases** |
| 13 | + |
| 14 | +If you are building a new **Core SDK** (e.g., in Rust, Swift, Go, or C++), you must follow this sequence of phases: |
| 15 | + |
| 16 | +### **Phase 1: Context & Schemas Ingestion** |
| 17 | + |
| 18 | +Thoroughly review: |
| 19 | + |
| 20 | +- `blueprints/modules/a2ui_core.blueprint.md` (for state and message structures). |
| 21 | +- `specification/v1_0/json/common_types.json` (dynamic binding schemas). |
| 22 | +- `specification/v1_0/json/server_to_client.json` (message envelopes). |
| 23 | +- `specification/v1_0/catalogs/basic/catalog.json` (target components catalog). |
| 24 | + |
| 25 | +### **Phase 2: Technical Architecture Planning** |
| 26 | + |
| 27 | +Create a detailed, local architectural proposal detailing: |
| 28 | + |
| 29 | +- **Dependencies**: Which Schema library and Observable/Reactive library will you use? Note that the reactive library must support both discrete event subscription and stateful, signal-like data streams (e.g., BehaviorSubject/Signal). |
| 30 | +- **Component APIs**: How will you define the `ComponentApi` interface in this language? |
| 31 | +- **Binding Strategy**: How will you structure the abstract Core Binder Layer? |
| 32 | +- _STOP and obtain human reviewer approval on this plan before writing code._ |
| 33 | + |
| 34 | +### **Phase 3: Core Model Layer** |
| 35 | + |
| 36 | +Implement the framework-agnostic data and processor layers: |
| 37 | + |
| 38 | +1. **Observables & Signals**: Implement multi-cast reactive streams with clear unsubscribe mechanism to prevent leaks. |
| 39 | +2. **Protocol Structures**: Create strictly-typed native classes/structs representing `A2uiMessage` envelopes and client capabilities with serialization/deserialization. |
| 40 | +3. **DataModel & JSON Pointers**: Implement relative/absolute path resolution, auto-vivification (auto-typing intermediate segments), and bubble/cascade path change notifications. |
| 41 | +4. **Core State Models**: Implement `ComponentModel`, `SurfaceComponentsModel`, `SurfaceModel`, and `SurfaceGroupModel`. |
| 42 | +5. **Context Mapping**: Implement `DataContext` and `ComponentContext`. |
| 43 | +6. **MessageProcessor**: Ingest incoming messages and mutate the state models. Generate `inlineCatalogs` client capabilities. |
| 44 | +7. **Verification**: Write comprehensive unit tests for pointer cascading, JSON deserialization/validation, and message dispatching. |
| 45 | + |
| 46 | +### **Phase 4: Foundational Basic Catalog Support** |
| 47 | + |
| 48 | +Bootstrap support for the Basic Catalog: |
| 49 | + |
| 50 | +- **Foundational Components**: Define the pure API schemas and Binders for: `Text`, `Row`, `Column`, `Button`, and `TextField`. |
| 51 | +- **Foundational Functions**: Implement `formatString` to interpret `${expression}` syntaxes, supporting recursive token evaluations and reactive coercion. |
| 52 | +- **Verification**: Ensure properties update reactively when underlying data paths emit notifications. |
| 53 | + |
| 54 | +### **Phase 5: Complete Basic Catalog Support** |
| 55 | + |
| 56 | +- **Full Components & Binders**: Define core binders for all other components in `basic/catalog.json`. |
| 57 | +- **Full Functions**: Implement remaining basic mathematical, logical, and array operations. |
| 58 | +- **Validation**: Ensure strict type coercion rules are satisfied and memory disposals work flawlessly. |
| 59 | + |
| 60 | +--- |
| 61 | + |
| 62 | +## **2. Framework Adapter SDK Phases** |
| 63 | + |
| 64 | +If you are building a new **UI Framework Adapter / Renderer** (e.g., in Flutter/Dart, SwiftUI, Jetpack Compose, Vue, or Svelte), follow this sequence: |
| 65 | + |
| 66 | +### **Phase 1: Ingestion & Core Integration** |
| 67 | + |
| 68 | +Review: |
| 69 | + |
| 70 | +- `blueprints/modules/a2ui_framework_adapter.blueprint.md` (View and rendering architecture). |
| 71 | +- `specification/v1_0/docs/basic_catalog_implementation_guide.md` (spacing, alignment, and typography specifications). |
| 72 | + |
| 73 | +### **Phase 2: Architectural Plan** |
| 74 | + |
| 75 | +Draft a plan specifying: |
| 76 | + |
| 77 | +- **Component Registry**: How components are dynamically resolved and instantiated. |
| 78 | +- **Surface Widget**: How the root canvas mounts and recurses through the layout tree starting at `root`. |
| 79 | +- **Observer/State Bridge**: Which Strategy (Direct, Predefined Binders, or Automated wrappers) will connect core signals to native views. |
| 80 | +- _STOP and obtain human reviewer approval on this plan._ |
| 81 | + |
| 82 | +### **Phase 3: Adapter & Lifecycle Layer** |
| 83 | + |
| 84 | +- Implement `ComponentImplementation` base traits/classes. |
| 85 | +- Implement the framework-native `Surface` entrypoint widget. |
| 86 | +- Implement subscription management: lazy-subscribing only on mount, handling path stability updates, and strictly calling `dispose()` on unmount. |
| 87 | + |
| 88 | +### **Phase 4: Bootstrapping Basic Catalog Rendering** |
| 89 | + |
| 90 | +- Build native visual elements for: `Text`, `Row`, `Column`, `Button`, and `TextField`. |
| 91 | +- Bundle these elements into the first framework catalog adapter. |
| 92 | +- Verify reactive layout properties dynamically. |
| 93 | + |
| 94 | +### **Phase 5: Gallery Application Milestone** |
| 95 | + |
| 96 | +Build the **Gallery App** as a testing playground with: |
| 97 | + |
| 98 | +- Left Column: Sample navigation. |
| 99 | +- Center Column: Surface preview, JSON message stream, and step-by-step interactive message stepper. |
| 100 | +- Right Column: Live data model inspect pane and action logger. |
| 101 | +- Load the 5 foundational verification examples: `00_simple-text.json`, `00_row-layout.json`, `00_complex-layout.json`, `00_interactive-button.json`, and `00_simple-login-form.json`. |
| 102 | +- _STOP and obtain human reviewer approval of the UI and visual rendering performance._ |
| 103 | + |
| 104 | +### **Phase 6: Full Catalog Support** |
| 105 | + |
| 106 | +- Implement all remaining widgets (e.g. Card, Image, List, etc.) and validation traits like `Checkable`. |
| 107 | +- Update the Gallery App to support all official examples in `specification/v1_0/catalogs/basic/examples/`. |
| 108 | +- Run visual parity and event action tests to verify correctness. |
0 commit comments