skills.rest
JDL440
JDL440COMMUNITY
Explore all skills by this author →
WebsiteGitHub

Dashboard Advanced Settings Collapse

Hide optional dashboard controls behind a semantic details wrapper.

Updated Mar 13, 2026
Search Tags:#dashboard#forms#ux#ui-patterns#advanced-settings#details-wrapper
One-click install
npx skills add https://github.com/JDL440/nfl-eval --skill dashboard-advanced-settings-collapse
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Dashboard Advanced Settings Collapse
Source: https://github.com/JDL440/nfl-eval/tree/main/.squad/skills/dashboard-advanced-settings-collapse
Command: npx skills add https://github.com/JDL440/nfl-eval --skill dashboard-advanced-settings-collapse

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A dashboard form often includes optional controls that complicate the primary authoring flow. This skill provides a pattern to hide or reorder advanced options without changing request payloads, keeping the UI clean and predictable.

Core Features & Use Cases

  • Move secondary controls into a clearly labeled details wrapper, e.g., an "Advanced settings" section, so the main flow stays focused.
  • Preserve payload contracts and element IDs, ensuring existing forms and client-side logic continue to work.
  • Reuse existing state signals (e.g., advancedChecked) to control both the toggle and the opened state for robust regression tests.

Quick Start

Enable the advanced settings collapse in a dashboard form to hide optional controls behind a details element while preserving payload structure.

Frequently Asked Questions about Dashboard Advanced Settings Collapse

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I hide advanced settings in a dashboard form to reduce cognitive load?▼

Hiding advanced settings in a dashboard form uses a semantic details wrapper to move optional controls behind an expandable section, keeping the primary workflow clean and focused.

Can I collapse dashboard controls without breaking existing form payloads?▼

Collapsing dashboard controls preserves payload contracts and element IDs, ensuring existing forms and client-side logic continue to work without modification.

What is the best way to structure secondary options in dashboard editors?▼

Structuring secondary options in dashboard editors uses a clearly labeled details wrapper, such as an advanced settings section, to prevent optional fields from interrupting the main flow.

How do regression tests verify advanced settings collapse behavior?▼

Regression tests verify advanced settings collapse by reusing existing state signals like advancedChecked to control the toggle and opened state under tests/dashboard.

When should I use a details wrapper to declutter dashboard forms?▼

Use a details wrapper to declutter dashboard forms when secondary options like idea creation, settings, or layout configurations should not interrupt the primary authoring flow.

Does collapsing advanced settings require any additional dependencies?▼

Collapsing advanced settings requires no additional dependencies, implementing a native semantic details wrapper to hide optional controls without altering request payloads.

Related Skills

Explore More Design & Creative Skills→
Gentleman-ProgrammingGentleman-Programming
618

angular-forms

Combine Angular Signals and Reactive Forms for type-safe form validation.

Official
Intermediate
giuseppe-trisciuogliogiuseppe-trisciuoglio
322

unit-test-boundary-conditions

Generate JUnit 5 parameterized tests for boundary values and edge cases.

Community
Basic
bdbchbdbch
2

tiptap-development

Guide building Tiptap v3 rich text editors with extensions and React or Vue.js.

Community
Advanced
MercurykzMercurykz

web-design-guidelines

Audit UI code for Web Interface Guidelines compliance.

Community
Intermediate