Agent skill

Fantasia Quasar Vue

by vishiri in vishiri/fantasia-archive

Builds Vue 3 + Quasar UI for Fantasia Archive: layouts, pages, router, Pinia, and boot files.

GPL-3.0Auto-check passedFrontend & Design

Install Fantasia Quasar Vue

skills CLI
$ npx skills add vishiri/fantasia-archive --skill fantasia-quasar-vue -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install vishiri/fantasia-archive fantasia-quasar-vue --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/vishiri/fantasia-archive.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/fantasia-quasar-vue .claude/skills/fantasia-quasar-vue && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
fantasia-quasar-vue
GitHub stars
409
Token cost
~2.1k tokens
SKILL.md length
531 words
Files
1
Skills in repo
35
Repo updated
First seen
Licence
GPL-3.0

At a glance

Builds Vue 3 + Quasar UI for Fantasia Archive: layouts, pages, router, Pinia, and boot files.

  • Editing .vue files
  • SKILL.md covers Stack, Component folders…, Layout and pages and Single-file component block…, plus 9 more sections
  • Calls yarn
  • Quasar components

What it does

Fantasia Quasar Vue is an agent skill from vishiri/fantasia-archive. Builds Vue 3 + Quasar UI for Fantasia Archive: layouts, pages, router, Pinia, and boot files. Use when editing .vue files, Quasar components, routes, or stores under src/.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with Vue.js. The repository describes itself as: A world-builder's best friend! The licence is GPL-3.0.

When your agent uses it

  • Editing .vue files
  • Quasar components
  • Stores under src/

Example prompts

  • “Use the fantasia-quasar-vue skill to build Vue 3 + Quasar UI for Fantasia Archive: layouts, pages, router, Pinia, and boot files”
  • “/fantasia-quasar-vue”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 26d4648. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • yarn

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use yarn, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Fantasia Quasar Vue loads about 2.1k tokens when it runs. Until then it costs about 48 tokens; SKILL.md has 531 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~48
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from vishiri/fantasia-archive at commit 26d4648, republished under its GPL-3.0 licence (© vishiri). 531 words, ~2,084 tokens.

Download SKILL.mdSave it as .claude/skills/fantasia-quasar-vue/SKILL.md (or your agent's skills folder).
name
fantasia-quasar-vue
description
Builds Vue 3 + Quasar UI for Fantasia Archive: layouts, pages, router, Pinia, and boot files. Use when editing .vue files, Quasar components, routes, or stores under src/.

Fantasia Archive — Quasar and Vue

Stack

  • Node.js 22.22.0+ (package.json engines.node)
  • Vue 3 + Quasar (quasar v2, @quasar/app-vite)
  • Pinia (src/stores/); router src/router/
  • TypeScript; alias app/ → project root

Component folders (src/components/)

  • Helper / wrapper SFCs — five infrastructure features use _<PascalCase> folder + file — see AGENTS.md Renderer components. Not for dialog sub-panels.
  • dialogs/ — Dialog* modals. Root q-dialog refs in global open coordination → registerComponentDialogStackGuard or registerMarkdownDialogStackGuard from dialogManagement_manager.ts.
  • floatingWindows/ — Window* movable/resizable surfaces. _FaFloatingWindowBodyTeleport; useFaFloatingWindowFrame; no dialog stack guard. Z-index 5000–5999. Playbook: fantasia-floating-windows.
  • globals/ — chrome (GlobalWindowButtons, AppControlMenus, _FaUserCssInjector, …)
  • elements/ — reusable widgets (FaSelectInput, FaColorPickerInput, FaIconPickerInput, FaLocaleTranslationsInput, FaVerticalDraggableTabList, FaDeleteConfirmButton, …)
  • other/ — composites (SocialContactButtons)
  • foundation/ — Storybook-only catalogues; no product routes, no Playwright
  • Hierarchical trees — @he-tree/vue only; QTree forbidden — fantasia-he-tree
  • List / table reorder — vue-draggable-plus / v-draggable-table — fantasia-drag-drop

Locale L_*: i18n/<locale>/components/<bucket>/ mirrors buckets (foundation/ excluded). dialogs/, floatingWindows/ beside components/.

Layout and pages

  • Default chrome: MainLayout.vue, src/router/routes.ts
  • Global keybinds: MainLayout.vue registers keydown after S_FaKeybinds loads — fantasia-keybinds
  • Playground: ComponentTesting.vue + ComponentTestingLayout.vue
  • Storybook: src/components/**/_tests/<Component>.stories.ts, meta.title Components/<bucket>/<ComponentName>. Layout/page stories canvas-only — storybook-stories.mdc. Workspace: .storybook-workspace/

Single-file component block order (MUST)

Every .vue SFC: <template> → <script> / <script setup> → <style>. Never open script or style before template.

Quasar patterns

  • Prefer q-* + sibling spacing/typography patterns
  • Theme tokens: feature styles/_variables.scss, src/css/theme/quasar-components/, globals partials, app.palette.scss — see project-scss.mdc. --fa-color-* on :root in fa-theme.scss; semantic utilities in faSemanticText.scss. Do not reference raw palette $primary, $grey, … in <style> — use semantic tokens. After quasar-components/ edits: yarn audit:quasar-component-tokens. $ names use hyphens, not underscores.
  • Scrollable areas: class hasScrollbar — scrollbar.scss
  • Inline code: <code class="code-token">
  • Boot: src/boot/ — tooltip-defaults sets global q-tooltip delay (FA_Q_TOOLTIP_DELAY_MS, 500 ms)
  • import type for type-only imports
  • Templates: $t('...') — avoid useI18n only for t when template binding works
  • Context menu dividers — group primary-bright separator vs low-opacity separatorAlt between consecutive items in same group — fa-context-menu-dividers.mdc, fantasia-context-menu-dividers; helper contextMenuShouldShowSeparatorAltBeforeItem in AppControlMenus/scripts/functions/; SCSS mixin AppControlMenus/styles/_contextMenuSeparators.mixin.scss

public/ assets and Electron (file://) (MUST)

When import.meta.env.BASE_URL is '/' or empty, /images/... resolves to filesystem root under file://. Build public/ URLs with relative base (e.g. ./images/...). Example: SocialContactSingleButton.vue.

Show full SKILL.md (223 more words)Show less

Component _data/ (production structured payloads)

Large production data objects → src/components/<Feature>/_data/ (several .ts files OK). May use i18n, copy helpers, trigger handlers. Test fixtures stay inside test files — not _data/ or _tests/_data/.

Component scripts/ and SFC size (MUST)

  • ESLint limits: .vue ≤250, functions ≤100, .ts ≤250 — code-size-decomposition.mdc
  • Extract to scripts/*.ts, subcomponents, src/scripts/ when over limit. SCSS only under styles/ — component-styles-folder.mdc
  • Return object literals: identifiers/literals only in return { ... }
  • Fewer modules per concern until near caps — avoid 10–20 line one-export files
  • Distinct from _data/ and shared src/scripts/ — vue-quasar.mdc

Cursor rules for .vue files

TopicRule
Quasar, Composition API, i18n, extractionvue-quasar.mdc
BEM + scoped SCSSvue-bem-scss.mdc
Extracted stylescomponent-styles-folder.mdc
data-test-* hooksvue-template-test-hooks.mdc
Treesfa-he-tree.mdc
DnDfa-drag-drop-lists.mdc
Icon pickerfa-icon-picker.mdc
Select / chipsfa-select-input.mdc
Locale translations inputfa-locale-translations-input.mdc
Global SCSSproject-scss.mdc

Quality gates

Storybook i18n caution

  • Storybook mocks: focused L_* imports — not full locale roots (markdown documents/*.md break import analysis)
  • Placeholder documents.* in externalFileLoader.ts
  • No A11y/* stories; no stories that only exercise TEST_ENV === 'components' branches

Types

Shared types → types/ (app/types/...). See types-folder.mdc.

© vishiri, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .cursor/skills/fantasia-quasar-vue of vishiri/fantasia-archive.

Open the folder on GitHubat commit 26d4648

Compare with similar skills

Fantasia Quasar Vue next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Fantasia Quasar Vue compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Fantasia Quasar Vue this skillvishiri/fantasia-archive409—~2.1kAutomated safety check: PassGPL-3.0
Quasar Skilldskilld-dev/vue-ecosystem-skills181—~1.6kAutomated safety check: PassMIT
Front-End Checklist CLI Reviewthedaviddias/Front-End-Checklist74k—~692Automated safety check: PassMIT
Vue Nuxtericrisco/rsc-harness180—~4.2kAutomated safety check: PassMIT
Docs LookupProgrammerAnthony/Expert-Coding-Harness235—~640Automated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT

Similar skills

  • Quasar Skilld

    skilld-dev/vue-ecosystem-skills

    Build, configure, and debug apps with the Quasar framework (quasar npm package, v2.33.1).

    181 GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Front-End Checklist CLI Review

    thedaviddias/Front-End-Checklist

    Runs the frontendchecklist CLI against local files or a deployed URL to check code against 380+ accessibility, performance, SEO and security rules, with fixable, cited findings.

    74k GitHub stars~692 tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed
  • Vue Nuxt

    ericrisco/rsc-harness

    A skill your agent uses when building or reviewing a Vue 3 + Nuxt 4 app — <script setup reactivity, SSR/SSG/hybrid routeRules, the app/+server/ layout, SSR-safe fetching (useFetch/useAsyncData) and…

    180 GitHub stars~4.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Docs Lookup

    ProgrammerAnthony/Expert-Coding-Harness

    通过 Context7 MCP 获取库和框架的实时最新文档,而非依赖训练数据,防止 API 幻觉。适用于查询任何库或框架的用法、配置、示例代码。触发词:怎么用、怎么配置、API参考、文档、示例代码、用法、接口、库文档、框架文档、documentation、docs、how to use、API…

    235 GitHub stars~640 tokensUpdated 5 mo ago
    Frontend & DesignAuto-check passed
  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed
  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 3 repos~3.7k tokens
    Frontend & DesignAuto-check passed

More from vishiri/fantasia-archive

All 35 skills in this repo
  • Caveman Commit

    vishiri/fantasia-archive

    Ultra-compressed commit message generator. An agent skill from vishiri/fantasia-archive.

    409 GitHub starsUsed in 13 repos~642 tokens
    Auto-check passed
  • Caveman Review

    vishiri/fantasia-archive

    Ultra-compressed code review comments. An agent skill from vishiri/fantasia-archive.

    409 GitHub starsUsed in 12 repos~674 tokens
    Auto-check passed
  • Caveman Compress

    vishiri/fantasia-archive

    Compress natural language memory files (CLAUDE.md, todos, preferences) into caveman format to save input tokens.

    409 GitHub starsUsed in 9 repos~1.1k tokens
    Auto-check: notes
  • Cavecrew

    vishiri/fantasia-archive

    Decision guide for delegating to caveman-style subagents. An agent skill from vishiri/fantasia-archive.

    409 GitHub starsUsed in 7 repos~1k tokens
    Auto-check passed
  • Caveman Help

    vishiri/fantasia-archive

    Quick-reference card for all caveman modes, skills, and commands.

    409 GitHub starsUsed in 6 repos~572 tokens
    Auto-check passed
  • Fantasia Context Menu Dividers

    vishiri/fantasia-archive

    Context menu divider policy: full primary-bright group separators vs low-opacity separatorAlt between consecutive items in the same group.

    409 GitHub stars~741 tokensUpdated 3 days ago
    Auto-check passed

Works with

Questions about Fantasia Quasar Vue

What does Fantasia Quasar Vue do?

Builds Vue 3 + Quasar UI for Fantasia Archive: layouts, pages, router, Pinia, and boot files. Fantasia Quasar Vue is an agent skill from vishiri/fantasia-archive. Builds Vue 3 + Quasar UI for Fantasia Archive: layouts, pages, router, Pinia, and boot files.

When should I use Fantasia Quasar Vue?

Fantasia Quasar Vue fits situations like: editing .vue files; quasar components; stores under src/.

How do I install Fantasia Quasar Vue in Claude Code?

Run `npx skills add vishiri/fantasia-archive --skill fantasia-quasar-vue -a claude-code`. Or copy the skill folder (.cursor/skills/fantasia-quasar-vue in vishiri/fantasia-archive) into .claude/skills/fantasia-quasar-vue in your project. Claude Code loads it when a task matches its description.

How do I install Fantasia Quasar Vue in Codex?

Run `npx skills add vishiri/fantasia-archive --skill fantasia-quasar-vue -a codex`. Or copy the skill folder (.cursor/skills/fantasia-quasar-vue in vishiri/fantasia-archive) into .agents/skills/fantasia-quasar-vue in your project. Codex loads it when a task matches its description.

Can I use Fantasia Quasar Vue in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vishiri/fantasia-archive --skill fantasia-quasar-vue -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fantasia-quasar-vue, .gemini/skills/fantasia-quasar-vue, .github/skills/fantasia-quasar-vue and .opencode/skills/fantasia-quasar-vue in your project.

What does Fantasia Quasar Vue need to run?

Going by SKILL.md and its folder, Fantasia Quasar Vue needs the command-line tools its instructions call (yarn). Our summary lists: Node.js.

Does Fantasia Quasar Vue access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Fantasia Quasar Vue safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Fantasia Quasar Vue use?

Fantasia Quasar Vue is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Fantasia Quasar Vue use?

About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Fantasia Quasar Vue?

Skills that share tags, products or a category with Fantasia Quasar Vue: Quasar Skilld (skilld-dev/vue-ecosystem-skills, 181 stars), Front-End Checklist CLI Review (thedaviddias/Front-End-Checklist, 74k stars), Vue Nuxt (ericrisco/rsc-harness, 180 stars) and Docs Lookup (ProgrammerAnthony/Expert-Coding-Harness, 235 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Fantasia Quasar Vue?

vishiri (a GitHub user) maintains it in vishiri/fantasia-archive, which has 409 GitHub stars. The repository holds 35 skills in this directory. The repository was last updated on October 7, 2026.

Source: vishiri/fantasia-archive on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.