From a32560ab2b1072ac86f7e156de25bcb3bd5e4a19 Mon Sep 17 00:00:00 2001 From: MuthuselviMurugan Date: Fri, 7 Aug 2026 11:39:57 +0530 Subject: [PATCH 1/4] Task(1044401): update the skill --- .../references/stage-1-intent-analysis.md | 46 ++++++ .../references/stage-3-layout-analysis.md | 78 ++++++++- .../references/stage-5-code-generation.md | 156 ++++++++++++++++-- 3 files changed, 268 insertions(+), 12 deletions(-) diff --git a/.apm/skills/syncfusion-angular-ui-builder/references/stage-1-intent-analysis.md b/.apm/skills/syncfusion-angular-ui-builder/references/stage-1-intent-analysis.md index c447808..eeb117d 100644 --- a/.apm/skills/syncfusion-angular-ui-builder/references/stage-1-intent-analysis.md +++ b/.apm/skills/syncfusion-angular-ui-builder/references/stage-1-intent-analysis.md @@ -18,6 +18,52 @@ 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-angular-ui-builder/references/stage-3-layout-analysis.md b/.apm/skills/syncfusion-angular-ui-builder/references/stage-3-layout-analysis.md index 393f0ac..1e7a559 100644 --- a/.apm/skills/syncfusion-angular-ui-builder/references/stage-3-layout-analysis.md +++ b/.apm/skills/syncfusion-angular-ui-builder/references/stage-3-layout-analysis.md @@ -1,6 +1,82 @@ # 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-angular-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-angular-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. + +--- --- diff --git a/.apm/skills/syncfusion-angular-ui-builder/references/stage-5-code-generation.md b/.apm/skills/syncfusion-angular-ui-builder/references/stage-5-code-generation.md index 07751c5..44ca855 100644 --- a/.apm/skills/syncfusion-angular-ui-builder/references/stage-5-code-generation.md +++ b/.apm/skills/syncfusion-angular-ui-builder/references/stage-5-code-generation.md @@ -2,6 +2,52 @@ **Purpose:** Generate production-ready Angular 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:** +```typescript +import { Component } from '@angular/core'; +import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data'; + +@Component({ + selector: 'app-root', + template: ` + + // columns + + ` +}) +export class AppComponent { + public data: DataManager = new DataManager({ + url: 'url', // Replace actual port url, + adaptor: new WebApiAdaptor() + }); +} +``` + +> **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** @@ -41,7 +87,8 @@ Icons: [list unique iconCss values] 2. **Extract and document:** - Package name (e.g., `@syncfusion/ej2-angular-grids`) - Exact import statement for the component - - **Style imports (CRITICAL)** - use overall single Syncfusion theme package + - **Style imports (CRITICAL)** - Use overall single Syncfusion theme package + - Theme CSS if applicable - Required providers/setup (if any) - Base dependencies @@ -52,18 +99,92 @@ Icons: [list unique iconCss values] - Read: `{.agent-root}/skills//SKILL.md` for complete API documentation - Read feature-specific guides: `/references/filtering.md`, `validation.md`, `customization.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 `styles.css` — **NEVER in component files** + - Component files should import only the Angular component packages (e.g, `@syncfusion/ej2-angular-buttons`) + +3. **Read:** `{.agent-root}/skills/syncfusion-angular-ui-builder/references/syncfusion-themes.md` + +**Correct Pattern:** -1. **Read:** `{.agent-root}/skills/syncfusion-angular-ui-builder/references/syncfusion-themes.md` +```css +/* styles.css - Theme package import via CSS @import */ +@import '@syncfusion/ej2-bootstrap5-theme/styles/bootstrap5.css'; +``` + +```typescript +// app.component.ts - Component imports only, NO theme package imports +import { Component } from '@angular/core'; +import { HeaderComponent } from './components/Header/header.component'; + +// header.component.ts - Component imports only, NO theme package imports +import { ButtonComponent } from '@syncfusion/ej2-angular-buttons'; +import { GridComponent } from '@syncfusion/ej2-angular-grids'; +``` + +**Incorrect Pattern (will fail build):** +```typescript +// header.component.ts - 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 -**Important** Use overall single Syncfusion theme package. +**⚠️ 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-angular-themes/references/tailwind3-css-variables.md` + - **Bootstrap 5.3** → `{.agent-root}/skills/syncfusion-angular-themes/references/bootstrap5.3-css-variables.md` + - **Material 3** → `{.agent-root}/skills/syncfusion-angular-themes/references/material3-css-variables.md` + - **Fluent 2** → `{.agent-root}/skills/syncfusion-angular-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 -Only after completing Steps 1-4, generate the .ts, .html files using the exact imports from component skills. +Only after completing Steps 1-4.5, generate the .ts, .html files using the exact imports from component skills. **ALL Selected Components MUST Be Used.** Do not substitute Stage 3 components with native HTML alternatives. +**⚠️ ENFORCEMENT: No Theme Imports in Component Files:** +- Component `.ts` files should ONLY import Angular 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 (`styles.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 @@ -109,8 +230,10 @@ Only after completing Steps 1-4, generate the .ts, .html files using the exact i **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-angular-ui-builder/references/syncfusion-themes.md` +- **Style Imports (CRITICAL):** + - Theme CSS import goes in `styles.css` only (app entry point) + - Component `.ts` files should NEVER import theme CSS files + - See Step 4 for complete rules on single theme package usage - **Semantic HTML:** Use proper HTML5 elements (`
`, `