Individual skill

fec-responsive-layout

Use when designing, implementing, or reviewing responsive frontend layouts, mobile-first breakpoints, container queries, fluid grids, data-dense tables, touch targets, safe areas, orientation changes, viewport overflow, or cross-device UI behavior; Chinese triggers include responsive layouts, mobile-side adaptation, breakpoints, container queries, horizontal and vertical screens, touch targets.

skills/fec-responsive-layout/SKILL.md

Read pinned source

Source commit 5d44782572025045a552ff8945b354726eb5d183

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: No
Observed behavior: Not checked yet
Last checked: Nov 7, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 23
Repository last updated: Nov 8, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

claude-code Repository topic
claude-code-plugin Repository topic
claude-code-skills Repository topic
e2e-tests Repository topic
fronend-development Repository topic
frontend-plugin Repository topic
frontend-project Repository topic
react Repository topic
typescript Repository topic
vue3 Repository topic
design Derived category
data Derived category
devops Derived category
design-interface Derived category
devops-containers Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 2,932 bytes
references/responsive-layout-patterns.mddoc · 3,290 bytes

Read excerpt


# Responsive layout

Suitable for front-end tasks that require pages, tool interfaces, tables, dashboards or components to work stably on multiple devices. Load [references/responsive-layout-patterns.md](references/responsive-layout-patterns.md) when layout patterns and checklists are required.

## Purpose

Design responsive layouts in a content-first, mobile-first, and container-aware manner to avoid relying solely on fixed breakpoints to fix overflow.

## Procedure

1. Clarify the priority of information: On small screens, core tasks, key operations and feedback are retained first; secondary information is folded, postponed or moved to the detail layer.
2. Choose a layout strategy: use mobile-first breakpoints for simple pages; give priority to container query for nested components, card grids and sidebars.
3. Design flow size: use `minmax()`, `clamp()`, `aspect-ratio`, `max-width`, `min-width: 0` and stable grid track to control scaling.
4. Handle data-intensive interfaces: tables, lists, boards, and editors need to explicitly support horizontal scrolling, column prioritization, frozen columns, or mobile summary views.