Responsive Layout Debugger
Debug responsive layout issues across all breakpoints and device sizes
What You Can Do
You can diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
Features
pinpoints which screen sizes expose layout problems
identifies content overflow, z-index stacking, and viewport boundary violations
diagnoses misaligned flex containers and CSS grid items
detects small touch targets, text readability issues, and responsive spacing problems
provides specific CSS modifications that solve the problem at each breakpoint
suggests reusable solutions to prevent layout failures across projects
creates validation approaches for desktop, tablet, and mobile layouts
identifies Cumulative Layout Shift issues and provides stability solutions
Example Output
Input: "My navigation menu works on desktop but overlaps the logo on tablet screens."
Output:
/* Tablet breakpoint (768px) */
@media (max-width: 768px) {
.navbar {
flex-direction: column; /* Stack items vertically */
}
.nav-menu {
position: absolute;
top: 60px;
width: 100%;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
}
Root cause identified: Fixed positioning conflict at tablet width. Suggested pattern: Mobile-first flex layout with hamburger menu toggle.
Input: "Images and text are cut off on mobile devices even though I set max-width: 100%."
Output:
Problem: Padding on parent container not accounted for in width calculation. Solutions: Use box-sizing: border-box globally, or adjust image wrapper with width: calc(100% - padding). Includes mobile-first padding strategy for consistent spacing.
What's Included
- SKILL.md instruction file with complete responsive debugging methodology:
- Breakpoint testing checklist: systematic validation across mobile, tablet, and desktop sizes
- CSS reset and responsive baseline: boilerplate for preventing common layout issues
- Responsive debugging framework: step-by-step diagnostic approach for any layout problem
- Mobile usability audit template: touch targets, text size, spacing, and readability standards
Who It's For
- UI/UX designers debugging layout problems in design-to-code handoffs
- Frontend developers fixing responsive design issues in production
- QA engineers validating layouts across multiple device sizes
- Web developers optimizing layouts for mobile-first projects
- Design systems teams establishing breakpoint standards and responsive patterns
Best For
- Diagnosing why layouts break at specific screen sizes
- Fixing overflow and text wrapping issues on mobile
- Aligning flex and grid items across breakpoints
- Improving mobile usability and touch target sizing
- Preventing layout shifts and reducing Cumulative Layout Shift
- Testing and validating responsive designs across devices
- Creating reusable responsive design patterns for teams
You might also like
You'll conduct structured culture audits that go beyond surface-level observations to identify root causes of dysfunction in design teams. Using organizational psychology research, you can analyze team feedback patterns, map collaboration barriers across disciplines, and design targeted interventions that address psychological safety gaps, siloed workflows, and retention risks. Claude helps you transform culture diagnostics into measurable improvement plans tied to specific team performance outcomes.
by calesthio
Analyze raw usability testing data—transcripts, session notes, task completion rates, and participant feedback—to surface recurring patterns and user behaviors. Claude identifies the highest-impact issues, extracts testable insights about user mental models, and generates prioritized recommendations ranked by severity, frequency, and business impact. This cuts manual synthesis time from hours to minutes while maintaining analytical rigor.
by calesthio
You can conduct comprehensive microcopy audits across your entire product, categorizing copy by type and user journey stage. Claude helps you identify clarity gaps, consistency issues, and conversion blockers, then generates tested alternatives with clear rationale. You'll produce copy guidelines, A/B test frameworks, and localization-ready copy that drives measurable improvements in user completion rates and confidence.
by calesthio
This skill helps you craft error messages and notifications that prioritize clarity and actionability over cleverness. You'll generate empathetic microcopy for error states, in-app notifications, empty states, and edge cases—then test variations against different user personas to minimize cognitive load and maximize task completion rates. It bridges UX research insights with production-ready copy that reduces support tickets and builds user trust.
by calesthio
You can systematically design reusable responsive grid systems, establish spacing scales and breakpoint strategies, and document component layout behaviors for seamless developer handoff. This skill generates technical layout specifications that reduce design-to-development friction and ensure accessibility compliance from the design phase, enabling teams to build consistent, scalable web interfaces across all devices.
by calesthio
You can systematically evaluate your design system's health using structured frameworks that assess component consistency, design token usage, documentation completeness, and developer adoption. The skill generates prioritized gap analysis reports that quantify issues—like duplicate components, token sprawl, or implementation friction—and translates findings into executive-ready roadmaps with business cases for remediation. You'll move beyond subjective design assessments to data-backed improvement strategies.
by calesthio
Diagnose and fix performance bottlenecks across your entire stack. Measure Core Web Vitals against 2026 standards, analyze bundle size bloat, identify unused dependencies, and optimize rendering strategies and caching. You'll receive specific code changes, configuration tweaks, and architecture recommendations tailored to your framework.
You can rapidly prototype and build accessible user interfaces by combining shadcn/ui's pre-built Radix UI components with Tailwind CSS utility-first styling. This skill enables you to implement complex UI patterns, responsive layouts, dark mode themes, and design systems while maintaining full type safety and accessibility standards. Generate visual designs, posters, and branded materials alongside functional interface components.
by trungtv