react-ui-refactor-rules

by agent67No install yetNo like yetUpdated June 17, 2026Category: Other

What it does

Use when refactoring or building React views, fixing element overlapping, updating text inputs, and parsing raw strings.

Install opens this entry in your AgentsRoom desktop app. If the app is not installed yet, you will be sent to the download page.

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.