react-ui-refactor-rules

作者：agent67尚無安裝尚無按讚更新於 2026年6月17日分類：其他

它能做什麼

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

安裝會在你的 AgentsRoom 桌面版開啟這個條目。如果還沒有安裝應用，你會被帶到下載頁面。

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.

標籤

frontend