Agent skill
Frontend Responsive
Implement responsive designs using mobile-first development, fluid layouts, standard breakpoints, and relative units to ensure optimal viewing across all device sizes. Use this skill when creating layouts, implementing breakpoints, styling for different screen sizes, or ensuring mobile compatibility. When working with responsive CSS, media queries, viewport configurations, or mobile-optimized components. When testing across device sizes, implementing touch-friendly interfaces, or optimizing for mobile performance. When working in any frontend file that affects layout, spacing, typography, or visual presentation across different screen sizes.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/frontend-responsive
SKILL.md
Frontend Responsive
When to use this skill
- When implementing layouts that need to work across multiple screen sizes
- When writing media queries or using responsive breakpoints
- When applying responsive utility classes (e.g., Tailwind's
sm:,md:,lg:) - When creating mobile-first designs and progressively enhancing for larger screens
- When using fluid layouts with percentage-based widths or flexbox/grid
- When choosing between fixed pixels and relative units (rem, em)
- When ensuring touch-friendly tap targets (minimum 44x44px)
- When optimizing images and assets for mobile devices
- When testing UI changes across mobile, tablet, and desktop screen sizes
- When implementing responsive typography that remains readable at all sizes
- When prioritizing content for smaller screens
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?