playbooks

home / skills / tlabs-xyz / tbtc-v2-performance / frontend-responsive

frontend-responsive skill

/.claude/skills/frontend-responsive

This skill guides frontend responsive practices to create mobile-first, fluid layouts with adaptive typography and accessible, performant UI across devices.

npx playbooks add skill tlabs-xyz/tbtc-v2-performance --skill frontend-responsive

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

Files (1)
SKILL.md
2.0 KB
---
name: Frontend Responsive
description: Build responsive, mobile-first layouts using fluid containers, standard breakpoints, and adaptive design patterns that work across all screen sizes. Use this skill when implementing responsive layouts, creating mobile-first designs, working with CSS breakpoints or media queries, implementing fluid grids or flexible containers, using responsive utility classes (Tailwind breakpoint modifiers), ensuring touch-friendly tap targets, optimizing layouts for different screen sizes, implementing responsive typography, working with responsive images or assets, testing UI across devices, or creating adaptive navigation patterns. Use when working with responsive CSS, mobile layouts, tablet layouts, desktop layouts, or any UI code that needs to adapt to different viewport sizes.
---

## When to use this skill

- When implementing responsive layouts or grids
- When creating mobile-first designs
- When working with CSS breakpoints or media queries
- When implementing fluid containers or flexible grids
- When using responsive utility classes (Tailwind sm:, md:, lg:, xl: modifiers)
- When ensuring touch-friendly tap targets for mobile
- When optimizing layouts for different screen sizes (mobile, tablet, desktop)
- When implementing responsive typography or font scaling
- When working with responsive images, picture elements, or srcset
- When testing UI across multiple device sizes
- When creating adaptive navigation patterns (hamburger menus, drawer navigation)
- When implementing content priority or hiding elements on smaller screens
- When using relative units (rem, em) for scalability
- When optimizing performance for mobile networks

# Frontend Responsive

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.

## Instructions

For details, refer to the information provided in this file:
[frontend responsive](../../../agent-os/standards/frontend/responsive.md)

Overview

This skill helps you build responsive, mobile-first layouts using fluid containers, standard breakpoints, and adaptive design patterns that work across all screen sizes. It focuses on practical rules and patterns for CSS breakpoints, fluid grids, responsive typography, and touch-friendly interactions to deliver consistent UI across devices.

How this skill works

The skill inspects UI requirements and suggests layout strategies like mobile-first breakpoints, relative units (rem, em, %) and flexible grid systems. It recommends concrete techniques—media queries, srcset/picture for images, Tailwind breakpoint modifiers, and adaptive navigation patterns—plus testing approaches to validate layouts on multiple viewports.

When to use it

  • Implementing responsive layouts or grid systems for new pages
  • Converting desktop-first designs into mobile-first implementations
  • Working with CSS breakpoints, media queries, or Tailwind modifiers
  • Implementing fluid containers, flexible grids, or responsive images
  • Optimizing touch targets and performance for mobile networks
  • Testing UI across multiple device sizes and form factors

Best practices

  • Adopt mobile-first breakpoints: write base styles for small screens and layer up with min-width queries
  • Prefer relative units (rem, em, %) for spacing, typography, and container sizing
  • Use fluid containers and CSS Grid/Flexbox; avoid hard-coded pixel widths where possible
  • Serve responsive images with srcset or picture and use modern formats (WebP/AVIF) when appropriate
  • Ensure tap targets are >=44px, prioritize content, and hide nonessential elements on narrow viewports
  • Test across devices and network conditions; emulate touch, pointer, and varying DPR

Example use cases

  • Create a landing page with a single-column mobile layout that expands into a multi-column grid on tablet and desktop
  • Implement a responsive navigation that becomes a hamburger menu on small screens and a horizontal menu on wide screens
  • Build a product card component with fluid image sizes and responsive typography using rem units
  • Optimize hero images using picture/srcset and lazy loading for mobile networks
  • Apply Tailwind breakpoint modifiers (sm:, md:, lg:) to progressively enhance layout at larger viewports

FAQ

Should I always use mobile-first breakpoints?

Yes. Mobile-first with min-width queries keeps CSS simpler, reduces overrides, and better targets constrained devices.

When should I use rem vs percent for containers?

Use rem for consistent spacing and typographic scale; use percent for fluid container widths that respond to parent size.