playbooks

home / skills / jeremylongshore / claude-code-plugins-plus-skills / responsive-breakpoint-analyzer

responsive-breakpoint-analyzer skill

/skills/05-frontend-dev/responsive-breakpoint-analyzer

This skill helps you analyze and automate responsive breakpoint analysis with step-by-step guidance, producing production-ready configurations and validation

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

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.3 KB
---
name: "responsive-breakpoint-analyzer"
description: |
  Analyze responsive breakpoint analyzer operations. Auto-activating skill for Frontend Development.
  Triggers on: responsive breakpoint analyzer, responsive breakpoint analyzer
  Part of the Frontend Development skill category. Use when analyzing or auditing responsive breakpoint analyzer. Trigger with phrases like "responsive breakpoint analyzer", "responsive analyzer", "analyze responsive breakpoint r".
allowed-tools: "Read, Write, Edit, Bash(cmd:*), Grep"
version: 1.0.0
license: MIT
author: "Jeremy Longshore <[email protected]>"
---

# Responsive Breakpoint Analyzer

## Overview

This skill provides automated assistance for responsive breakpoint analyzer tasks within the Frontend Development domain.

## When to Use

This skill activates automatically when you:
- Mention "responsive breakpoint analyzer" in your request
- Ask about responsive breakpoint analyzer patterns or best practices
- Need help with frontend skills covering react, vue, css, accessibility, performance optimization, and modern web development patterns.

## Instructions

1. Provides step-by-step guidance for responsive breakpoint analyzer
2. Follows industry best practices and patterns
3. Generates production-ready code and configurations
4. Validates outputs against common standards

## Examples

**Example: Basic Usage**
Request: "Help me with responsive breakpoint analyzer"
Result: Provides step-by-step guidance and generates appropriate configurations


## Prerequisites

- Relevant development environment configured
- Access to necessary tools and services
- Basic understanding of frontend development concepts


## Output

- Generated configurations and code
- Best practice recommendations
- Validation results


## Error Handling

| Error | Cause | Solution |
|-------|-------|----------|
| Configuration invalid | Missing required fields | Check documentation for required parameters |
| Tool not found | Dependency not installed | Install required tools per prerequisites |
| Permission denied | Insufficient access | Verify credentials and permissions |


## Resources

- Official documentation for related tools
- Best practices guides
- Community examples and tutorials

## Related Skills

Part of the **Frontend Development** skill category.
Tags: react, vue, css, accessibility, web

Overview

This skill automates analysis and guidance for responsive breakpoint strategies in frontend projects. It helps identify, validate, and generate breakpoint configurations and implementation patterns for React, Vue, and vanilla CSS approaches. The goal is production-ready recommendations that balance accessibility, performance, and maintainability.

How this skill works

The analyzer inspects project assets (CSS, SASS/SCSS, styled-components, Tailwind configs, and component code) to detect existing breakpoints and usage patterns. It flags inconsistencies, suggests consolidated breakpoints, proposes media-query refactors, and can generate configuration snippets and code examples tailored to the detected stack. Outputs include validation notes against best practices and actionable remediation steps.

When to use it

  • Auditing an existing codebase for responsive inconsistencies
  • Designing a new breakpoint system for a component library or application
  • Refactoring scattered media queries into a central configuration
  • Improving accessibility and performance across viewport ranges
  • Generating breakpoint configs for frameworks like Tailwind, styled-components, or CSS variables

Best practices

  • Define breakpoints by content needs, not device names; prefer content-driven ranges
  • Centralize breakpoint tokens (CSS variables, theme config) to avoid duplication
  • Use mobile-first media queries for progressive enhancement and better performance
  • Limit breakpoint count to what the layout truly needs; avoid overly granular steps
  • Test across real devices and emulators, and include accessibility checks for font scaling

Example use cases

  • Scan a legacy CSS codebase to consolidate dozens of ad-hoc media queries into a small, consistent set of breakpoints
  • Generate a Tailwind config snippet from detected design tokens and suggested breakpoint ranges
  • Recommend refactors from max-width queries to min-width mobile-first patterns in a React component library
  • Produce a checklist and remediation plan when accessibility or layout shifts are detected across breakpoints
  • Validate that responsive images, font-sizes, and grid behavior match breakpoint expectations

FAQ

What input does the analyzer need?

Provide your project files or a representative sample of CSS/JSX/TSX and configuration files so the analyzer can detect existing breakpoints and patterns.

Can it modify my code automatically?

It can generate suggested patches and configuration snippets, but automatic modifications should be reviewed and applied by developers to ensure context-aware changes.