LogoClawIndex
CasesSkillsAbout
LogoClawIndex

Frontend Responsive - Build responsive layouts for all screen sizes

Build responsive layouts that work across mobile, tablet, and desktop screen sizes.

Tags

Updated: 2026-02-13
frontendresponsivelayoutmobile-firstcsstailwind

Capabilities

Build responsive layoutsUse standard breakpoints consistentlyImplement fluid layouts with percentage widthsUse rem/em units instead of pixels

Typical Inputs

Layout componentsGrid systemsNavigation elements

Typical Outputs

Responsive layoutsAdapted navigationReflowed grid layouts

What this skill does

  • Build responsive layouts
  • Use standard breakpoints consistently
  • Implement fluid layouts with percentage widths
  • Use rem/em units instead of pixels
  • Ensure touch-friendly tap targets
  • Optimize images for mobile
  • Prioritize content visibility on smaller screens

Inputs

  • Layout components
  • Grid systems
  • Navigation elements
  • Screen sizes
  • Breakpoints

Outputs

  • Responsive layouts
  • Adapted navigation
  • Reflowed grid layouts
  • Scaled font sizes
  • Touch-friendly tap targets
  • Optimized images

Requirements

    Source

    • Spec: SKILL.md

    ClawIndex

    OpenClaw Skills & Use Case Index

    ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

    Index

    Skills·
    Cases

    Meta

    About·
    Disclaimer·
    Email·
    GitHub
    © 2026 ClawIndex All Rights Reserved.