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.
32
0%
Does it follow best practices?
Impact
90%
1.03xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./planned-skills/generated/05-frontend-dev/responsive-breakpoint-analyzer/SKILL.mdQuality
Discovery
0%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This description is essentially a title and category label with no substantive content. It fails to describe what the skill does, when it should be used, or provide natural trigger terms that users would employ. It would be nearly impossible for Claude to correctly select this skill from a pool of available skills based on this description alone.
Suggestions
Add concrete actions the skill performs, e.g., 'Analyzes CSS breakpoints, identifies responsive design issues, recommends optimal media query ranges, and audits layouts across screen sizes.'
Add an explicit 'Use when...' clause with natural trigger terms, e.g., 'Use when the user asks about media queries, responsive layouts, breakpoints, mobile-first design, screen size testing, or CSS @media rules.'
Remove the duplicate trigger term and expand with varied natural language terms users would actually say, such as 'responsive design', 'mobile layout', 'viewport', 'screen widths', 'media queries'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description names a tool ('Responsive Breakpoint Analyzer') but does not describe any concrete actions it performs. There are no verbs like 'analyzes', 'identifies', 'recommends', or 'generates' — just a label and category. | 1 / 3 |
Completeness | The description fails to answer both 'what does this do' and 'when should Claude use it'. There is no explanation of capabilities and no explicit 'Use when...' clause or equivalent trigger guidance. | 1 / 3 |
Trigger Term Quality | The only trigger terms listed are 'responsive breakpoint analyzer' repeated twice. Users are unlikely to say this exact phrase; they would more naturally say things like 'media queries', 'breakpoints', 'responsive design', 'mobile layout', or 'screen sizes'. | 1 / 3 |
Distinctiveness Conflict Risk | While 'Responsive Breakpoint Analyzer' sounds specific, the lack of any described capabilities or concrete triggers means it could easily overlap with any frontend/CSS/responsive design skill. The description provides no clear niche. | 1 / 3 |
Total | 4 / 12 Passed |
Implementation
0%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill is an empty shell with no substantive content. It repeatedly references 'responsive breakpoint analyzer' without ever defining what it is, providing any breakpoint values, CSS/media query examples, framework-specific code, or any actionable guidance whatsoever. It reads as an auto-generated template that was never filled in with actual skill content.
Suggestions
Add concrete, executable CSS/JS code examples showing common responsive breakpoints (e.g., mobile-first media queries with specific pixel values like 480px, 768px, 1024px, 1280px).
Define a clear workflow: 1) Analyze existing breakpoints in a codebase, 2) Identify gaps or redundancies, 3) Recommend consolidated breakpoint strategy with validation steps.
Remove all meta-description sections (When to Use, Example Triggers, Capabilities) and replace with actual technical content—breakpoint analysis techniques, common patterns for React/Vue/CSS, and concrete examples.
Include framework-specific examples (e.g., Tailwind breakpoint config, CSS custom properties for breakpoints, useMediaQuery hooks) with copy-paste ready code.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is entirely filler and meta-description. It explains what the skill does in abstract terms without providing any actual technical content. Every section restates the same vague information about 'responsive breakpoint analyzer' without defining what that means or providing any actionable guidance. | 1 / 3 |
Actionability | There is zero concrete guidance—no code, no commands, no specific breakpoint values, no CSS examples, no framework-specific patterns. The content only describes what the skill could do rather than actually doing it. | 1 / 3 |
Workflow Clarity | No workflow, steps, or process is defined. The 'step-by-step guidance' mentioned in Capabilities is never actually provided. There are no validation checkpoints or sequences of any kind. | 1 / 3 |
Progressive Disclosure | The content is a flat, repetitive document with no meaningful structure. Sections like 'When to Use', 'Capabilities', and 'Example Triggers' all restate the same vague information. There are no references to detailed materials or any content worth navigating to. | 1 / 3 |
Total | 4 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
allowed_tools_field | 'allowed-tools' contains unusual tool name(s) | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 9 / 11 Passed | |
- Commit
3076d78
- Reviewed
Table of Contents
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.