responsive-fix
Make components responsive with proper breakpoints
Datos de origen
- Repositorio
- lxgicstudios/ai-responsive
- Última actividad en el origen
- 20 de agosto de 2026 a las 19:07
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 0
- Forks
- 0
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- name
- responsive-fix
- description
- Make components responsive with proper breakpoints
# 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.
Ver en GitHub