sme-ui-ux-engine

SKILL.md

---
name: sme-ui-ux-engine
description: Use when editing or refactoring frontend React views, modifying container widths, adjusting dark-mode CSS variables, styling user chat input elements, and handling real-time data lookups.
---

# SME Platform UI/UX Quality & Accessibility Guardrails

When compiling, refactoring, or evaluating structural visual nodes, you must strictly implement the following execution rules:

### 1. Unified Split-Screen Layout (Anti-Overlap Constraint)

- Do not position the floating AI Chat Widget absolutely over core data tables or hide metrics like "Last Sold Timestamp" or "Status."
- Refactor the primary layout container in `App.js` using Flexbox or Grid properties.
- When the chat panel state is CLOSED, the product data table must fill 100% of the viewport width.
- When the chat panel state is OPEN, the screen must smoothly split: the inventory data grid dynamically constraints to 65% width, and the AI Chat Panel slides out to anchor flush against the right-hand boundary taking exactly 35% width. They must never mask each other.

### 2. High-Contrast Accessibility (Form Input Polish)

- Mitigate dark-on-dark contrast failure violations across the application.
- The chat footer input field area background, boundary text box, and typography placeholders (such as "Ask about a product...") must maintain distinct, high-contrast values against the page background. Text must be easily legible.

### 3. Asynchronous State Synchronization

- Prevent data divergence anomalies (e.g., the data grid flashing a count of 50 while the AI chat outputs a database reading of 45).
- Centralize your fetch responses. When an interactive natural language query executes against `/api/analytics/forecast`, any retrieved inventory numbers must pipe back up into a shared parent state context or global provider hook. Both the table columns and chat bubble vectors must re-render matching metrics instantly.

### 4. String Hygiene & Markdown Parsing

- Do not let unrendered raw markdown strings leak directly into conversational bubbles or list elements.
- Implement an HTML text mapper method. Convert incoming text flags (e.g., `**Coffee Beans**` or `**4.6 days**`) into semantic bold elements (`<strong>` or `<b>`) and cleaner typography spacing.

### 5. Open Sidebar Utilization (CRUD Forms Layout)

- Eliminate extensive empty dark blocks or dead vertical space underneath left sidebar navigation tags.
- Reposition static notification components to the top dashboard navigation cluster. Use the empty left sidebar space to insert an inline, beautifully styled data ingestion wrapper containing standard fields ("Item Name", "SKU", "Initial stock") along with an active "+ Add New Product" button to support quick CRUD data triggers.

แท็ก