From grimoire
Applies progressive disclosure to forms, settings, and panels — shows primary options first and reveals secondary/advanced options on demand to reduce cognitive load.
How this skill is triggered — by the user, by Claude, or both
Slash command
/grimoire:apply-progressive-disclosureThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Show only the options and information required for the primary task. Reveal additional complexity — advanced settings, optional fields, secondary actions — only when the user requests or needs it.
Show only the options and information required for the primary task. Reveal additional complexity — advanced settings, optional fields, secondary actions — only when the user requests or needs it.
Adopted by: Apple HIG codifies progressive disclosure as a core interaction pattern and applies it throughout macOS and iOS (Advanced settings in dialogs, More options in action sheets); Google Material Design uses progressive disclosure in its expansion panel and bottom sheet patterns; Salesforce, Figma, and Linear each apply progressive disclosure in their settings and configuration UIs to manage feature complexity without overwhelming new users Impact: NNG (2006) reports that progressive disclosure reduces task completion time by 20–40% for first-time users on complex forms and settings screens, compared to fully-exposed layouts; Miller's (1956) working memory research establishes 7±2 (now revised to ~4±1 by Cowan 2001) as the cognitive limit for simultaneously held items — interfaces that surface all options at once routinely exceed this limit; Apple's own HIG cites progressive disclosure as a key contributor to the "learnability" of its platforms Why best: Feature parity with a power user audience should not come at the cost of first-time user experience; a fully-exposed interface is the designer's mental model, not the user's — progressive disclosure presents the user's mental model first and reveals the designer's model on demand; the alternative (exposing everything at once) is equivalent to providing an API reference manual as onboarding documentation
Sources: NNG "Progressive Disclosure" (Nielsen, 2006); Miller "The Magical Number Seven, Plus or Minus Two" (Psychological Review, 1956); Cowan "The magical number 4 in short-term memory" (Behavioral and Brain Sciences, 2001); Apple HIG "Progressive Disclosure" (developer.apple.com)
For each feature, list all possible actions and options. Classify each as:
Example — a file export dialog:
Primary (always show): File format (PDF, PNG, SVG)
File name field
[Export] button
Secondary (on expand): Resolution/DPI setting
Color profile (sRGB, CMYK)
Compression quality
Advanced (rare): Custom ICC profile
Metadata embedding options
| Pattern | When to use |
|---|---|
| Expand/collapse | Settings panels, FAQ accordions, detail rows in tables |
| "Advanced options" toggle | Form dialogs with optional technical settings |
| Progressive wizard/stepper | Multi-step flows where later steps depend on earlier choices |
| Tab groups | When secondary content is large enough to warrant a full panel |
| Contextual reveal | Show additional fields only when a checkbox or toggle is selected |
Contextual reveal example:
[ ] Send confirmation email
↓ (shows when checked)
Email address: ___________
Subject line: ___________
Showing an email address field before the "send email" checkbox is checked — and hiding it — reduces the visible field count without removing the feature.
Limit primary-level menus and option groups to 4–7 items. When a list exceeds 7 items:
A dropdown with 20 options is a classification problem masquerading as a UI problem — classify before displaying.
Progressive disclosure applies only to optional, contextual, or advanced content. Required fields for completing the primary task must always be visible.
Rules:
The control that reveals additional content must be immediately recognizable:
When a user expands an advanced section and sets values, those values must be preserved if the section is collapsed and re-expanded. Collapsing a section should not reset the values within it — the collapse is a display choice, not a clear.
The test for progressive disclosure is the first-time user completing the primary task:
If users feel like they're missing something hidden in the advanced section, primary/secondary classification needs to be revisited.
npx claudepluginhub jeffreytse/grimoire --plugin grimoireGuides building and reviewing onboarding flows, empty states, progress checklists, signup forms, and product tours using progressive disclosure to optimize time-to-value.
Designs information architecture, navigation, user flows, interaction patterns, progressive disclosure, and error handling UX for intuitive apps. Use when flows feel clunky or users are confused.
Designs simplified interfaces with reduced visual noise and fewer options for users needing less complexity. Useful for settings, dashboards, and complex tools.