Quasar Development

Quasar Development

Establish the project context

1. Read repository instructions and the root package.json before editing.
2. Detect the package manager from its lockfile and use it consistently.
3. Inspect quasar.config.*, the @quasar/app-vite version, enabled boot files, router, store, and active mode.
4. Preserve existing conventions and unrelated work. Do not replace Quasar CLI configuration with raw Vite configuration.
5. Consult the Quasar documentation and the installed package types before assuming an API or configuration field.

Implement with Quasar conventions

• Prefer Quasar components, directives, plugins, CSS variables, Sass variables, and utilities when they satisfy the requirement.
• Import Quasar plugins used outside templates and register/configure them through quasar.config.* when required.
• Put application startup integrations in boot files; respect their client/server execution context.
• Use layouts and router-view for page shells. Keep route definitions lazy unless eager loading is intentional.
• Use process.env.CLIENT, process.env.SERVER, and mode flags only where Quasar exposes them; avoid direct browser globals in universal code.
• Preserve tree shaking. Do not import all of Quasar or manually register components in a CLI project without a demonstrated need.
• Keep accessibility semantics, keyboard interaction, focus behavior, reduced motion, dark mode, and responsive layouts intact.
• Treat generated .quasar/ and dist/ content as disposable output; never edit or commit it.

Configure safely

• Make changes through defineConfig() in quasar.config.*.
• Distinguish build-time configuration from runtime application state.
• Use build.env deliberately; never expose server secrets to client bundles.
• Extend bundler configuration through the supported Quasar hooks and preserve existing aliases/plugins.
• Run quasar prepare after configuration or dependency changes when generated types may be stale.

Validate

1. Run the narrowest relevant unit or component tests.
2. Run the repository's typecheck, lint, and formatting checks.
3. Build the affected Quasar mode, not only the default SPA mode.
4. Exercise the changed behavior in development when it depends on routing, boot order, browser APIs, or HMR.
5. Check the final diff for generated output, secrets, unrelated formatting, and lockfile churn.

Route specialized work

Load the matching mode skill for platform-specific configuration and validation. Load quasar-app-extension-development for src/index.*, Install API, Prompts API, templates, and extension lifecycle work.