card-componentsWhen the user wants to design, optimize, or audit card layouts for content display. Also use when the user mentions "card layout," "card component," "card gr...
Install via ClawdBot CLI:
clawdbot install kostja94/card-componentsGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated May 9, 2026
An online retailer wants to display products in a scannable grid layout. The card layout skill provides product cards with image, name, price, and CTA, optimized for conversion and responsive design.
A SaaS company needs to showcase its integrations using consistent cards with logo, name, description, and 'Connect' button. This skill helps structure the catalog grid for easy browsing.
A learning platform organizes guides, webinars, and articles as resource cards with thumbnail, title, format, and CTA. The skill ensures consistent design and scannability across the grid.
A marketing agency lists product features in a grid of feature cards, each with name, benefit, and optional screenshot. The layout improves scannability and highlights key value propositions.
A photographer creates a gallery grid for portfolio items using cards with thumbnail, title, and link. The masonry option handles varying image heights elegantly.
A SaaS platform uses card grids to display feature cards, integration cards, and template cards, helping users quickly understand offerings and encouraging upgrades.
A marketplace displays product cards in a grid, driving sales through clear CTAs and consistent layout. The responsive design ensures good mobile conversion.
A platform hosts articles, courses, and resources as cards in a grid, using effective CTAs to drive subscriptions or one-time purchases.
💬 Integration Tip
Combine with grid or masonry skills for advanced layouts, and use schema-markup skill to add structured data for SEO on card content.
Scored May 9, 2026
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL requir...
Build interactive HTML prototypes. Use when creating clickable mockups, adding animations, linking pages, or exporting HTML.
Figma integration. Manage Files, Projects, Teams. Use when the user wants to interact with Figma data.