🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Responsive Design
πŸ¦€ ClawHub

Responsive Design

by @wpank

Implement responsive layouts using container queries, fluid typography, CSS Grid, mobile-first breakpoints, responsive images, and adaptive navigation.

Versionv1.0.0
Installs21
#legal
πŸ“‹ Tips & Best Practices

1. Mobile-First: Write base styles for mobile, enhance for larger screens 2. Content Breakpoints: Set breakpoints where content breaks, not device sizes 3. Fluid Over Fixed: Prefer clamp() and relative units over fixed px 4. Container Queries: Use for component-level responsiveness 5. Touch Targets: Minimum 44Γ—44px tap targets on mobile 6. Test Real Devices: Simulators don't catch all issues 7. Logical Properties: Use inline/block for internationalization

View on ClawHub
TERMINAL
clawhub install responsive-design

πŸ§ͺ Use this skill with your agent

Most visitors already have an agent. Pick your environment, install or copy the workflow, then run the smoke-test prompt above.

Manus
Task-oriented agent. Great for testing AI skills end-to-end.
Try Manus β†’
OpenClaw
Local-first agent. Install skills via ClawHub CLI.
Set up OpenClaw β†’
Claude Code
Anthropic's coding agent. Paste the prompt or SKILL.md into your session.
Claude Code docs β†’
Cursor
AI-powered IDE. Use the smoke-test prompt in Cursor Agent.
Open Cursor β†’
Continue.dev
Open-source AI code assistant. Add SKILL.md as a custom tool.
Continue docs β†’
Windsurf
Agentic IDE by Codeium. Paste the prompt into Cascade.
Try Windsurf β†’
Cline
VS Code extension for autonomous coding with MCP tools.
Cline on GitHub β†’
Copilot Workspace
GitHub's AI dev environment. Suitable for code-generation skills.
Copilot Workspace β†’

πŸ” Can't find the right skill?

Search 60,000+ AI agent skills β€” free, no login needed.

Search Skills β†’