Summary
A solid foundation for building responsive sites the right way, starting at 320px and scaling up through clear breakpoints. You get sensible defaults like 48px touch targets, progressive enhancement patterns, and performance budgets that actually matter (under 3s FCP on 3G). The CSS examples show proper min-width media queries instead of the old max-width approach, and it pushes you toward semantic HTML that works before JavaScript loads. Nothing groundbreaking here, but it's the kind of practical reference that keeps you from making rookie mistakes like forgetting adequate spacing or shipping bloated bundles to mobile users.
Install to Claude Code
npx -y skills add secondsky/claude-skills --skill mobile-first-design --agent claude-codeInstalls into .claude/skills of the current project.
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Files
SKILL.md
Select a file.
Featured
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
