accordions-dropdowns
Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions
Best use case
accordions-dropdowns is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions
Teams using accordions-dropdowns should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/accordions-dropdowns/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How accordions-dropdowns Compares
| Feature / Agent | accordions-dropdowns | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Accordion & Dropdown Animation Principles
Apply Disney's 12 principles to expand/collapse elements for smooth, informative reveals.
## Principles Applied to Accordions
### 1. Squash & Stretch
Content can slightly compress as it collapses, stretch as it expands. Trigger header can squash on click feedback.
### 2. Anticipation
Before expanding, header briefly depresses. Chevron starts rotation before content reveals. Builds expectation.
### 3. Staging
Expanded section should be clearly visible. Consider dimming other accordion items. Active header stays highlighted.
### 4. Straight Ahead & Pose to Pose
Define clear states: collapsed, expanding, expanded, collapsing. Pose-to-pose for controlled, reversible animations.
### 5. Follow Through & Overlapping Action
Container expands first, content fades in 50-100ms later. Chevron rotation can overshoot and settle. Creates depth.
### 6. Ease In & Ease Out
Expand: `ease-out` (fast start, smooth finish). Collapse: `ease-in` (slow start, fast finish). `cubic-bezier(0.4, 0, 0.2, 1)` works well.
### 7. Arcs
Chevron rotation should ease through the arc. Content items can enter with slight arc paths rather than straight down.
### 8. Secondary Action
While content reveals (primary), chevron rotates (secondary), sibling accordions may collapse (tertiary).
### 9. Timing
- Expand/collapse: 250-350ms
- Chevron rotation: 200-250ms
- Content fade: 150-200ms
- Stagger internal items: 30-50ms
- Click feedback: 50ms
### 10. Exaggeration
Important reveals can use more dramatic timing. FAQ accordions can have snappier animations. Match content importance.
### 11. Solid Drawing
Maintain consistent header heights. Content should not jitter during height animation. Use proper height techniques.
### 12. Appeal
Smooth accordions feel polished. Janky height animations feel broken. Proper expand/collapse is worth the technical investment.
## CSS Implementation
```css
.accordion-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease-out;
}
.accordion-content.open {
grid-template-rows: 1fr;
}
.accordion-inner {
overflow: hidden;
}
.accordion-chevron {
transition: transform 250ms ease-out;
}
.accordion-header[aria-expanded="true"] .accordion-chevron {
transform: rotate(180deg);
}
/* Alternative: animate max-height */
.dropdown-content {
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease-out;
}
.dropdown-content.open {
max-height: 500px; /* larger than content */
}
```
## Key Properties
- `grid-template-rows`: smooth height
- `max-height`: simpler but less precise
- `transform`: rotate chevrons
- `opacity`: content fade
- `overflow`: hidden during transitionRelated Skills
chrome-debug
This skill empowers AI agents to debug web applications and inspect browser behavior using the Chrome DevTools Protocol (CDP), offering both collaborative (headful) and automated (headless) modes.
ux
This AI agent skill provides comprehensive guidance for creating professional and insightful User Experience (UX) designs, covering user research, information architecture, interaction design, visual guidance, and usability evaluation. It aims to produce actionable, user-centered solutions that avoid generic AI aesthetics.
vly-money
Generate crypto payment links for supported tokens and networks, manage access to X402 payment-protected content, and provide direct access to the vly.money wallet interface.
lets-go-rss
A lightweight, full-platform RSS subscription manager that aggregates content from YouTube, Vimeo, Behance, Twitter/X, and Chinese platforms like Bilibili, Weibo, and Douyin, featuring deduplication and AI smart classification.
tech-blog
Generates comprehensive technical blog posts, offering detailed explanations of system internals, architecture, and implementation, either through source code analysis or document-driven research.
modal-deployment
Run Python code in the cloud with serverless containers, GPUs, and autoscaling using Modal. This skill enables agents to generate code for deploying ML models, running batch jobs, serving APIs, and scaling compute-intensive workloads.
grail-miner
This skill assists in setting up, managing, and optimizing Grail miners on Bittensor Subnet 81, handling tasks like environment configuration, R2 storage, model checkpoint management, and performance tuning.
whisper-transcribe
Transcribes audio and video files to text using OpenAI's Whisper CLI, enhanced with contextual grounding from local markdown files for improved accuracy.
astro
This skill provides essential Astro framework patterns, focusing on server-side rendering (SSR), static site generation (SSG), middleware, and TypeScript best practices. It helps AI agents implement secure authentication, manage API routes, and debug rendering behaviors within Astro projects.
thor-skills
An entry point and router for AI agents to manage various THOR-related cybersecurity tasks, including running scans, analyzing logs, troubleshooting, and maintenance.
ontopo
An AI agent skill to search for Israeli restaurants, check table availability, view menus, and retrieve booking links via the Ontopo platform, acting as an unofficial interface to its data.
advanced-skill-creator
Meta-skill that generates domain-specific skills using advanced reasoning techniques. PROACTIVELY activate for: (1) Create/build/make skills, (2) Generate expert panels for any domain, (3) Design evaluation frameworks, (4) Create research workflows, (5) Structure complex multi-step processes, (6) Instantiate templates with parameters. Triggers: "create a skill for", "build evaluation for", "design workflow for", "generate expert panel for", "how should I approach [complex task]", "create skill", "new skill for", "skill template", "generate skill"