·stacked-cards
</>

stacked-cards

Creates horizontally fanned/cascading card stacks with proper z-index ordering and hover lift animations. Use when building album browsers, card fans, stacked previews, or any overlapping card collection.

4Installs·1Trend·@ainergiz

Installation

$npx skills add https://github.com/ainergiz/design-inspirations --skill stacked-cards

How to Install stacked-cards

Quickly install stacked-cards AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/ainergiz/design-inspirations --skill stacked-cards
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: ainergiz/design-inspirations.

SKILL.md

View raw

Build horizontally cascading card stacks where cards overlap in order, with hover animations that lift cards in place without breaking the cascade.

Why? DOM order determines stacking when z-index values are the same within a parent. By rendering in reverse, the first logical card is the last DOM element, appearing on top.

Why? When you change z-index on hover, the card jumps to the front, breaking the visual illusion of a physical stack. Real cards lift UP in place while staying behind cards in front.

Creates horizontally fanned/cascading card stacks with proper z-index ordering and hover lift animations. Use when building album browsers, card fans, stacked previews, or any overlapping card collection. Source: ainergiz/design-inspirations.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/ainergiz/design-inspirations --skill stacked-cards
Category
</>Dev Tools
Verified
First Seen
2026-02-25
Updated
2026-03-10

Browse more skills from ainergiz/design-inspirations

Quick answers

What is stacked-cards?

Creates horizontally fanned/cascading card stacks with proper z-index ordering and hover lift animations. Use when building album browsers, card fans, stacked previews, or any overlapping card collection. Source: ainergiz/design-inspirations.

How do I install stacked-cards?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/ainergiz/design-inspirations --skill stacked-cards Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/ainergiz/design-inspirations

Details

Category
</>Dev Tools
Source
skills.sh
First Seen
2026-02-25