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

•

デザインツール

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

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.

主な機能

01983 GitHub stars

02Code audits to detect and fix inconsistent breakpoint usage in existing projects

03Integration with modern frameworks including React, Vue, and Tailwind CSS

04Automated identification and generation of CSS media query breakpoints

05Support for both mobile-first and desktop-first responsive design patterns

06Validation of layout transitions against accessibility and performance standards

ユースケース

01Troubleshooting layout shifts and visual bugs occurring at specific screen widths

02Standardizing responsive layouts across large, multi-component frontend codebases

03Refactoring 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

主な機能

01983 GitHub stars

02Code audits to detect and fix inconsistent breakpoint usage in existing projects

03Integration with modern frameworks including React, Vue, and Tailwind CSS

04Automated identification and generation of CSS media query breakpoints

05Support for both mobile-first and desktop-first responsive design patterns

06Validation of layout transitions against accessibility and performance standards

ユースケース

01Troubleshooting layout shifts and visual bugs occurring at specific screen widths

02Standardizing responsive layouts across large, multi-component frontend codebases

03Refactoring 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