responsive-fix
Make components responsive with proper breakpoints
Informações da origem
- Repositório
- lxgicstudios/ai-responsive
- Última atividade na origem
- 20 de agosto de 2026 às 19:07
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 0
- Forks
- 0
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Exibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- 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 no GitHub