This is your guide when you're building card-based layouts for products, templates, tools, features, or any repeating content blocks. It walks through card anatomy (container, image, title, description, CTA), responsive grid patterns, and which card type fits which use case. The skill ties directly into page generators for products, templates, integrations, and more, so you get consistent structure whether you're doing a product catalog or a blog index. It also covers when to use grid versus list versus masonry, plus the usual SEO considerations for thumbnails and schema. One focused card per topic is the mantra here, and the hover state advice is solid: subtle elevation without causing layout shift.
- skills.sh installs
- 1.1K
- GitHub stars
- 1.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add kostja94/marketing-skills --skill card --agent claude-codeInstalls into .claude/skills of the current project.
Files
Card construction has moved
Card construction is now maintained in the Card reference in Bricks, the component layer for AI agents.
npx skills add kostja94/bricks --skill component-builder
Ask the agent to use component-builder to build a new Card. This compatibility entry contains no component rules and is no longer maintained.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/kostja94/marketing-skills
- Categories
- Frontend Development, Marketing & SEO, Design & UI/UX
- First seen
- May 16, 2026
More from kostja94/marketing-skills
All 172- Media Kit Page Generator1.1K
- Trust Badges Generator1.1K
- Breadcrumb Generator1.1K
- Distribution Channels1.1K
- Grid1.1K
- Social Share Generator1.1K
- Employee Generated Content1.1K
- Sidebar Generator1.1K
- Customer Stories Page Generator1.1K
- Docs Page Generator1.1K
- Features Page Generator1.1K
- Referral Program1.1K
- Showcase Page Generator1.1K
- Popup Generator1.1K
- Contest Page Generator1.1K
- Use Cases Page Generator1.1K
- Services Page Generator1.1K
- Video Optimization1.1K
- Native Ads1.1K
- Glossary Page Generator1.1K
- Disclosure Page Generator1.1K
- Tools Page Generator1.1K
- Changelog Page Generator1.1K
- Careers Page Generator1.1K
Recommended
More Frontend Development
muidavila7/claude-code-templatesMaterial-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI com1.1Kskills.sh installs
gridkostja94/marketing-skillsWhen the user wants to design, optimize, or audit grid layouts for content display. Also use when the user mentions "grid layout," "grid design," "multi-column 1.1Kskills.sh installs
javascript-sdkinference-sh/skillsJavaScript/TypeScript SDK for inference.sh - run AI apps, build agents, integrate with all models. Package: @inferencesh/sdk (npm install). Full TypeScript supp1.1Kskills.sh installs
vuejs-typescript-best-practicesmindrally/skillsVue.js and TypeScript best practices for building performant applications with Vite, Pinia, VueUse, and Tailwind CSS.1.1Kskills.sh installschat-uiinference-sh/skillsChat UI building blocks for React/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat interface1.1Kskills.sh installs
render-props-patternpatternsdev/skillsTeaches the render props pattern for flexible component composition. Use when you need to share rendering logic between components by passing a function that re1.1Kskills.sh installs