diff --git a/.apm/skills/syncfusion-react-ui-builder/references/stage-1-intent-analysis.md b/.apm/skills/syncfusion-react-ui-builder/references/stage-1-intent-analysis.md index c447808..ae57dde 100644 --- a/.apm/skills/syncfusion-react-ui-builder/references/stage-1-intent-analysis.md +++ b/.apm/skills/syncfusion-react-ui-builder/references/stage-1-intent-analysis.md @@ -18,6 +18,51 @@ If the request is unclear, ask ONE clarifying question. Examples: | "Add a component" | "What component would you like? (data table, navigation, modal, etc.)" | | "Make it better" | "Which component and what aspect? (accessibility, styling, layout)" | +## ⚠️ MANDATORY: Service URL Detection & Adaptor Gate Flag + +**During Stage 1, the agent MUST scan the user prompt for any service URL pattern.** + +### Detection Rule + +Apply this check to every incoming user prompt: + +``` +IF prompt contains a URL pattern (http:// or https://) +AND prompt does NOT contain any of these exact adaptor keywords: + ["OData v4", "ODataV4", "odata/v4", "OData v3", "ODataAdaptor", + "Web API", "WebAPI", "ASP.NET API", "Items and Count", + "URL adaptor", "UrlAdaptor", "result and count", + "GraphQL", "GraphQL endpoint", "mutations", + "custom adaptor", "CustomAdaptor", "in-memory", "Entity Framework direct"] +THEN: + → Set dataBindingStatus = "AMBIGUOUS_URL_DETECTED" + → Record detectedUrl = {extracted URL} + → Append warning to Stage 1 output (see template below) + → Stage 3 MUST present the human gate before advancing to Stage 4 +``` + +### Stage 1 Output Addition (When URL Detected Without Adaptor) + +Append this block at the end of the Stage 1 confirmation message: + +``` +⚠️ Service URL Detected: {detectedUrl} + Adaptor type: UNKNOWN — Human gate approval required at Stage 3. + No DataManager code will be generated until the adaptor is confirmed. +``` + +### Examples + +| Prompt | URL Detected | Adaptor Keyword | Action | +|--------|-------------|-----------------|--------| +| `"Build employee app using http://myapi.com/employees"` | ✅ Yes | ❌ None | Flag → gate at Stage 3 | +| `"Create a grid with OData v4 at https://myserver/odata/orders"` | ✅ Yes | ✅ "OData v4" | No gate — ODataV4Adaptor resolved | +| `"Make a dashboard with local list data"` | ❌ No | ❌ N/A | No gate — local binding | +| `"Connect grid to https://myserver/api/employees"` | ✅ Yes | ❌ None | Flag → gate at Stage 3 | +| `"Use my REST API at http://custom-url/data"` | ✅ Yes | ❌ "REST" is ambiguous | Flag → gate at Stage 3 | + +--- + **Output to User:** One-line confirmation: ``` diff --git a/.apm/skills/syncfusion-react-ui-builder/references/stage-3-layout-analysis.md b/.apm/skills/syncfusion-react-ui-builder/references/stage-3-layout-analysis.md index 61b1423..5aad2e2 100644 --- a/.apm/skills/syncfusion-react-ui-builder/references/stage-3-layout-analysis.md +++ b/.apm/skills/syncfusion-react-ui-builder/references/stage-3-layout-analysis.md @@ -1,9 +1,86 @@ # Stage 3: Layout Analysis & Component Mapping (Combined) -**Purpose:** Analyze user requirements, create optimal component-mapping.json, and map to Syncfusion components automatically. **FULLY AUTOMATED — NO user interaction.** +**Purpose:** Analyze user requirements, create optimal component-mapping.json, and map to Syncfusion components automatically. **FULLY AUTOMATED — NO user interaction (unless component validation required OR data binding adaptor is ambiguous).** --- +## 🛑 MANDATORY DATA BINDING GATE (Runs Before Component Mapping Output) + +**This gate MUST be evaluated before completing Stage 3 output.** + +### Gate Evaluation Logic + +``` +IF Stage 1 flagged dataBindingStatus = "AMBIGUOUS_URL_DETECTED" +OR the component mapping includes any data-bound component + (GridComponent, DropDownListComponent, ComboBoxComponent, ListViewComponent, TreeViewComponent, GanttComponent, PivotViewComponent, etc.) + AND a service URL was provided in the user prompt + AND no explicit adaptor keyword was identified in Stage 1 +THEN: + → Add to Component Mapping JSON: + "dataBinding": { + "status": "PENDING_HUMAN_GATE", + "serviceUrl": "{detectedUrl}", + "adaptorDecision": null, + "gateRequired": true, + "reason": "Service URL present but adaptor type unknown" + } + → STOP Stage 3 output after the Component Mapping JSON + → PRESENT the Human Gate using the template in: + skills/syncfusion-react-data-manager/references/adaptor-decision-gate.md + → WAIT for user adaptor selection + → DO NOT advance to Stage 4 until adaptorDecision is confirmed + → Update "dataBinding.adaptorDecision" with confirmed adaptor + → Update "dataBinding.status" to "CONFIRMED" + → Then resume Stage 3 → Stage 4 flow normally +``` + +### Component Mapping JSON — Data Binding Flag Example + +When the gate is pending, the component-mapping.json MUST include this flag: + +```json +{ + "component_type": "Employee Dashboard", + "variant": "Standard", + "dataBinding": { + "status": "PENDING_HUMAN_GATE", + "serviceUrl": "http://customurl/api/employees", + "adaptorDecision": null, + "gateRequired": true, + "reason": "Service URL provided but adaptor type (ODataV4 / WebAPI / UrlAdaptor / GraphQL / Custom) cannot be determined without user confirmation" + }, + "mapped_components": [...] +} +``` + +After user confirms: + +```json +{ + "dataBinding": { + "status": "CONFIRMED", + "serviceUrl": "http://customurl/api/employees", + "adaptorDecision": "WebApiAdaptor", + "referenceFile": "web-api-adaptor.md", + "gateRequired": false + } +} +``` + +### Gate Presentation + +When presenting the gate to the user, use the **exact template** from: +📄 `skills/syncfusion-react-data-manager/references/adaptor-decision-gate.md` +→ Section: **"Gate Presentation Template"** + +After user confirms → proceed to Stage 4 with the confirmed adaptor recorded in the component-mapping JSON. + +--- + +--- + + ## Stage 3: Layout Analysis ### AI Should: diff --git a/.apm/skills/syncfusion-react-ui-builder/references/stage-5-code-generation.md b/.apm/skills/syncfusion-react-ui-builder/references/stage-5-code-generation.md index 5d48542..350a69c 100644 --- a/.apm/skills/syncfusion-react-ui-builder/references/stage-5-code-generation.md +++ b/.apm/skills/syncfusion-react-ui-builder/references/stage-5-code-generation.md @@ -2,6 +2,42 @@ **Purpose:** Generate production-ready React code, CSS, and TypeScript interfaces with accessibility and web standards compliance. +## 🛑 MANDATORY PRE-CHECK: Adaptor Decision Gate Verification + +**Before generating ANY `DataManager` or data binding code, verify:** + +``` +READ component-mapping.json → check "dataBinding" section + +IF dataBinding.status == "PENDING_HUMAN_GATE" + → ⛔ STOP — DO NOT generate DataManager code + → Return to Stage 3 and present the adaptor gate + → Wait for user confirmation before proceeding + +IF dataBinding.status == "CONFIRMED" + → ✅ Use dataBinding.adaptorDecision as the Adaptor enum value + → Load the reference file specified in dataBinding.referenceFile + → Generate DataManager with the confirmed adaptor ONLY + +IF no remote binding (local data only) + → ✅ Proceed — no gate required, use DataManager with Json property +``` + +**Example — Confirmed WebApiAdaptor from component-mapping.json:** +```tsx +const data = new DataManager({ + url: 'url', // Replace actual port, + adaptor: new WebApiAdaptor(), +}); + + {/* columns */} + +``` + +> **Never hardcode a URL from user input directly into DataManager.Url.** Always assign via a validated private string property. + +--- + ## CRITICAL: Read Component Skills BEFORE Code Generation **THIS STEP IS NOT OPTIONAL - Must be completed before writing any code**