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 can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
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
Conduct comprehensive design operations audits using repeatable protocols that quantify inefficiencies across workflows, handoffs, and governance. You'll identify systemic bottlenecks, map dependencies and ownership gaps, and produce actionable recommendations with business cases for process improvements. The framework helps you move from reactive problem-solving to proactive optimization by accounting for team capacity, tool constraints, and organizational context.
by calesthio
You can generate customized interview frameworks that assess design ops candidates against specific competencies aligned with your team's maturity and challenges. The skill produces behavioral interview questions, technical scenario assessments, and scoring rubrics that help interview panels evaluate candidates objectively across process optimization, metrics thinking, tool knowledge, and organizational influence—moving beyond portfolio review to predict job-ready performance.
by calesthio
You can translate research objectives into executable test protocols that recruit the right participants, ask the right questions, and measure outcomes clearly. This skill helps you design moderated or unmoderated tests that validate interaction patterns, test information architecture, evaluate new features, or compare design alternatives—with structured analysis frameworks built in.
by calesthio
You can create self-contained HTML presentations with distinctive design aesthetics, smooth animations, and custom typography that feel intentional rather than generic. Convert PowerPoint files directly into interactive web slides, or build custom decks from scratch with precise control over layout, color schemes, and motion. Every slide fits perfectly in the viewport—no scrolling, no dependencies, no setup required.
Conduct comprehensive culture assessments that go beyond pulse surveys to uncover hidden friction points impacting designer satisfaction and retention. You'll quantify culture health across key dimensions like psychological safety, autonomy, growth opportunity, and collaboration effectiveness, then generate prioritized improvement roadmaps with specific interventions backed by team feedback. This framework helps you build evidence-based business cases for culture investments and track improvements across quarterly cycles.
by calesthio