responsive-fix
Make components responsive with proper breakpoints
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/lxgicstudios/ai-responsiveResponsive 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
- GitHub: github.com/lxgicstudios/ai-responsive
- Twitter: @lxgicstudios
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-lxgicstudios-ai-responsive": {
"enabled": true,
"auto_update": true
}
}
}Related Skills
script-gen
Generate package.json scripts with AI. Use when setting up npm scripts.
email-template-gen
Generate responsive email templates. Use when building transactional emails.
branch-namer
Generate descriptive git branch names from plain English. Use when you need a branch name that follows conventions.
cloudflare-gen
Generate Cloudflare Workers configuration and code. Use when building on the edge.
adr-writer
Generate Architecture Decision Records with AI. Use when documenting technical decisions.