# Responsive Fix

> Make components responsive with proper breakpoints

- Skill: `lxgicstudios/responsive-fix` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add lxgicstudios/responsive-fix`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lxgicstudios/responsive-fix/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: lxgicstudios (https://skillmd.com/u/lxgicstudios)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lxgicstudios/responsive-fix

---


# Responsive Fixer

Paste your desktop-only component, get mobile-responsive code back.

## Quick Start

```bash
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

```bash
# 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

```tsx
// 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.