Tab Accordion
Implement vertical accordions or horizontal tabs so long FAQ, how-to, and spec content stays scannable without sacrificing crawlability when you follow the skill’s SEO rules.
Overview
Tab & Accordion is an agent skill most often used in Build (also Launch for hidden-content SEO) that guides tab and accordion implementation for organized, crawl-aware page content.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill tab-accordionWhat is this skill?
- Compares vertical accordion vs horizontal tab layouts with when-to-use table (FAQ vs how-to, specs, pricing tiers).
- Covers SEO implications of hidden content, details/summary, and disclosure-style widgets.
- Routes dedicated FAQ schema work to faq-page-generator and HowTo steps to howto-section-generator.
- Versioned skill metadata (v1.1.2) with explicit trigger phrases for accordion and tabbed content.
- Optional brief intro on first invoke, then direct deliverables on repeat use.
- Documents 2 layout patterns: vertical accordion and horizontal tabs.
- Skill metadata version 1.1.2.
Adoption & trust: 704 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have long FAQ or how-to content on one page and need tabs or accordions without hurting UX or how search engines treat hidden text.
Who is it for?
Solo builders shipping marketing sites, docs, or product pages who want structured expandable UI with explicit SEO-aware implementation notes.
Skip if: Teams that only need a full FAQ page with schema markup—use faq-page-generator—or step-by-step HowTo sections with schema—use howto-section-generator—instead of generic tab/accordion patterns.
When should I use this skill?
User wants tab or accordion components, expandable/collapsible sections, tabbed or FAQ-style content, or hidden-content SEO for disclosure widgets.
What do I get? / Deliverables
You get a clear layout choice (vertical accordion vs horizontal tabs), implementation guidance, and pointers to FAQ or HowTo generator skills when schema-heavy pages are next.
- Recommended pattern (accordion vs tabs) for the use case
- Implementation and SEO-placement guidance for the chosen pattern
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill delivers UI patterns (tabs/accordions) in the product or marketing site codebase. Frontend subphase matches component layout, markup, and interaction choices rather than copy-only or paid-media workflows.
Where it fits
Add a vertical accordion to a pricing FAQ block without stacking every answer open on mobile.
Use horizontal tabs to split API reference sections on a developer docs page.
Choose markup so expandable answers remain understandable for crawlers and users.
Prototype objection-handling accordions on a pre-launch landing page before full FAQ schema work.
How it compares
Use for reusable tab/accordion UX patterns on a page; use dedicated FAQ or HowTo generator skills when the primary goal is rich-result schema and page templates.
Common Questions / FAQ
Who is tab-accordion for?
Indie and solo builders adding or refining tab and accordion UI on landing pages, help content, and long-form marketing pages with an agent coding assistant.
When should I use tab-accordion?
During Build when implementing tabbed or collapsible sections; during Launch when you care about hidden-content SEO and disclosure markup; when triggers match FAQ-style accordions or how-to tab layouts before you invoke faq-page-generator or howto-section-generator.
Is tab-accordion safe to install?
Review the Security Audits panel on this Prism page for ingested audit results; the skill is procedural markup guidance and does not require shell or secrets by default.
Workflow Chain
Then invoke: faq page generator, howto section generator
SKILL.md
READMESKILL.md - Tab Accordion
# Components: Tab & Accordion 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. **When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. ## Layout Patterns | Pattern | Layout | Best for | Example | |---------|--------|----------|---------| | **Vertical accordion** | Stacked; expand/collapse one at a time | FAQ, Q&A, long lists, objection handling | "How do I return?" → answer below | | **Horizontal tabs** | Side-by-side labels; one panel visible | How-to steps, product specs, pricing tiers, comparisons | "Step 1 \| Step 2 \| Step 3" or **short action labels** (see **howto-section-generator**—labels should match H2 intent, not contradict a fixed “N steps” title) | **Mobile**: Vertical accordion works well on small screens (natural scroll). Horizontal tabs can feel cramped—consider accordion, dropdown, or full-width tab bar that scrolls. ## SEO: Is It Friendly? **Google's position**: Google indexes and ranks content inside tabs and accordions fully; hidden content receives full weight (confirmed since 2016 mobile-first indexing). Gary Illyes: "we index the content, its weight is fully considered for ranking." **Practical nuance**: Some tests show always-visible content outperforms hidden content in rankings. Reserve tabs/accordions for **secondary** content; place primary, keyword-critical content in visible areas. | Content type | Placement | |--------------|-----------| | **Primary / ranking-focused** | Visible above fold; not hidden | | **Secondary / supporting** | Tabs, accordions acceptable | | **FAQ answers** | Accordion OK; first item expanded by default; see **faq-page-generator** | ### Indexing Requirements **Content must be in the DOM on page load.** Google does not simulate user clicks; it cannot "click" tabs to discover content. | Implementation | Indexed? | |----------------|----------| | All tab content in HTML at load | ✅ Yes | | Content loaded via AJAX on tab click | ❌ No | **Recommendation**: Server-render all tab content in the initial HTML; use CSS/JS only to show/hide. Prefer `<details>`/`<summary>` or equivalent server-rendered markup. See **rendering-strategies** for SSR, SSG, CSR and crawler visibility. ### Horizontal Tabs: More Tabs, More Content? **Technically**: Yes—if all content is in the DOM at load, more tabs = more indexable content. Mobile-first indexing gives full weight to tabbed content in HTML. **Strategically**: Not always. **Signal dilution** occurs when many tabs = many different topics on one page. Google may struggle to understand which query the page should rank for; topical authority and keyword focus get spread thin. | Scenario | Use tabs? | Alternative | |----------|-----------|-------------| | **Same topic** (How-to Step 1/2/3; product specs: dimensions, materials, shipping) | ✅ Yes | — | | **Different topics** (Service A, Service B, Portfolio, Blog) | ❌ No | Separate URLs per topic; see **content-strategy** for pillar/cluster | **When many horizontal tabs work**: All tabs semantically