fec-responsive-layout

Design responsive frontend layouts using container queries and fluid grids.

21|3|Updated Mar 17, 2026

Search Tags:#accessibility #dashboards #mobile-first #breakpoints #grid #container-queries #responsive-layout

Ready to run

npx skills add https://github.com/bovinphang/frontend-craft --skill fec-responsive-layout

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fec-responsive-layout
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-responsive-layout
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-responsive-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend projects frequently suffer from unstable layouts when moving between devices, making components misalign and overflow. This skill provides a practical framework for designing responsive, mobile-first interfaces using container queries, fluid grids, and thoughtful breakpoints to maintain consistency across viewports.

Core Features & Use Cases

Mobile-first breakpoints and grid/flex strategies that adapt to different screen sizes.
Container queries and fluid sizing techniques to create reusable, resilient components.
Use Case: redesign a dashboard to maintain consistent card sizing and spacing from mobile to desktop while avoiding horizontal scrolling.

Quick Start

Audit an existing UI for responsive issues and implement container queries and fluid grids to stabilize layouts across devices.

Frequently Asked Questions about fec-responsive-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix dashboard layout overflow and misalignment across mobile and desktop viewports?▼

To fix dashboard layout overflow, apply a mobile-first framework using container queries and fluid grids. This approach stabilizes card sizing and spacing across mobile, tablet, and desktop viewports, preventing components from misaligning and avoiding horizontal scrolling.

What is the best way to use container queries for responsive dashboard components?▼

The best way to use container queries for responsive components is combining them with fluid sizing techniques like clamp and container-type. This creates reusable, resilient dashboard interfaces that adapt their layout based on the container size rather than the viewport.

How do I audit an existing UI for responsive layout issues?▼

To audit an existing UI for responsive layout issues, review your components across different screen sizes to identify misalignment and overflow. Implement container queries and fluid grids using minmax and clamp to stabilize the layouts across devices.

Does this responsive layout approach support data grids and card-based interfaces?▼

Yes, this responsive layout approach explicitly supports designing and reviewing data grids and card-based interfaces. It applies modern CSS techniques like minmax and fluid sizing to maintain consistent layout structure across mobile, tablet, and desktop viewports.

Why do my frontend components misalign when moving between mobile and tablet devices?▼

Frontend components misalign between devices when layouts lack fluid sizing and proper breakpoints. Using container queries and mobile-first grid strategies ensures components adapt smoothly to different screen sizes without breaking the layout structure.