react-ui-refactor-rules

SKILL.md

---
name: react-ui-refactor-rules
description: Use when refactoring or building React views, fixing element overlapping, updating text inputs, and parsing raw strings.
---

# React v18 & Tailwind UI Correction Protocol

When refactoring the user interface, you must strictly implement the following guidelines:

1. **Non-Overlapping Layout (Split Pane):** Never position floating elements (like chat boxes) absolutely over core data blocks. Modify `App.js` or structural flex grids so that when a side panel opens, the main container smoothly takes 65% width and the side panel locks cleanly to the remaining 35% without blocking visibility.
2. **Accessibility Inputs:** Ensure crisp typography boundaries. Change any dark-on-dark contrast configurations. The chat input bar footer text or placeholder (`Ask about a product...`) must have explicit contrast ratios against its background.
3. **String Parsing Protection:** Never drop naked text vectors into rendering grids. Parse raw incoming text markers (like `**Coffee Beans**` or `**4.6 days**`) cleanly using bold tag abstractions (`<strong>`) or a typography wrapper method.
4. **Sidebar Forms:** Maximize open sidebar matrices by embedding styled inputs and crisp buttons (`+ Add Product`) for user CRUD events.

Tag