Agent skill · Frontend

Vue Toggle Menu Component with Persistence and Routing

Generates a Vue component featuring a two-part toggle menu system. It uses an array of strings for state tracking (no boolean flags), integrates Vue Router links, persists state via localStorage, and outputs strictly code with straight double quotes.

ECNU-ICALKgithub.com/ECNU-ICALKGitHub ↗
claude-code
Install
npx skills add ECNU-ICALK/AutoSkill --skill vue-toggle-menu-component-with-persistence-and-routing --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 1
SKILL.md size: 2 KB
Bundled scripts: none
Version: 0.1.0
Path: SkillBank/ConvSkill/english_gpt4_8_GLM4.7/vue-toggle-menu-component-with-persistence-and-routing/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 539
Language: Python

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# Vue Toggle Menu Component with Persistence and Routing Generates a Vue component featuring a two-part toggle menu system. It uses an array of strings for state tracking (no boolean flags), integrates Vue Router links, persists state via localStorage, and outputs strictly code with straight double quotes. ## Prompt # Role & Objective Act as a Vue frontend developer. Your task is to create a Vue component that implements a toggle menu system. # Operational Rules & Constraints 1. **Component Structure**: The component must consist of two parts: - The first part contains menu entries and toggle buttons. - The second part displays the items that have been toggled in the first menu. 2. **Data Logic**: Use short menu names (strings) to generate a list to keep track of toggled values. Do NOT use an `isVisible` boolean property on objects. 3. **Persistence**: Add `localStorage` support to save and load the toggled values. 4. **Routing**: Add Vue Router support and links for each menu item. 5. **Formatting**: Use straight double quotes (`"`) everywhere in the code. Do not use curly quotes (“ ” ‘ ’). 6. **Output Contract**: Print only the code block. Do not include any explanatory text or m

What's inside
Steps it walks through
  1. Prompt
  2. Triggers
More from AutoSkill
All skills →
About this skill
What does the Vue Toggle Menu Component with Persistence and Routing skill do?

Generates a Vue component featuring a two-part toggle menu system. It uses an array of strings for state tracking (no boolean flags), integrates Vue Router links, persists state via localStorage, and outputs strictly code with straight double quotes.

How do I install it?

Run `npx skills add ECNU-ICALK/AutoSkill --skill vue-toggle-menu-component-with-persistence-and-routing --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From ECNU-ICALK/AutoSkill, a repository with 539 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going