Responsive Design
Automatically adapts website layouts and styles to seamlessly fit various screen sizes and devices.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add wshobson-responsive-design npx -- -y @trustedskills/wshobson-responsive-design
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"wshobson-responsive-design": {
"command": "npx",
"args": [
"-y",
"@trustedskills/wshobson-responsive-design"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill enables AI agents to design and implement responsive web layouts that adapt seamlessly across different screen sizes and devices. It includes techniques like flexible grids, media queries, and fluid images to ensure optimal user experience on desktops, tablets, and mobile phones.
When to use it
- Creating a website that needs to look good on all device types
- Developing a mobile-first design approach for new projects
- Ensuring existing layouts are compatible with modern responsive standards
Key capabilities
- Media query implementation for different screen sizes
- Fluid grid systems using CSS frameworks or custom code
- Responsive image handling with
srcsetandsizesattributes
Example prompts
- "Design a responsive layout for a blog that adjusts to mobile, tablet, and desktop views."
- "Implement media queries to change the navigation menu on smaller screens."
- "Optimize this image for responsive design using srcset and sizes attributes."
Tips & gotchas
- Always test your designs on multiple devices or use browser developer tools to simulate different screen sizes.
- Be mindful of CSS specificity and ensure that media queries do not conflict with other styles in the project.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.