From 2eb83b4b1d065ee0d93cf15360e1b18de3838fa6 Mon Sep 17 00:00:00 2001 From: MuthuselviMurugan Date: Fri, 7 Aug 2026 11:38:16 +0530 Subject: [PATCH 1/2] Task(1044401): update the skill --- .../references/stage-1-intent-analysis.md | 45 ++++++ .../references/stage-3-layout-analysis.md | 81 +++++++++- .../references/stage-5-code-generation.md | 138 +++++++++++++++++- 3 files changed, 254 insertions(+), 10 deletions(-) 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..952e547 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: @@ -262,7 +339,7 @@ node --version ``` Do not proceed or use any manual fallback. The script is required for accurate component mapping. -**Step 3: Run ComponentMapper Script** +**Step 3: Run ComponentMapper Script** with component-mapping.json input ```bash cd //syncfusion-react-ui-builder/scripts node components-search.cjs /component-mapping.json 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..07b2f55 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** @@ -53,11 +89,78 @@ Icons: [list unique iconCss values] - Read: `{.agent-root}/skills//SKILL.md` for complete API documentation - Read feature-specific guides: `/references/filtering.md`, `validation.md`, `styling.md`, etc. -### Step 4: (CRITICAL) Read the Syncfusion themes guide to install the overall single Syncfusion theme package: +### Step 4: (CRITICAL) Syncfusion Single Theme Package - App Entry Point Only + +**⚠️ MANDATORY RULES - VIOLATION WILL CAUSE BUILD FAILURES:** + +1. **SINGLE THEME PACKAGE ONLY:** + - Use ONLY the overall Syncfusion theme package (e.g., `@syncfusion/ej2-bootstrap5-theme`) + - **NEVER import individual component theme files** (e.g., `@syncfusion/ej2-buttons/styles/bootstrap5.css`) + +2. **IMPORT LOCATION: App Entry Point Only:** + - Import the single theme package in `index.css` — **NEVER in component files** + - Component files should import only the React component packages (e.g, `@syncfusion/ej2-react-buttons`) -1. **Read:** `{.agent-root}/skills/syncfusion-react-ui-builder/references/syncfusion-themes.md` +3. **Read:** `{.agent-root}/skills/syncfusion-react-ui-builder/references/syncfusion-themes.md` -**Important** Use overall single Syncfusion theme package. +**Correct Pattern:** + +```css +/* index.css - Theme package import via CSS @import */ +@import '@syncfusion/ej2-bootstrap5-theme/styles/bootstrap5.css'; +``` + +```tsx +/* App.tsx - Component imports only, NO theme package imports */ +import './App.css'; +import Dashboard from './components/Dashboard/Dashboard'; + +// Dashboard.tsx - Component imports only, NO theme package imports +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; +import { GridComponent } from '@syncfusion/ej2-react-grids'; +``` + +**Incorrect Pattern (will fail build):** +```tsx +// Dashboard.tsx - WRONG! Individual component theme package imports +import '@syncfusion/ej2-buttons/styles/bootstrap5.css'; // ❌ NEVER +import '@syncfusion/ej2-grids/styles/bootstrap5.css'; // ❌ NEVER +``` + +### Step 4.5: (MANDATORY) Read CSS Variables for Your Selected Theme + +**⚠️ This step MUST be completed before generating ANY CSS customization** +1. **Read** the CSS variables file for your selected theme: + - **Tailwind 3** → `{.agent-root}/skills/syncfusion-react-themes/references/tailwind3-css-variables.md` + - **Bootstrap 5.3** → `{.agent-root}/skills/syncfusion-react-themes/references/bootstrap5.3-css-variables.md` + - **Material 3** → `{.agent-root}/skills/syncfusion-react-themes/references/material3-css-variables.md` + - **Fluent 2** → `{.agent-root}/skills/syncfusion-react-themes/references/fluent2-css-variables.md` + +2. **Identify YOUR theme** from Stage 4 and use correct format: + - **Fluent 2 / Bootstrap 5 / Tailwind 3** → hex values + - **Material 3** → RGB tuples (no `rgb()` wrapper) + +3. **Use ONLY `--color-sf-*` variables** when customizing Syncfusion. Never arbitrary hex or custom variables. +4. **Include ALL variables from the 'Core CSS Variables Reference' table** in your generated CSS. Do not skip any — especially interaction-related variables (`*_hover`, `*_selected`, `*_pressed`, `*_focus`, `*_dragged`). + +### Step 4.6: (MANDATORY) Confirm Dark Mode Status + +**⚠️ This step MUST be completed before generating ANY component markup** + +1. **Check for dark mode requirement** from Stage 4 dark mode decision: + - Review `styles.css` (or equivalent) for `.dark { --background: ... }` definitions + - Check for `--background` values darker than `#1a1a1a` inside `.dark` blocks + - Verify Stage 4 dark mode decision checklist was completed + +2. **If dark mode IS needed** (project has `.dark` class with dark background): + - Components that display data (Grid, TreeGrid, DataGrid, etc.) MUST be wrapped in `e-dark-mode` class + - Example: `
` + +3. **If dark mode is NOT needed** (light-only theme): + - No `e-dark-mode` wrapper required + - Components render in default light theme + +**⚠️ ENFORCEMENT: Dark mode wrapper is MANDATORY when Stage 4 detected dark backgrounds.** Do NOT skip this check — components without proper dark mode wrapping will render incorrectly. ### Step 5: NOW Generate Code Using Extracted Information @@ -65,6 +168,12 @@ Only after completing Steps 1-4, generate the .tsx file using the exact imports **ALL Selected Components MUST Be Used.** Do not substitute Stage 3 components with native HTML alternatives. +**⚠️ ENFORCEMENT: No Theme Imports in Component Files:** +- Component `.tsx` files should ONLY import React component packages +- **NEVER import theme CSS files** (`*.css` from `@syncfusion/ej2-*-theme` or `@syncfusion/ej2-*/styles/*.css`) in component files + - Theme imports belong ONLY in app entry point (`index.css`) +- If you see theme imports in generated component code, **reject and regenerate** + **Common Mistake to Avoid:** ❌ Generate code, then try to add overall single Syncfusion theme style imports later → Results in missing styles, broken UI ✅ Read getting-started FIRST, use overall single Syncfusion theme style imports, THEN generate code with all imports included @@ -110,8 +219,10 @@ Only after completing Steps 1-4, generate the .tsx file using the exact imports **Code Generation Standards:** - **Component Imports:** Use exact import syntax from component skill's getting-started.md -- **Style Imports:** Include the Syncfusion single package theme from `references/syncfusion-themes.md` - **Read:** `{.agent-root}/skills/syncfusion-react-ui-builder/references/syncfusion-themes.md` +- **Style Imports (CRITICAL):** + - Theme CSS import goes in `index.css` only (app entry point) + - Component `.tsx` files should NEVER import theme CSS files + - See Step 4 for complete rules on single theme package usage - **Semantic HTML:** Use proper HTML5 elements (`
`, `