agentsclimarketplace
Sign in

Fec responsive layout

Skill bovinphang/frontend-craft/skills/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.From its SKILL.md

Install
npx -y skills add bovinphang/frontend-craft --skill fec-responsive-layout

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 21 stars21 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.9 KB, 491 tokens by cl100k_base, as published. Nobody here has run it

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 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.
  5. Ensure touch and keyboard: touch targets, focus paths, hover substitutions, virtual keyboards, safe areas, and horizontal and vertical screen switching should all be reviewed.
  6. Correlate performance and resources: The mobile terminal reduces first-screen large images, heavy charts, synchronized animations and unnecessary column rendering.
  7. Verify between breakpoints: check 375px, 768px, 1024px, 1440px, and whether the intermediate value of the breakpoint overflows, blocks, or jumps.

Constraints

  • Don’t treat the desktop version downsized as a mobile design.
  • Don’t make key features rely solely on hover or widescreen sidebars.
  • Do not use fixed height to cover content changes; use stable constraints and scrollable areas when fixed format is required.
  • Do not use viewport font scaling instead of real typography hierarchy.
  • Do not make mobile horizontal overflow the default solution; only explicit scenes such as data tables, canvases or editors can partially scroll.

Expected Output

Outputs responsive information prioritization, breakpoint or container strategies, key component layout patterns, touch/keyboard requirements, data-intensive area handling options, and validation results. After completion, the page will not overflow, not be blocked, and is operable under common viewports and input methods.

What ships with it: 1 file

3.2 KB alongside SKILL.md

references/

Gives 0 of the 12 instructions most ui components skills give in 491 tokens

Counted across 293 of the 305 authors here whose files we hold, read 2026-09-06

  • Start with a --design-system search before designingin 17 of 293, across 15 files
  • Ensure 4.5:1 minimum text contrastin 16 of 293, across 15 files
  • Verify the pre-delivery checklist before delivering UI codein 16 of 293, across 14 files
  • Use SVG icons instead of emojisin 15 of 293, across 14 files
  • Keep touch targets at least 44 pointsin 14 of 293, across 12 files
  • Check page override files before master rulesin 13 of 293, across 11 files
  • Supplement with domain searches as neededin 13 of 293, across 11 files
  • Add cursor-pointer to all clickable elementsin 12 of 293
  • Use CSS variables for themingin 11 of 293, across 7 files
  • Use semantic color tokens, not raw hexin 11 of 293, across 8 files
  • Meet WCAG AA color contrastin 11 of 293, across 7 files
  • Default stack to html-tailwind when unspecifiedin 10 of 293

Said here and by no other author read

  • Clarify information priority for small screens
  • Use mobile-first breakpoints for simple pages
  • Prefer container queries for nested components and sidebars
  • Control scaling with minmax, clamp, and aspect-ratio
  • Handle data-dense interfaces with scrolling or column prioritization
  • Review touch targets, hover substitutes, and safe areas

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.