Skills
.Work. You
Rest

building-accordion-patterns

Community

Build accessible, animated accordions.

Design & Creative#accessibility#react#css#animation#ui component#astro#accordion
Authoralexejluft
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides ready-to-use, animated, and accessible code patterns for implementing accordion components across different web development frameworks.

Core Features & Use Cases

  • Multiple Framework Support: Offers solutions for Vanilla JS/Astro, React/Next.js, and premium agency layouts.
  • Animation Techniques: Demonstrates CSS Grid, GSAP, and Framer Motion for smooth transitions.
  • Accessibility: Includes ARIA attributes for screen reader compatibility.
  • Use Case: Quickly integrate a performant and accessible accordion into your web application, choosing the best pattern for your tech stack and design needs.

Quick Start

Implement the CSS Grid row trick accordion pattern using the provided HTML, CSS, and JS snippets.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: building-accordion-patterns
Download link: https://github.com/alexejluft/brudi/archive/main.zip#building-accordion-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.