responsive-fix

✓Verified·Scanned 2/18/2026

Make components responsive with proper breakpoints

from clawhub.ai·v8c67c32·1.2 KB·0 installs
Scanned from 1.0.1 at 8c67c32 · Transparency log ↗
$ vett add clawhub.ai/lxgicstudios/responsive-fix

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

# Fix a component
npx ai-responsive ./src/components/Sidebar.tsx

# Specify breakpoints
npx ai-responsive ./components/Nav.tsx --breakpoints sm,md,lg

# CSS-in-JS output
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

// Before: grid-cols-4
// After: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4

Requirements

Node.js 18+. OPENAI_API_KEY required.

License

MIT. Free forever.

Built by LXGIC Studios