responsive-fix
Make components responsive with proper breakpoints
Informations de source
- Dépôt
- lxgicstudios/ai-responsive
- Dernière activité de la source
- 20 août 2026 à 19:07
- Langue détectée de SKILL.md
- anglais
- Étoiles
- 0
- Forks
- 0
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Affichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- 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.
Voir sur GitHub