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."
More from kostja94/marketing-skills
meta-ads
When the user wants to set up, optimize, or manage Meta (Facebook/Instagram) Ads. Also use when the user mentions "Meta Ads," "Facebook Ads," "Instagram Ads," "Meta Pixel," "Conversions API," "Advantage+," "lookalike audience," or "Meta retargeting." For landing pages, use landing-page-generator.
1.3Kcopywriting
When the user wants to write or optimize short-form marketing copy—headlines, CTAs, ad copy, landing page copy, email copy. Also use when the user mentions "copywriting," "headline," "CTA copy," "ad copy," "landing page copy," "sales copy," "conversion copy," "PAS," "AIDA," "BAB," "copy formula," or "differentiation." For long-form article bodies (blog posts, guides), use article-content.
1.1Kbranding
When the user wants to define, audit, or apply brand strategy—purpose, values, positioning, storytelling, voice, narrative (not only visuals). Also use when the user mentions "brand strategy," "brand story," "brand storytelling," "brand voice," "brand identity," "brand guidelines," "brand purpose," "brand values," "origin story," "brand narrative," "brand personality," "brand archetype," "slide deck branding," "PPT brand colors," or "document style guide." For typography, colors, design tokens, and frontend visuals, use brand-visual-generator.
1.1Klinkedin-posts
When the user wants to create LinkedIn post copy or optimize for LinkedIn. Also use when the user mentions "LinkedIn post," "LinkedIn article," "professional post," "post to LinkedIn," "LinkedIn content," "LinkedIn copy," "B2B LinkedIn," "LinkedIn engagement," "LinkedIn feed," "share box," "document post," "poll," "Newsletter," "reshare," or "LinkedIn marketing." For LinkedIn ads, use linkedin-ads.
1.0Kgoogle-search-console
When the user wants to analyze Google Search Console data, use the GSC API, or interpret search performance. Also use when the user mentions "GSC," "Search Console," "indexing report," "Core Web Vitals," "Enhancements," "Insights report," "search performance," "search queries," "search performance report," "URL inspection," "impressions," "CTR," "average position," "index coverage," "GSC data analysis," "Search Console API," or "searchanalytics.query." When the user wants to rewrite title tags (not only report on them), use title-tag. For meta description rewrites, use meta-description.
1.0Ktiktok-captions
When the user wants to create TikTok video captions, scripts, or optimize for TikTok. Also use when the user mentions "TikTok post," "TikTok caption," "TikTok video," "post to TikTok," "TikTok script," "TikTok content," "TikTok copy," "TikTok hashtags," or "TikTok marketing." For TikTok ads, use tiktok-ads.
924