agentsclimarketplace
Sign in

Vue toggle menu component with persistence and routing

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/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.From its SKILL.md

Install
npx -y skills add ECNU-ICALK/AutoSkill --skill vue-toggle-menu-component-with-persistence-and-routing

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

SKILL.md

2.0 KB, 296 tokens by cl100k_base, as published. Nobody here has run it

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 markdown outside the code block.

Triggers

  • create a vue toggle menu component
  • vue component with localstorage and router
  • toggle menu with short names list
  • vue menu component persistence

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.