Refactor HTML/TSX
Refactor page components to follow project conventions: use existing UI components, DaisyUI classes, and semantic colors.
Rules
1. Use Existing Components
Replace raw HTML with UI components from packages/ui/src/components/ui/. See components.md for available components and their props.
| Before | After |
|---|---|
<div className="alert alert-error"> | <Alert variant="error"> |
<button className="btn btn-primary"> | <Button variant="primary"> |
<input className="input input-bordered"> | <Input /> |
<select className="select select-bordered"> | <Select /> |
<fieldset className="fieldset"> | <Fieldset> |
<span className="loading loading-spinner"> | <Loading /> |
2. Use Semantic Colors
Replace primitive colors with DaisyUI semantic colors:
| Primitive (NG) | Semantic (OK) |
|---|---|
text-red-* | text-error |
text-blue-* | text-primary |
text-green-* | text-success |
bg-gray-100 | bg-base-100 |
border-gray-* | border-base-300 |
3. Extract Repeated Styles
When styling patterns repeat (e.g., border-t border-base-300 pt-6), consider extracting to a component.
Workflow
- •Read target file
- •Check available components in
packages/ui/src/components/ui/ - •Identify rule violations
- •Apply refactoring with Edit tool
- •Add necessary imports
- •Report changes made