FlowCay logo
FlowCay
Components: Tab & Accordion Skill

Components: Tab & Accordion Skill

When the user wants to add or optimize tab or accordion components for content organization. Also use when the user mentions "tab component," "accordion," "expandable content," "collapsible sections," "tabbed content," "FAQ accordion,"…

1k

Install command

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

Details

Overview

Components: Tab & Accordion 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 tab and accordion implementation for organizing content without excessive vertical space. Two layout patterns: vertical accordion (FAQ-style, stacked) and horizontal tabs (how-to style, side-by-side). Both improve UX by reducing scroll; SEO impact depends on implementation and content placement.

Use <details> and <summary>—no JavaScript required; accessible; crawlable.

Official skill id: tab-accordion. Source path: skills/components/content/tab-accordion.

Key Features

  • F: irst tab/accordion: Add open attribute so it's expanded by default
  • **:** <summary>: Must be first child of <details>; acts as toggle
  • P: rogressive enhancement: Style with CSS; add JS only if needed (e.g., close others when one opens)
  • C: ontent loaded only after user click (AJAX, lazy-loaded via fetch)—crawlers will not index it
  • **:** display: none or visibility: hidden for primary content—Google may treat differently
  • M: any tabs with unrelated topics on one page—causes signal dilution; use separate URLs instead

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 tab-accordion

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 add or optimize tab or accordion components for content organization. Also use when the user mentions "tab component," "accordion," "expandable content," "collapsible sections," "tabbed content," "FAQ accordion," "how-to tabs," "horizontal tabs," "vertical accordion," "content in tabs," "hidden…

FAQ

How do I install this skill?

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

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 tab-accordion 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.