Frontend Responsive Design Standards
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 Codex with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.
More from sarfraznawaz2005/agent-skills-collection
autohotkey-v2-gui
AutoHotkey v2 GUI development for advanced applications. Use when creating windows, handling events, optimizing performance, or working with controls like ListView, ComboBox, CheckBox. Covers event handling, data submission, positioning, and common GUI patterns.
71neutralinojs
Lightweight cross-platform desktop application framework for JavaScript, HTML, and CSS. Provides native OS operations, window management, filesystem access, and extensibility via extensions. Alternative to Electron with minimal bundle size.
12weather
Get current weather and forecasts (no API key required).
2domain-name-brainstormer
Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.
2opentui
Comprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for any TUI development task including components, layout, keyboard handling, animations, and testing.
2planner
>
2