responsive-breakpoint-analyzer

Responsive Breakpoint Analyzer - Auto-activating skill for Frontend Development. Triggers on: responsive breakpoint analyzer, responsive breakpoint analyzer Part of the Frontend Development skill category.

1.03x

Quality

Does it follow best practices?

Impact

90%

1.03x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./planned-skills/generated/05-frontend-dev/responsive-breakpoint-analyzer/SKILL.md

Evaluation results

75%

Responsive Navigation Bar

Modern CSS responsive breakpoints

Criteria

Without context

With context

CSS custom properties for breakpoints

53%

Mobile-first media queries

100%

Standard breakpoint values

70%

Single source of truth

41%

58%

Three distinct layout states

100%

No redundant breakpoints

37%

62%

Accessible touch targets

50%

30%

Viewport meta tag

100%

Production-ready structure

100%

Breakpoints documented

100%

Without context: $0.4331 · 2m 21s · 21 turns · 21 in / 7,684 out tokens

With context: $0.5098 · 2m 17s · 26 turns · 318 in / 7,723 out tokens

98%

Responsive Product Listing Page in React

React breakpoint-aware component patterns

Criteria

Without context

With context

Custom hook extracted

100%

No raw window.innerWidth in render

100%

No unmanaged resize listener

100%

matchMedia or ResizeObserver used

100%

Accessible drawer ARIA

100%

Touch-friendly controls

100%

Responsive column counts

100%

Hook is reusable

75%

Production-ready component structure

100%

Breakpoints documented

100%

Without context: $1.0448 · 4m 8s · 39 turns · 40 in / 16,588 out tokens

With context: $0.5149 · 2m 21s · 27 turns · 27 in / 8,568 out tokens

97%

CSS Responsive Breakpoint Audit

Breakpoint audit and standards validation

Criteria

Without context

With context

Complete breakpoint inventory

100%

Duplicate breakpoint identified

100%

Max-width vs min-width conflict noted

100%

62%

Standard ranges assessment

100%

Touch target accessibility flag

100%

Font size accessibility concern

100%

Structured report sections

100%

Actionable recommendations

100%

JSON summary produced

100%

Overlapping range conflict noted

25%

100%

Without context: $0.3938 · 2m 36s · 13 turns · 55 in / 9,439 out tokens

With context: $0.5806 · 2m 58s · 25 turns · 27 in / 9,730 out tokens

Repository: jeremylongshore/claude-code-plugins-plus-skills
Commit: 994edc4

Evaluated: 17 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Responsive Navigation Bar Responsive Product Listing Page in React CSS Responsive Breakpoint Audit

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.