Implement mobile-first responsive designs using fluid layouts, relative units, responsive images, and touch-friendly interfaces. Use this skill when creating layouts that adapt across screen sizes, implementing breakpoints, or optimizing for mobile and tablet devices. When working on responsive component layouts, Tailwind responsive utility classes (sm:, md:, lg:, xl:), CSS media queries and breakpoints, fluid typography with clamp() or viewport units, responsive images with srcset and sizes ...
Scanned 2/12/2026
Install via CLI
Skills Directoryopenskills install majiayu000/claude-skill-registry---
name: Frontend Responsive
description: Implement mobile-first responsive designs using fluid layouts, relative units, responsive images, and touch-friendly interfaces. Use this skill when creating layouts that adapt across screen sizes, implementing breakpoints, or optimizing for mobile and tablet devices. When working on responsive component layouts, Tailwind responsive utility classes (sm:, md:, lg:, xl:), CSS media queries and breakpoints, fluid typography with clamp() or viewport units, responsive images with srcset and sizes attributes, mobile navigation menus and hamburger patterns, touch target sizing for mobile devices, responsive grid and flexbox layouts, container queries for component-based responsiveness, or viewport meta tags and mobile optimization.
---
# 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.
## When to use this skill
- When implementing mobile-first layouts that scale up to larger screens
- When using Tailwind responsive utility classes (sm:, md:, lg:, xl:, 2xl:)
- When writing CSS media queries with min-width breakpoints
- When implementing responsive typography using clamp(), rem, or viewport units
- When using Astro's Image component with responsive srcset and sizes
- When creating mobile navigation menus with toggle/hamburger patterns
- When ensuring touch targets meet minimum size requirements (44x44px)
- When building responsive grids using CSS Grid auto-fit or Flexbox wrapping
- When implementing container queries for component-based responsiveness
- When optimizing images and assets for different screen sizes and resolutions
- When testing layouts across mobile, tablet, and desktop breakpoints
## Instructions
For details, refer to the information provided in this file:
[frontend responsive](../../../agent-os/standards/frontend/responsive.md)
No comments yet. Be the first to comment!
Use this skill when developing or maintaining browser extension code in the `browser/` directory, including Chrome/Firefox/Edge compatibility, content scripts, background scripts, or i18n updates.
SEO optimization with keyword analysis, readability assessment, technical validation, content quality. Use for search rankings, blog posts, content audits, or encountering keyword density, readability scores, meta tags, schema markup errors.
Python backend development expertise for FastAPI, security patterns, database operations, Upstash integrations, and code quality. Use when: (1) Building REST APIs with FastAPI, (2) Implementing JWT/OAuth2 authentication, (3) Setting up SQLAlchemy/async databases, (4) Integrating Redis/Upstash caching, (5) Refactoring AI-generated Python code (deslopification), (6) Designing API patterns, or (7) Optimizing backend performance.
Drive the full internationalization journey for a project — detect the stack, recommend a library, set up the chosen library, wrap existing strings, and optionally connect a translation platform. Use when the user asks to add or configure i18n, internationalization, localization, multi-language support, or translations — including when they explicitly mention LinguiJS, Lingui, next-intl, "wrap strings", "find hardcoded text", "make my app translatable", or "set up translations". Triggers on g...
PTES-aligned adversarial security audit for backend, frontend, and mobile applications. Produces a CVSS-scored Hacker Report with verified PoCs and phased remediation.
