Automatically convert desktop-only UI components into mobile-responsive layouts using AI-driven breakpoint analysis.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ai-responsive
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install ai-responsive using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Responsive Fixer?
Responsive Fixer is a specialized utility designed to bridge the gap between desktop-first development and modern mobile-responsive requirements. By integrating this tool into your collection of Openclaw Skills, you can instantly refactor static components into fluid, breakpoint-aware codebases. It automates the tedious process of calculating media queries, adjusting grid columns, and ensuring touch-friendly interactions across various screen sizes.
The tool is particularly effective for developers working with utility-first frameworks like Tailwind CSS or CSS-in-JS libraries. It analyzes existing layout structures to identify fixed pixel widths, static grids, and rigid font sizes, replacing them with mobile-first logic that scales elegantly from smartphones to large monitors.
Responsive Fixer Use Cases
- Converting legacy desktop-only React or Vue components to mobile-first designs.
- Rapidly prototyping responsive layouts from static pixel-perfect mockups.
- Auditing and fixing accessibility issues like small touch targets on mobile devices.
- Scaling font sizes and spacing dynamically across different device viewports using Openclaw Skills logic.
How Responsive Fixer Works
- The user provides a path to a specific component file via the CLI.
- The skill analyzes the existing layout structure, looking for fixed widths and desktop-centric grid/flex configurations.
- It applies mobile-first styling principles, converting fixed units to responsive scaling units.
- It injects appropriate breakpoints based on the content complexity or user-specified flags.
- The refactored code is generated, ensuring grid columns, font sizes, and visibility classes are optimized for all screens.
Responsive Fixer Setup
To get started with this skill, ensure you have Node.js 18 or higher and a valid API key. This tool integrates seamlessly with other Openclaw Skills for a full automation workflow.
# Set your environment variable
export OPENAI_API_KEY='your_api_key_here'
# Run the tool on a component
npx ai-responsive ./src/components/Dashboard.tsx
Responsive Fixer Data Schema & Taxonomy
The skill processes component files and can be customized with various flags to match your project's data architecture:
| Parameter | Description | Possible Values |
|---|---|---|
--breakpoints |
Custom screen sizes | sm, md, lg, xl |
--format |
Output styling methodology | tailwind, styled |
Input |
Path to source component | .tsx, .jsx, .vue, .svelte |
Output |
Refactored code block | Modified source with responsive classes |
Responsive Fixer Advanced Features
- Custom breakpoint configuration to align with specific design system requirements.
- CSS-in-JS support for developers using Styled Components or Emotion.
- Automatic touch target enforcement to ensure mobile accessibility standards (48px minimum).
- Intelligence to handle hidden/visible element toggling based on screen real estate.
- Seamless integration into CI/CD pipelines as part of broader Openclaw Skills automations.
SKILL.md
Loading
Related Openclaw Skills
PR Description Generator
Automatically generate professional, structured Pull Request descriptions by analyzing your git branch changes.
Permission Generator
An automated generator for Role-Based Access Control (RBAC) systems using natural language descriptions.
Mock Data Generator
A CLI utility that uses AI to generate realistic, context-aware mock data directly from your TypeScript interfaces.
Merge Resolver
An intelligent AI-powered tool that semantically analyzes and resolves git merge conflicts by understanding code intent rather than just text differences.
Schema Generator
Automatically generate production-ready database schemas from simple text descriptions with Openclaw Skills.
Snapshot Test Generator
An automated utility that generates comprehensive Jest or Vitest snapshot tests for UI components including edge cases and prop variations.
METADATA
Featured*
