tab-accordionWhen the user wants to add or optimize tab or accordion components for content organization. Also use when the user mentions "tab component," "accordion," "e...
Install via ClawdBot CLI:
clawdbot install kostja94/tab-accordionGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated May 7, 2026
An online retailer wants to create a comprehensive FAQ page using accordions to address common customer questions about returns, shipping, and product care. This improves user experience by reducing scroll and provides SEO-friendly hidden content that Google indexes fully.
A SaaS company needs horizontal tabs to present sequential steps for setting up their software, making it easy for users to follow along. Each tab holds a step's content, all server-rendered for SEO, helping the page rank for how-to queries.
A manufacturing company uses horizontal tabs to organize product specs (dimensions, materials, shipping) into separate panels, keeping the page clean while ensuring all content is in the DOM. This supports both UX and SEO for secondary content.
An educational website employs a vertical accordion to break down a long guide into collapsible sections, allowing users to navigate easily. The first section is expanded by default to highlight primary content, and all sections are indexed for search.
A real estate agency uses accordions on property pages to address common buyer objections (e.g., price, location) with expandable answers. This provides detailed information without clutter and helps the page rank for long-tail queries.
Offer premium content organized in tabs/accordions as part of a subscription service. The organized layout enhances user experience, and SEO-friendly implementation attracts organic traffic, converting visitors into subscribers.
Service providers (e.g., lawyers, consultants) use FAQ accordions to answer common questions, building trust and capturing leads. The SEO benefits help pages rank for relevant queries, driving qualified traffic.
Create how-to guides with horizontal tabs recommending affiliate products in each step. The tabbed layout keeps content digestible, while all indexable content supports SEO, driving traffic and affiliate commissions.
💬 Integration Tip
Use native <details> and <summary> elements for accordions to ensure accessibility and crawlability without JavaScript. For horizontal tabs, server-render all content in the DOM and use CSS/JS only for show/hide—never load content via AJAX on click.
Scored May 7, 2026
Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...