skills.rest
prasanna591
prasanna591COMMUNITY
Explore all skills by this author →
GitHub

card-layout

Designs responsive card-based UI layouts with grid, bento, and accessibility patterns.

Updated Aug 30, 2026
Search Tags:#accessibility#responsive design#ui design#tailwind#css grid#bento grid#card layout
One-click install
npx skills add https://github.com/prasanna591/ProblemSolvingMind --skill card-layout-prasanna591
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: card-layout
Source: https://github.com/prasanna591/ProblemSolvingMind/tree/main/.opencode/skills/card-layout
Command: npx skills add https://github.com/prasanna591/ProblemSolvingMind --skill card-layout-prasanna591

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building card-based interfaces often leads to inconsistent spacing, broken responsive behavior, missing hover/focus states, and accessibility failures. This Skill provides concrete layout patterns, spacing rules, and WCAG guidance so card grids, bento layouts, and media cards render correctly across viewports. ## Core Features & Use Cases - Layout Patterns: Covers card grids with auto-fill/auto-fit columns, bento grids with col-span/row-span mosaics, horizontal scroll-snap rails, and media cards with fixed aspect ratios. - Responsive & Spacing Rules: Enforces mobile-first breakpoints (1 to 4 columns), 4px/8px spacing grids, consistent gutters, and max card widths for readability. - Interaction & Accessibility: Defines default, hover, focus, and active states plus WCAG 2.2 AA contrast, keyboard focus, and prefers-reduced-motion support. - Use Case: When building a pricing page or dashboard, ask for a responsive card grid and receive guidance on grid-template-columns, gap values, hover lift effects, and focus rings that pass accessibility audits. ## Quick Start Ask the assistant to design a responsive three-column pricing card grid with hover lift effects and keyboard-accessible focus states.

Frequently Asked Questions about card-layout

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

FAQPage Schema
How do I create a responsive card grid with CSS?▼

Use CSS grid with grid-template-columns set to repeat(auto-fill, minmax(240px, 1fr)) for fluid columns that scale with the container. Set a consistent gap of 16 to 24 pixels and never mix gutter sizes within one grid.

What is a bento grid layout and when should I use it?▼

A bento grid is a mixed-size card mosaic where panels span 1 to 3 columns or rows for visual rhythm. Anchor it on a 4-column mobile to 12-column desktop grid, place the large feature card top-left, and use grid-template-areas or col-span utilities.

How do I make clickable cards accessible to keyboard users?▼

Wrap the card with a stretched link that has an accessible name, and provide a visible 2px focus ring meeting WCAG AA contrast. Never rely on hover-only affordances, and respect prefers-reduced-motion by disabling translate and shadow animations.

When should I use a list instead of a card grid?▼

Use a vertical list of full-width cards when each item has rich or detailed content, and use a table for dense tabular data. Avoid card overload: if every element is a card, nothing stands out, so use plain sections for low-priority content.

Why do card images cause layout shift during page load?▼

Images without defined dimensions jump as they load. Fix this by setting an aspect-ratio such as 16/9 or 4/3 on the media container, using object-fit cover with full width and height, and adding loading lazy for below-the-fold images.

Related Skills

Explore More Design & Creative Skills→
efekrbasefekrbas
41

floating-ui

Design floating UI layouts with detached cards, pill navigation, and diffuse shadows.

Community
Intermediate
ArnavPuriArnavPuri
3

card-design

Generate HTML and CSS card components with Tailwind CSS.

Community
Intermediate
effiemincereffiemincer

bolder

Amplify visual elements in user interfaces with concrete typography, color, and spacing notes.

Community
Advanced
jpoindexterjpoindexter

tufte-layering-and-separation

Analyze visual displays to identify and eliminate information-obscuring noise from poor layering.

Community
Intermediate