Transform desktop-only components into fully responsive, mobile-optimized UI elements instantly.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install responsive-maker
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 responsive-maker 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 Maker?
Responsive Maker is a specialized tool within the Openclaw Skills ecosystem designed to eliminate the manual labor of writing media queries and Tailwind breakpoints. It analyzes existing component structures—whether in React, Vue, or plain HTML—and intelligently injects the necessary CSS logic to ensure layouts reflow perfectly across mobile, tablet, and desktop viewports.
By focusing on mobile-first principles, it ensures that your application remains accessible and professional regardless of the device being used. This skill effectively bridges the gap between desktop-centric development and the modern mobile-first web by automating the conversion of fixed layouts into flexible, adaptive interfaces.
Responsive Maker Use Cases
- Converting legacy desktop-only React or Vue components to be mobile-friendly.
- Rapidly prototyping responsive layouts without manually writing CSS media queries.
- Retrofitting an entire directory of components with Tailwind CSS responsive prefixes.
- Fixing layout breaks reported by mobile users in existing production codebases.
How Responsive Maker Works
- The tool reads the source code of the target component file or directory.
- It identifies fixed-width containers, typography scales, and flexbox or grid configurations.
- The AI logic determines the most effective breakpoints for the specific layout structure.
- Responsive layers (CSS media queries or Tailwind prefixes) are generated and injected into the component.
- The resulting code preserves existing styling while adding the necessary flexibility for varying screen sizes.
Responsive Maker Setup
Ensure you have Node.js 18 or higher installed on your system. No permanent installation is required; simply execute the command via npx to utilize this entry in the Openclaw Skills collection.
npx ai-responsive src/components/Hero.tsx
To process an entire directory or use glob patterns:
npx ai-responsive src/components/
npx ai-responsive "src/**/*.tsx"
Responsive Maker Data Schema & Taxonomy
| Feature | Description |
|---|---|
| Input Support | Supports .tsx, .jsx, .vue, .html, and .css files |
| Output Logic | Modifies files in-place or generates updated versions with responsive logic |
| Breakpoint System | Implements sm, md, lg, and xl tiers based on industry standards |
| Style Engine | Compatible with Tailwind CSS, CSS Modules, and standard CSS |
Responsive Maker Advanced Features
- Bulk processing support via directory paths or glob patterns for entire project migrations.
- Automatic detection and conversion of fixed pixel values to relative units like rem or em.
- Support for both vanilla CSS media queries and utility-first frameworks like Tailwind CSS.
- Intelligent typography scaling that adjusts font sizes and line heights based on viewport width.
SKILL.md
Loading
Related Openclaw Skills
Release Notes Generator
An automated tool that converts complex git commit logs into polished, category-grouped release notes for users.
Release Gen
An automated versioning tool that analyzes commit history to determine semantic version bumps and generate git tags.
Regex Writer
A powerful utility that converts plain English descriptions into functional, tested regular expression patterns.
Regex Gen
An AI-powered CLI tool that translates natural language descriptions into precise, validated regular expression patterns.
REST to GraphQL Converter
Automatically transform your REST API endpoints into a production-ready GraphQL schema with zero manual configuration.
Resume Generator
An AI-powered CLI tool that transforms brief experience descriptions into professional, markdown-formatted developer resumes.
Featured*
