Does this skill provide implementation code?

While it focuses on design methodology and strategy, it provides the structural framework and interaction patterns that developers can implement using CSS, JS, or UI frameworks.

What is progressive disclosure in UI design?

Progressive disclosure is a technique that sequences information and actions across several screens or layers to prevent overwhelming the user with too much data at once.

What is the 80/20 rule in this context?

The 80/20 rule suggests that 80% of users only need 20% of your features. This skill helps you identify that 20% to keep it prominent while progressively revealing the rest.

How does the hierarchy of disclosure work?

It categorizes UI elements into four levels: Level 0 (Essential/Always visible), Level 1 (Important/One click away), Level 2 (Useful/Hidden), and Level 3 (Advanced/Intentionally buried).

When should I use the progressive disclosure skill?

Use this skill when designing complex software, multi-step forms, or feature-rich interfaces where showing all options simultaneously would lead to high cognitive load.

Progressive Disclosure Design

Name: Progressive Disclosure Design
Author: flpbalada

byflpbalada

•

デザインツール

Simplifies complex user interfaces by sequencing information and actions across time to reduce cognitive load and improve usability.

The Progressive Disclosure skill provides a structured methodology for applying interaction design principles that manage complexity by showing users only what they need, when they need it. It guides developers and designers through the process of auditing interfaces, prioritizing features using the 80/20 rule, and establishing a clear hierarchy of disclosure levels. By deferring advanced functionality until requested, this skill helps create intuitive experiences for onboarding, complex forms, and feature-rich admin panels, ensuring that power users have the control they need without overwhelming newcomers.

主な機能

01Standardized design templates for documenting disclosure patterns

029 GitHub stars

03Information hierarchy mapping from essential to advanced levels

0480/20 rule framework for identifying core versus secondary features

05Interaction pattern library for various reveal mechanisms

06Audit methodology for simplifying existing high-complexity interfaces

ユースケース

01Creating multi-step forms and wizards that reveal fields contextually

02Simplifying data-heavy admin dashboards and settings pages

03Designing intuitive onboarding flows for complex SaaS products

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flpbalada/thinking-toolkit progressive-disclosure

For use in Claude.ai and ChatGPT

主な機能

01Standardized design templates for documenting disclosure patterns

029 GitHub stars

03Information hierarchy mapping from essential to advanced levels

0480/20 rule framework for identifying core versus secondary features

05Interaction pattern library for various reveal mechanisms

06Audit methodology for simplifying existing high-complexity interfaces

ユースケース

01Creating multi-step forms and wizards that reveal fields contextually

02Simplifying data-heavy admin dashboards and settings pages

03Designing intuitive onboarding flows for complex SaaS products

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flpbalada/thinking-toolkit progressive-disclosure

For use in Claude.ai and ChatGPT