Summary
This is a solid foundation for building layouts that work across devices, starting from 320px mobile and scaling up to 1440px+ screens. It covers both Flexbox for simpler layouts and Grid for more complex two-dimensional designs, with practical examples for common patterns like navigation and card grids. The responsive image guidance is thorough, including srcset, picture elements, and CSS background switching. What's particularly useful here is the fluid typography section using clamp() and the inclusion of container queries, which are increasingly relevant for component-based design. It enforces good practices like relative units and viewport meta tags, making it a good reference if you're converting an old fixed-width site or just want a checklist for responsive fundamentals.
Install to Claude Code
npx -y skills add supercent-io/skills-template --skill responsive-design --agent claude-codeInstalls into .claude/skills of the current project.
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Files
SKILL.md
Select a file.
Featured
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
