Responsive Breakpoint Analyzer
This tool quickly identifies optimal CSS breakpoints for your design across various screen sizes, ensuring a seamless responsive experience.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add responsive-breakpoint-analyzer npx -- -y @trustedskills/responsive-breakpoint-analyzer
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"responsive-breakpoint-analyzer": {
"command": "npx",
"args": [
"-y",
"@trustedskills/responsive-breakpoint-analyzer"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill, responsive-breakpoint-analyzer, helps you understand how a website or design will look across different screen sizes. It analyzes CSS media queries to determine breakpoint values and provides insights into the intended responsive behavior of web pages. This allows for quicker debugging and improved understanding of design intent.
When to use it
- Debugging Responsive Issues: Identify why a layout isn't behaving as expected on certain devices by revealing defined breakpoints.
- Understanding Design Intent: Quickly grasp the designer’s vision for how a website adapts to various screen sizes without manually inspecting CSS files.
- Code Reviews: Validate that media queries are correctly implemented and aligned with design specifications.
- Learning Responsive Design: Gain insight into common breakpoint strategies used by developers.
Key capabilities
- Analyzes CSS media queries
- Identifies breakpoint values
- Provides insights into responsive behavior
Example prompts
- "What are the breakpoints defined in this website's CSS?"
- "Show me all the media query rules for a mobile view."
- "List the screen sizes targeted by this design’s media queries."
Tips & gotchas
The skill requires access to the relevant CSS file or URL. The accuracy of the analysis depends on the quality and completeness of the provided CSS code.
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.