Does it work on existing codebases?

Absolutely. It can use its Grep and Read tools to analyze your existing styles and suggest improvements or fix inconsistencies in your breakpoints.

Which frameworks does this skill support?

The skill is framework-agnostic but provides specialized support for CSS, SASS, Tailwind CSS, React, and Vue.

Can it help with mobile-first development?

Yes, it follows industry best practices by prioritizing mobile-first patterns to ensure optimal performance and accessibility on smaller screens.

What is the Responsive Breakpoint Analyzer?

It is an AI-powered skill for Claude Code that automates the identification, implementation, and auditing of responsive design breakpoints in web projects.

How do I activate the analyzer?

The skill activates automatically when you mention responsive design, media queries, or layout optimization in your Claude Code session.

Responsive Breakpoint Analyzer

Name: Responsive Breakpoint Analyzer
Author: jeremylongshore

byjeremylongshore

•

983

Design Tools

Analyzes and implements optimized CSS media query breakpoints for responsive and mobile-first web development.

About

The Responsive Breakpoint Analyzer is a specialized skill for Claude Code designed to streamline the creation of fluid, production-grade interfaces. It helps developers identify the best screen dimensions for layout transitions, generates production-ready CSS or CSS-in-JS configurations, and ensures consistency across modern frameworks like React and Vue. By auditing existing styles or suggesting industry-standard patterns, this skill minimizes visual bugs and improves the user experience across all device types and viewport sizes.

Key Features

983 GitHub stars
Code audits to detect and fix inconsistent breakpoint usage in existing projects
Integration with modern frameworks including React, Vue, and Tailwind CSS
Automated identification and generation of CSS media query breakpoints
Support for both mobile-first and desktop-first responsive design patterns
Validation of layout transitions against accessibility and performance standards

Use Cases

Troubleshooting layout shifts and visual bugs occurring at specific screen widths
Standardizing responsive layouts across large, multi-component frontend codebases
Refactoring legacy CSS to follow modern responsive design principles

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jeremylongshore/claude-code-plugins-plus-skills responsive-breakpoint-analyzer

For use in Claude.ai and ChatGPT

Download Skill

GitHub