| name | responsive-fix |
| description | Make components responsive with proper breakpoints |
Responsive Fixer
Paste your desktop-only component, get mobile-responsive code back.
Quick Start
npx ai-responsive ./src/components/Dashboard.tsx
What It Does
- Analyzes layout structure
- Adds proper breakpoints
- Converts fixed widths to responsive
- Handles grid/flex adjustments
- Adds mobile-first styles
Usage Examples
npx ai-responsive ./src/components/Sidebar.tsx
npx ai-responsive ./components/Nav.tsx --breakpoints sm,md,lg
npx ai-responsive ./components/Card.tsx --format styled
What It Fixes
- Fixed pixel widths → responsive units
- Desktop grids → mobile stacks
- Hidden mobile elements → proper show/hide
- Touch targets → 48px minimum
- Font sizes → responsive scaling
Output Example
Requirements
Node.js 18+. OPENAI_API_KEY required.
License
MIT. Free forever.
Built by LXGIC Studios