FlowCay logo
FlowCay
Components: Grid Layout Skill

Components: Grid Layout Skill

When 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 grid," "CSS grid," "responsive grid," "card grid," "product grid," or "feature…

1k

Install command

npx skills add https://github.com/kostja94/marketing-skills --skill grid
SkillOpen SourceAll Platforms
Added on

Details

Overview

Components: Grid Layout Skill is an open-source Agent Skill from the kostja94/marketing-skills collection (MIT). It teaches AI coding agents focused marketing / SEO workflows so they can produce production-ready guidance instead of generic advice.

Guides grid layout design for equal-hierarchy, multi-column content display. Grids display multiple items with equal emphasis; space-efficient and scannable. Used for products, templates, tools, features, blog indexes, and galleries.

See list for list layout; card for card structure within grid.

Official skill id: grid. Source path: skills/components/layout/grid.

Key Features

  • C: SS Grid: repeat(auto-fill, minmax(min, 1fr)) or repeat(auto-fit, minmax()) for fluid columns
  • B: reakpoints: e.g., 1 col <768px; 2 cols 768–1024px; 3–4 cols >1024px
  • C: onsistency: Same padding, aspect ratios across items; see card for card structure
  • M: obile: Single column; full-width items
  • T: ablet: 2 columns; touch targets ≥44×44px
  • D: esktop: 3–4 columns; hover states OK

How to Use

  1. Use a Skill-compatible agent such as Claude Code, Cursor, or Codex.
  2. Install from the terminal (Node.js required):
npx skills add https://github.com/kostja94/marketing-skills --skill grid

Or paste the install prompt from this tool page into your agent and ask it to install for you. 3. Restart / reload the agent so the new Skill is loaded. 4. Invoke the Skill with its slash commands or by asking the agent to run the workflow described in Overview / Key Features. 5. Review outputs before publishing — treat model-generated copy, images, and data as drafts.

Pricing

Plan Billing Price Notes
Open source — Free MIT license; install via npx skills add
Full pack — Free Optional: install the entire marketing-skills repo

No paid tiers. Check the GitHub repository for license and updates.

Best For

Marketers, indie hackers, ecommerce / SaaS founders, and SEO operators who want agents to execute a specific marketing task with structured best practices.

Trigger context from the skill author: When 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 grid," "CSS grid," "responsive grid," "card grid," "product grid," or "feature grid." For cards layout, use card.

FAQ

How do I install this skill?

npx skills add https://github.com/kostja94/marketing-skills --skill grid

Or copy the skill folder into .cursor/skills/, .agents/skills/, or .claude/skills/.

Does this skill run code on my machine?

No. Skills in this collection are pure Markdown instructions for agents — no executable payloads.

Can I install only this skill instead of the full pack?

Yes. Prefer --skill grid for a single task. Install 2–3 related skills per job rather than the entire library.

Where should I add project context?

Copy templates/project-context.md from the repo into .cursor/ or .claude/ and fill in product, audience, and brand details so outputs stay tailored.