responsive-design
Skill by wpank
Why use this skill?
Master modern responsive design with container queries, fluid typography, and mobile-first CSS strategies. Install this OpenClaw skill to build highly adaptive, production-ready web interfaces.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wpank/responsive-designWhat This Skill Does
The responsive-design skill by wpank is a specialized toolkit designed to streamline the implementation of modern, adaptive web layouts. It moves beyond traditional, viewport-locked media queries by incorporating advanced CSS techniques such as container queries, fluid typography using the clamp() function, and sophisticated CSS Grid/Flexbox layouts. By prioritizing a mobile-first philosophy, this skill enables developers to build interfaces that remain robust and aesthetically pleasing across the vast spectrum of modern device screen sizes. It empowers your AI agent to generate clean, maintainable CSS and component-level code that adjusts contextually based on its parent container rather than just the browser viewport.
Installation
To integrate this skill into your development workflow, use the following command via the terminal:
npx clawhub@latest install responsive-design
This command configures the necessary environment for the agent to access responsive patterns and Tailwind-compatible utility classes.
Use Cases
This skill is highly effective when:
- Developing design systems where components need to behave differently based on where they are placed (e.g., a card component appearing in a sidebar vs. a main content area).
- Calculating font sizes and spacing that scale fluidly without the need for excessive breakpoint overrides.
- Standardizing grid and flex systems across a large project using a consistent mobile-first breakpoint scale (sm to 2xl).
- Creating high-performance interfaces that handle complex content reflows, such as photo galleries, dashboards, or responsive landing pages.
Example Prompts
- "OpenClaw, generate a responsive product card component that uses container queries to switch from a stacked list layout to a side-by-side grid when the container width exceeds 500px."
- "Help me refactor this hero section to use fluid typography. I want the header size to transition smoothly between 2rem and 4rem based on the viewport width using the clamp function."
- "Create a mobile-first CSS grid layout for a blog index page that adapts from 1 column on mobile to 3 columns on desktops using standard tailwind breakpoints."
Tips & Limitations
When using container queries, ensure your browser support requirements align with modern standards, as older versions of some browsers may require polyfills. Always define your container context clearly using 'container-type: inline-size' before attempting to query it. Remember that 'fluid' scaling should be balanced with accessibility; always test your clamp() functions to ensure they don't produce text sizes that are too small to read on extreme screen resolutions.
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-wpank-responsive-design": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: code-execution
Related Skills
mermaid-diagrams
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
api-design-principles
Skill by wpank
auto-context
Automatically read relevant context before major actions. Loads TODO.md, roadmap.md, handoffs, task plans, and other project context files so the AI operates with full situational awareness. Use when starting a task, implementing a feature, refactoring, debugging, planning, or resuming a session.
clear-writing
Write clear, concise prose for humans — documentation, READMEs, API docs, commit messages, error messages, UI text, reports, and explanations. Combines Strunk's rules for clearer prose with technical documentation patterns, structure templates, and review checklists.
track-performance
Track the performance of Uniswap LP positions over time — check which positions need attention, are out of range, or have uncollected fees. Use when the user asks how their positions are doing.