responsive_design
Frontend Responsive Design Standards
Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets.
When to use this skill
- When creating or modifying layouts that need to work on mobile, tablet, and desktop
- When implementing mobile-first design patterns starting with mobile layout
- When writing media queries or breakpoint-specific styles
- When using flexible units (rem, em, %) instead of fixed pixels for scalability
- When implementing fluid layouts with percentage-based widths or flexbox/grid
- When ensuring touch targets meet minimum size requirements (44x44px) for mobile
- When optimizing images and assets for different screen sizes and mobile networks
- When testing UI across multiple device sizes and breakpoints
- When maintaining readable typography across all screen sizes
- When prioritizing content display on smaller screens through layout decisions
- When using responsive design utilities in CSS frameworks (Tailwind, Bootstrap responsive classes)
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.
More from vuralserhat86/antigravity-agentic-skills
skill_creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
38huggingface_transformers
Hugging Face Transformers best practices including model loading, tokenization, fine-tuning workflows, and inference optimization. Use when working with transformer models, fine-tuning LLMs, implementing NLP tasks, or optimizing transformer inference.
22cache_patterns
Instruction set for enabling and operating the Spring Cache abstraction in Spring Boot when implementing application-level caching for performance-sensitive workloads.
16zustand_state
Production-tested setup for Zustand state management in React. Includes patterns for persistence, devtools, and TypeScript patterns. Prevents hydration mismatches and render loops.
14vitest_runner
Modern JavaScript/TypeScript testing with Vitest including mocking and coverage.
13platform_engineering
Design and implement Internal Developer Platforms (IDPs) with self-service capabilities, golden paths, and developer experience optimization. Covers platform strategy, IDP architecture (Backstage, Port), infrastructure orchestration (Crossplane), GitOps (Argo CD), and adoption patterns. Use when building developer platforms, improving DevEx, or establishing platform teams.
13