Make Expandable Dropdown

Make Expandable Dropdown

Overview

This skill wraps selected text in HTML <details> and <summary> tags to create collapsible/expandable sections in MDX files.

When to Use This Skill

Use this skill when:

• User highlights text and asks to make it expandable/collapsible
• User wants to create a dropdown section
• User mentions making content hidden behind a toggle
• User wants to add a <details> block

How It Works

1. Detect the highlighted text from system reminders
2. Automatically extract the summary from the first bullet point if the content starts with a list item (e.g., - Summary text). If no bullet point is found at the start, ask the user for a summary.
3. Remove the first bullet from the content (since it's now the summary)
4. Wrap the remaining content in <details> and <summary> tags
5. Replace the original text with the wrapped version

Summary Extraction Rules

• If the selected text starts with a bullet (e.g., - Technical explanation), use that as the summary
• Remove the leading bullet marker and any extra whitespace
• If there's nested content after the first bullet, that becomes the expandable content
• Only ask the user for summary text if the selection doesn't start with a bullet point

Example

Before:

- Point one
- Point two
- Point three

After:

<details>
<summary>Click to expand</summary>

- Point one
- Point two
- Point three
</details>

Implementation Notes

• Preserve all formatting and indentation of the wrapped content
• Add blank lines around the content for proper markdown rendering
• The summary text should be concise and descriptive
• Multiple highlighted sections can be converted in sequence
• Where there are multiple levels of nested bullets, only change the top level bullet in the way described above