Skip to main content

frontend-responsive

Build responsive layouts that adapt seamlessly across devices using mobile-first design, fluid layouts, and standard breakpoints. Use this skill when implementing responsive designs, creating mobile-first layouts, defining breakpoint styles, working with responsive components and pages, using relative units (rem, em) instead of fixed pixels, implementing media queries, ensuring touch-friendly tap targets, optimizing images and assets for different screen sizes, maintaining readable typography across breakpoints, prioritizing content for smaller screens, testing UI across mobile, tablet, and desktop devices, or building fluid container layouts. Apply this skill when building responsive UI components, optimizing layouts for different screen sizes, or reviewing mobile and tablet user experiences.

跳到安装

来源信息

仓库
pdovhomilja/dovhomilja-cz
最近来源活动
2025年11月24日 07:59
检测到的 SKILL.md 语言
英语
星标
0
分支
0

安装方式

默认使用会先检查来源的 Prompt;你也可以切换为直接命令,或下载本地副本。

检查来源文件

决定是否安装前,请先阅读 SKILL.md,以及 SkillsMP 当前展示的配套文件。

正在显示 SKILL.md

SKILL.md
来源说明 · 只读预览
name
Frontend Responsive
description
Build responsive layouts that adapt seamlessly across devices using mobile-first design, fluid layouts, and standard breakpoints. Use this skill when implementing responsive designs, creating mobile-first layouts, defining breakpoint styles, working with responsive components and pages, using relative units (rem, em) instead of fixed pixels, implementing media queries, ensuring touch-friendly tap targets, optimizing images and assets for different screen sizes, maintaining readable typography across breakpoints, prioritizing content for smaller screens, testing UI across mobile, tablet, and desktop devices, or building fluid container layouts. Apply this skill when building responsive UI components, optimizing layouts for different screen sizes, or reviewing mobile and tablet user experiences.
# Frontend Responsive ## When to use this skill - When implementing responsive layouts in components or pages - When creating mobile-first designs that progressively enhance for larger screens - When defining styles for different breakpoints (mobile, tablet, desktop) - When using relative units (rem, em) instead of fixed pixel values - When implementing media queries for responsive behavior - When ensuring tap targets are appropriately sized (minimum 44x44px) for mobile - When optimizing images and assets for mobile network conditions - When maintaining readable font sizes across all screen sizes - When prioritizing content layout for smaller screens - When testing UI changes across multiple device sizes - When building fluid container layouts with percentage-based widths - When implementing responsive navigation patterns (hamburger menus, collapsible sections) - When reviewing user experience on mobile, tablet, and desktop devices 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](../../../agent-os/standards/frontend/responsive.md)
在 GitHub 查看