accordion-patterns
Accordion and collapsible content patterns, FAQ layouts, and progressive disclosure.
Skill by Dragoon0x
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/dragoon0x-accordion-patterns
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: writing
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/accordion-patterns
What's inside
- Skill name
accordion-patterns- Description
- Accordion and collapsible content patterns, FAQ layouts, and progressive disclosure.
- License
- MIT
- Instructions
- 20 lines in SKILL.md · view on GitHub
Files (1)
- SKILL.md
SKILL.md (first lines)
# Accordion Patterns ## Accordion Rules 1. **Only one open at a time** for simple content (FAQ). Allow multiple open for settings/forms. 2. **Header is the full click target.** Not just the chevron. 3. **Chevron rotates** on open (down → up or right → down). 4. **Smooth animation** on expand/collapse (200-300ms). 5. **Default state:** first item open, or all closed. ## When to Use - FAQ pages (classic accordion use case). - Settings with grouped options. - Mobile navigation with sub-items. - Long forms with optional sections. ## When NOT to Use - Content that most users need to see (don't hide important information). - Fewer than 3 items (just show them all). - Sequential content (use tabs or stepper instead).
From Dragoon0x/everything-design-taste, MIT.
More from Dragoon0x/everything-design-taste
- 0.449score
configure-edt
Dragoon0x
Interactive setup wizard for Everything Design Code.
SkillDFreshness: D★ 13Claude Code +9 - 0.449score
accessibility-deep-patterns
Dragoon0x
Advanced accessibility patterns including ARIA, screen reader optimization, cognitive accessibility, and motor impairment design.
SkillDFreshness: D★ 13Claude Code +9 - 0.449score
competitive-teardown
Dragoon0x
Structured analysis of competing products covering UX patterns, design quality, positioning, and strategic differentiation opportunities.
SkillDFreshness: D★ 13Claude Code +9 - 0.449score
anti-slop
Dragoon0x
Detecting and eliminating generic AI-generated aesthetics, writing patterns, and design defaults.
SkillDFreshness: D★ 13Claude Code +9 - 0.449score
case-study-writing
Dragoon0x
Honest, structured case study writing that shows real impact.
SkillDFreshness: D★ 13Claude Code +9 - 0.446score
ar-vr-design
Dragoon0x
Augmented and virtual reality interface design including spatial UI, 3D interaction, and immersive experience patterns.
SkillDFreshness: D★ 13Claude Code +9 - 0.446score
analytics-for-designers
Dragoon0x
Using analytics tools for design decisions, behavioral analysis, and data-informed design.
SkillDFreshness: D★ 13Claude Code +9 - 0.446score
ai-product-design
Dragoon0x
Designing AI-powered features, managing user expectations, and AI transparency.
SkillDFreshness: D★ 13Claude Code +9 - 0.446score
avatar-profile
Dragoon0x
Avatar design, profile displays, user representation, initials fallback, and presence indicators.
SkillDFreshness: D★ 13Claude Code +9 - 0.446score
authentication-flow
Dragoon0x
Login, signup, password reset, SSO, MFA, and authentication UX patterns.
SkillDFreshness: D★ 13Claude Code +9 - 0.446score
animation-choreography
Dragoon0x
Page transition choreography, staggered animations, and orchestrated motion sequences.
SkillDFreshness: D★ 13Claude Code +9 - 0.446score
aspect-ratio-design
Dragoon0x
Image and media aspect ratio standards, responsive aspect ratios, and consistent media sizing.
SkillDFreshness: D★ 13Claude Code +9
Signals
- Stars
- 13
- Forks
- 1
- Open issues
- 0
- Last commit (this folder)
- Apr 11, 2026 (6 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from Dragoon0x
- 0.492score
color
Dragoon0x
Generate a color palette token file (CSS variables, tailwind config, or JS module) from the palette detected by /scan.
SkillCFreshness: C★ 4Claude Code +9 - 0.492score
benchmark
Dragoon0x
Snapshot codebase metrics (file count, total lines, /critique scores) for trend tracking.
SkillCFreshness: C★ 4Claude Code +9 - 0.492score
brief
Dragoon0x
Generate a structured product brief markdown from a one-line idea, pre-filled with codebase facts (stack, type system, palette, components count) from…
SkillCFreshness: C★ 4Claude Code +9 - 0.492score
autoplan
Dragoon0x
Run /brief, /plan-eng, and /plan-design in one shot to bootstrap a complete sprint plan.
SkillCFreshness: C★ 4Claude Code +9 - 0.492score
careful
Dragoon0x
Write a checklist of destructive commands the user wants to think twice about (rm -rf, force push, hard reset, db drop, etc.) to .dragoon/CAREFUL.md.
SkillCFreshness: C★ 4Claude Code +9 - 0.492score
component
Dragoon0x
Generate a UI component scaffold in the codebase's actual style.
SkillCFreshness: C★ 4Claude Code +9
Cite this page
accordion-patterns skill. Agent Mart. https://agentmart.dev/skills/dragoon0x-accordion-patterns (last updated 2026-10-24)