plankit-cli 1.3.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/README.md +53 -3
  2. package/package.json +1 -1
  3. package/src/agents.js +8 -4
  4. package/src/cli.js +106 -5
  5. package/src/commandBundles.js +105 -0
  6. package/src/config.js +20 -2
  7. package/templates/PLANKIT.md +7 -0
  8. package/templates/dotnet-commands/codex/dotnet-architecture-audit.md +25 -0
  9. package/templates/dotnet-commands/codex/dotnet-clean-guardrails.md +24 -0
  10. package/templates/dotnet-commands/codex/dotnet-ef-migration.md +25 -0
  11. package/templates/dotnet-commands/codex/dotnet-endpoint-from-model.md +26 -0
  12. package/templates/dotnet-commands/codex/dotnet-extract-service.md +25 -0
  13. package/templates/dotnet-commands/codex/dotnet-feature.md +26 -0
  14. package/templates/dotnet-commands/codex/dotnet-generate-tests.md +25 -0
  15. package/templates/dotnet-commands/codex/dotnet-health.md +24 -0
  16. package/templates/dotnet-commands/codex/dotnet-migrate-minimal-api.md +25 -0
  17. package/templates/dotnet-commands/codex/dotnet-modernize.md +25 -0
  18. package/templates/dotnet-commands/cursor/dotnet-architecture-audit.md +26 -0
  19. package/templates/dotnet-commands/cursor/dotnet-clean-guardrails.md +25 -0
  20. package/templates/dotnet-commands/cursor/dotnet-ef-migration.md +26 -0
  21. package/templates/dotnet-commands/cursor/dotnet-endpoint-from-model.md +27 -0
  22. package/templates/dotnet-commands/cursor/dotnet-extract-service.md +26 -0
  23. package/templates/dotnet-commands/cursor/dotnet-feature.md +27 -0
  24. package/templates/dotnet-commands/cursor/dotnet-generate-tests.md +26 -0
  25. package/templates/dotnet-commands/cursor/dotnet-health.md +25 -0
  26. package/templates/dotnet-commands/cursor/dotnet-migrate-minimal-api.md +26 -0
  27. package/templates/dotnet-commands/cursor/dotnet-modernize.md +26 -0
  28. package/templates/dotnet-commands/opencode/dotnet-architecture-audit.md +23 -0
  29. package/templates/dotnet-commands/opencode/dotnet-clean-guardrails.md +22 -0
  30. package/templates/dotnet-commands/opencode/dotnet-ef-migration.md +23 -0
  31. package/templates/dotnet-commands/opencode/dotnet-endpoint-from-model.md +24 -0
  32. package/templates/dotnet-commands/opencode/dotnet-extract-service.md +23 -0
  33. package/templates/dotnet-commands/opencode/dotnet-feature.md +24 -0
  34. package/templates/dotnet-commands/opencode/dotnet-generate-tests.md +23 -0
  35. package/templates/dotnet-commands/opencode/dotnet-health.md +22 -0
  36. package/templates/dotnet-commands/opencode/dotnet-migrate-minimal-api.md +23 -0
  37. package/templates/dotnet-commands/opencode/dotnet-modernize.md +23 -0
  38. package/templates/dotnet-skills/gemini/dotnet-architecture-audit/SKILL.md +26 -0
  39. package/templates/dotnet-skills/gemini/dotnet-clean-guardrails/SKILL.md +25 -0
  40. package/templates/dotnet-skills/gemini/dotnet-ef-migration/SKILL.md +26 -0
  41. package/templates/dotnet-skills/gemini/dotnet-endpoint-from-model/SKILL.md +27 -0
  42. package/templates/dotnet-skills/gemini/dotnet-extract-service/SKILL.md +26 -0
  43. package/templates/dotnet-skills/gemini/dotnet-feature/SKILL.md +27 -0
  44. package/templates/dotnet-skills/gemini/dotnet-generate-tests/SKILL.md +26 -0
  45. package/templates/dotnet-skills/gemini/dotnet-health/SKILL.md +25 -0
  46. package/templates/dotnet-skills/gemini/dotnet-migrate-minimal-api/SKILL.md +26 -0
  47. package/templates/dotnet-skills/gemini/dotnet-modernize/SKILL.md +26 -0
  48. package/templates/vue-commands/codex/component-pattern-audit.md +24 -0
  49. package/templates/vue-commands/codex/design-token-discover.md +24 -0
  50. package/templates/vue-commands/codex/design-token-migrate.md +24 -0
  51. package/templates/vue-commands/codex/js-to-ts.md +25 -0
  52. package/templates/vue-commands/codex/reactivity-audit.md +25 -0
  53. package/templates/vue-commands/codex/state-strategy-audit.md +23 -0
  54. package/templates/vue-commands/codex/vue-guardrails.md +24 -0
  55. package/templates/vue-commands/codex/vue-health.md +28 -0
  56. package/templates/vue-commands/codex/vue-legacy-map.md +25 -0
  57. package/templates/vue-commands/codex/vue-migration-plan.md +24 -0
  58. package/templates/vue-commands/codex/vue-modernize-slice.md +26 -0
  59. package/templates/vue-commands/codex/vue-pattern-map.md +24 -0
  60. package/templates/vue-commands/codex/vue-standardize.md +26 -0
  61. package/templates/vue-commands/codex/vue-style-audit.md +24 -0
  62. package/templates/vue-commands/codex/vue-target-architecture.md +24 -0
  63. package/templates/vue-commands/cursor/component-pattern-audit.md +25 -0
  64. package/templates/vue-commands/cursor/design-token-discover.md +25 -0
  65. package/templates/vue-commands/cursor/design-token-migrate.md +25 -0
  66. package/templates/vue-commands/cursor/js-to-ts.md +26 -0
  67. package/templates/vue-commands/cursor/reactivity-audit.md +26 -0
  68. package/templates/vue-commands/cursor/state-strategy-audit.md +24 -0
  69. package/templates/vue-commands/cursor/vue-guardrails.md +25 -0
  70. package/templates/vue-commands/cursor/vue-health.md +29 -0
  71. package/templates/vue-commands/cursor/vue-legacy-map.md +26 -0
  72. package/templates/vue-commands/cursor/vue-migration-plan.md +25 -0
  73. package/templates/vue-commands/cursor/vue-modernize-slice.md +27 -0
  74. package/templates/vue-commands/cursor/vue-pattern-map.md +25 -0
  75. package/templates/vue-commands/cursor/vue-standardize.md +27 -0
  76. package/templates/vue-commands/cursor/vue-style-audit.md +25 -0
  77. package/templates/vue-commands/cursor/vue-target-architecture.md +25 -0
  78. package/templates/vue-commands/opencode/component-pattern-audit.md +22 -0
  79. package/templates/vue-commands/opencode/design-token-discover.md +22 -0
  80. package/templates/vue-commands/opencode/design-token-migrate.md +22 -0
  81. package/templates/vue-commands/opencode/js-to-ts.md +23 -0
  82. package/templates/vue-commands/opencode/reactivity-audit.md +23 -0
  83. package/templates/vue-commands/opencode/state-strategy-audit.md +21 -0
  84. package/templates/vue-commands/opencode/vue-guardrails.md +22 -0
  85. package/templates/vue-commands/opencode/vue-health.md +26 -0
  86. package/templates/vue-commands/opencode/vue-legacy-map.md +23 -0
  87. package/templates/vue-commands/opencode/vue-migration-plan.md +22 -0
  88. package/templates/vue-commands/opencode/vue-modernize-slice.md +24 -0
  89. package/templates/vue-commands/opencode/vue-pattern-map.md +22 -0
  90. package/templates/vue-commands/opencode/vue-standardize.md +24 -0
  91. package/templates/vue-commands/opencode/vue-style-audit.md +22 -0
  92. package/templates/vue-commands/opencode/vue-target-architecture.md +22 -0
  93. package/templates/vue-skills/gemini/component-pattern-audit/SKILL.md +25 -0
  94. package/templates/vue-skills/gemini/design-token-discover/SKILL.md +25 -0
  95. package/templates/vue-skills/gemini/design-token-migrate/SKILL.md +25 -0
  96. package/templates/vue-skills/gemini/js-to-ts/SKILL.md +26 -0
  97. package/templates/vue-skills/gemini/reactivity-audit/SKILL.md +26 -0
  98. package/templates/vue-skills/gemini/state-strategy-audit/SKILL.md +24 -0
  99. package/templates/vue-skills/gemini/vue-guardrails/SKILL.md +25 -0
  100. package/templates/vue-skills/gemini/vue-health/SKILL.md +29 -0
  101. package/templates/vue-skills/gemini/vue-legacy-map/SKILL.md +26 -0
  102. package/templates/vue-skills/gemini/vue-migration-plan/SKILL.md +25 -0
  103. package/templates/vue-skills/gemini/vue-modernize-slice/SKILL.md +27 -0
  104. package/templates/vue-skills/gemini/vue-pattern-map/SKILL.md +25 -0
  105. package/templates/vue-skills/gemini/vue-standardize/SKILL.md +27 -0
  106. package/templates/vue-skills/gemini/vue-style-audit/SKILL.md +25 -0
  107. package/templates/vue-skills/gemini/vue-target-architecture/SKILL.md +25 -0
@@ -0,0 +1,25 @@
1
+ ---
2
+ description: Migrate hardcoded styles in Vue components to standardized design tokens or utility classes.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # design-token-migrate
7
+
8
+ # /design-token-migrate
9
+
10
+ Replace hardcoded colors, spacing, and typography with standardized design tokens.
11
+
12
+ ## Workflow
13
+ 1. Match target component styles against the token dictionary.
14
+ 2. Replace hardcoded literals with var(--token) or design system utility classes.
15
+ 3. Verify visual layout fidelity and verify responsive styling.
16
+ 4. Run component tests.
17
+
18
+ ## Guardrail
19
+ Preserve exact visual rendering. Retain fallback values when migrating tokens.
20
+
21
+ ## Options
22
+ - --dry-run preview style replacements without modifying files
23
+ - --interactive confirm each token replacement
24
+
25
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,26 @@
1
+ ---
2
+ description: Convert JavaScript Vue SFCs and utility modules to TypeScript with typed props and emits.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # js-to-ts
7
+
8
+ # /js-to-ts
9
+
10
+ Safely migrate JavaScript files and Vue SFCs to TypeScript with strict type definitions.
11
+
12
+ ## Workflow
13
+ 1. Rename .js to .ts, or set <script setup lang="ts"> in SFCs.
14
+ 2. Convert runtime props to defineProps<{ ... }>() with explicit interfaces.
15
+ 3. Convert runtime emits to defineEmits<{ ... }>() with typed payloads.
16
+ 4. Add typed interfaces for component state, API responses, and composable returns.
17
+ 5. Verify type check with vue-tsc or tsc --noEmit.
18
+
19
+ ## Guardrail
20
+ Do not use 'any' when types can be accurately inferred or declared.
21
+
22
+ ## Options
23
+ - --strict enforce strict typing without fallback assertions
24
+ - --dry-run show generated types before applying
25
+
26
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,26 @@
1
+ ---
2
+ description: Audit Vue reactivity anti-patterns (destructuring props, missing toRefs, watcher leaks).
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # reactivity-audit
7
+
8
+ # /reactivity-audit
9
+
10
+ Identify subtle Vue 3 reactivity bugs, lost reactivity, and memory leaks.
11
+
12
+ ## Workflow
13
+ 1. Check for destructured defineProps() without toRefs() or toValue() in reactive contexts.
14
+ 2. Detect direct prop mutation or nested prop mutations.
15
+ 3. Detect watch/watchEffect or window event listeners without cleanup in onUnmounted.
16
+ 4. Detect inappropriate mixing of ref and reactive.
17
+ 5. Produce fix recommendations with before/after code snippets.
18
+
19
+ ## Guardrail
20
+ Read-only reactivity analysis.
21
+
22
+ ## Options
23
+ - --path <dir> restrict check to specific directory
24
+ - --fix-suggestions include detailed refactoring suggestions
25
+
26
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,24 @@
1
+ ---
2
+ description: Audit Vuex vs Pinia vs composable store usage, identifying leaks and duplicate state.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # state-strategy-audit
7
+
8
+ # /state-strategy-audit
9
+
10
+ Analyze state management usage across the repository to identify state sprawl and duplication.
11
+
12
+ ## Workflow
13
+ 1. Map all stores (Vuex modules, Pinia stores, global reactive composables).
14
+ 2. Detect components accessing multiple state paradigms simultaneously.
15
+ 3. Flag duplicated domain state (e.g. user info stored in both Vuex and a composable).
16
+ 4. Provide migration roadmap for transitioning from Vuex to Pinia.
17
+
18
+ ## Guardrail
19
+ Read-only audit.
20
+
21
+ ## Options
22
+ - --json output state dependency map as JSON
23
+
24
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,25 @@
1
+ ---
2
+ description: Configure ESLint, TypeScript strict rules, and architectural boundaries to prevent regressions.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # vue-guardrails
7
+
8
+ # /vue-guardrails
9
+
10
+ Lock in modernization progress by establishing automated linter and compiler guardrails.
11
+
12
+ ## Workflow
13
+ 1. Inspect existing ESLint, TypeScript, and Prettier configurations.
14
+ 2. Add eslint-plugin-vue rules enforcing <script setup>, defineProps, and defineEmits.
15
+ 3. Disallow new Options API usage or deprecated APIs in modernized directories.
16
+ 4. Output recommended rule configurations.
17
+
18
+ ## Guardrail
19
+ Never break existing CI builds; introduce strict rules gradually or scoped to modern directories.
20
+
21
+ ## Options
22
+ - --apply apply recommended configurations to project config files
23
+ - --dry-run preview configuration changes
24
+
25
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,29 @@
1
+ ---
2
+ description: Audit Vue codebase health, tech debt score, Options vs Composition ratio, and modernization risks.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # vue-health
7
+
8
+ # /vue-health
9
+
10
+ Comprehensive diagnostic scan of Vue codebase health, architectural consistency, and tech debt.
11
+
12
+ ## Workflow
13
+ 1. Discover Vue version, build tooling (Vite/Webpack), language (JS/TS), package manager, and test runner.
14
+ 2. Scan SFCs for Options API vs Composition API vs <script setup>.
15
+ 3. Scan state management (Vuex vs Pinia vs composables vs local state).
16
+ 4. Scan data access (axios in SFCs vs api client vs TanStack Query / useFetch).
17
+ 5. Scan styling (global CSS/SCSS vs scoped vs CSS Modules vs Tailwind/utility).
18
+ 6. Calculate Health Score (0-100) and classify files into PREFERRED, TRANSITIONAL, and LEGACY.
19
+ 7. Output structured markdown diagnostic report with prioritized modernization recommendations.
20
+
21
+ ## Guardrail
22
+ Read-only diagnostic audit. Never modify files during health check.
23
+
24
+ ## Options
25
+ - --json output machine-readable JSON metrics
26
+ - --min-score <n> fail if health score is below threshold
27
+ - --path <dir> restrict analysis to specific directory
28
+
29
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,26 @@
1
+ ---
2
+ description: Catalog all legacy Vue files, mixins, filters, Options API components, and tech debt hotspots.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # vue-legacy-map
7
+
8
+ # /vue-legacy-map
9
+
10
+ Build an inventory of legacy code, deprecated APIs, and tech debt hotspots.
11
+
12
+ ## Workflow
13
+ 1. Scan for Options API components, this.$ references, mixins, event bus ($on/$emit), and filters.
14
+ 2. Detect deprecated CSS deep selectors (::v-deep, /deep/, >>>).
15
+ 3. Find legacy Vuex stores and mutation patterns.
16
+ 4. Assign migration complexity score (Low, Medium, High, Critical) based on size, coupling, and dependencies.
17
+ 5. Generate ranked migration backlog table.
18
+
19
+ ## Guardrail
20
+ Read-only inventory. Do not transform files.
21
+
22
+ ## Options
23
+ - --filter <type> filter by mixins, vuex, options, or deep-selectors
24
+ - --min-complexity <l> filter by complexity level
25
+
26
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,25 @@
1
+ ---
2
+ description: Generate a phased, low-risk migration plan for a legacy Vue feature or directory.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # vue-migration-plan
7
+
8
+ # /vue-migration-plan
9
+
10
+ Formulate an incremental, phased migration plan for a feature slice before code modifications.
11
+
12
+ ## Workflow
13
+ 1. Analyze dependencies and call paths of the target directory.
14
+ 2. Identify shared state, shared UI primitives, and data access layers.
15
+ 3. Divide migration into safe phases: (1) Leaf components, (2) State & data access, (3) Container/Page components, (4) Verification.
16
+ 4. Generate PlanKit phase specifications under artifacts/current/<feature>/phases/.
17
+
18
+ ## Guardrail
19
+ Enforce incremental migration over big-bang rewrites. Keep each phase independently testable.
20
+
21
+ ## Options
22
+ - --phases <n> number of migration phases (default: 3)
23
+ - --feature <name> name of the feature workspace
24
+
25
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,27 @@
1
+ ---
2
+ description: Perform an end-to-end modernization of a Vue feature slice with validation and guardrails.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # vue-modernize-slice
7
+
8
+ # /vue-modernize-slice
9
+
10
+ Orchestrate complete vertical slice modernization from legacy to target architecture.
11
+
12
+ ## Workflow
13
+ 1. Discover feature boundaries, templates, stores, and dependencies.
14
+ 2. Generate phased plan with vue-migration-plan.
15
+ 3. Modernize components: Options API -> <script setup>, JS -> TS, Vuex -> Pinia.
16
+ 4. Apply design tokens with design-token-migrate.
17
+ 5. Run vue-tsc, linter, and unit tests to verify zero regressions.
18
+
19
+ ## Guardrail
20
+ Maintain backward compatibility at every step. Do not commit failing builds.
21
+
22
+ ## Options
23
+ - --slice <dir> path to feature slice directory
24
+ - --dry-run preview all planned changes
25
+ - --no-tests skip running tests
26
+
27
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,25 @@
1
+ ---
2
+ description: Map architectural patterns across the Vue repository for state, data fetching, styling, and components.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # vue-pattern-map
7
+
8
+ # /vue-pattern-map
9
+
10
+ Map and categorize all coexisting architectural patterns across the Vue codebase.
11
+
12
+ ## Workflow
13
+ 1. Identify pattern categories: Component syntax, State management, Data fetching, Styling, Routing, Testing.
14
+ 2. Fingerprint each file into its matching pattern archetype.
15
+ 3. Cluster patterns and determine: PREFERRED (target), TRANSITIONAL, and LEGACY.
16
+ 4. Output a comprehensive pattern directory map and migration complexity ranking.
17
+
18
+ ## Guardrail
19
+ Do not assume repository majority equals target architecture in mixed legacy codebases.
20
+
21
+ ## Options
22
+ - --category <name> filter by category (state, data, styling, component)
23
+ - --json output pattern clusters as JSON
24
+
25
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,27 @@
1
+ ---
2
+ description: Refactor a Vue component or composable to conform to the established target architecture.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # vue-standardize
7
+
8
+ # /vue-standardize
9
+
10
+ Refactor a component or composable to align with target conventions with zero breaking changes.
11
+
12
+ ## Workflow
13
+ 1. Parse target SFC (script, template, style).
14
+ 2. Convert Options API to <script setup> with Composition API.
15
+ 3. Replace this.$store with Pinia store or reactive composable.
16
+ 4. Preserve public API (props, emits, exposed slots) to avoid breaking parent components.
17
+ 5. Verify TypeScript types and run component tests.
18
+
19
+ ## Guardrail
20
+ Never rewrite business logic. Always preserve component prop/event contracts and visual styling.
21
+
22
+ ## Options
23
+ - --dry-run preview changes without writing
24
+ - --no-tests skip running verification tests
25
+ - --interactive confirm transformations step by step
26
+
27
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,25 @@
1
+ ---
2
+ description: Audit styling patterns, global vs scoped CSS/SCSS, deep selectors, and hardcoded values.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # vue-style-audit
7
+
8
+ # /vue-style-audit
9
+
10
+ Analyze CSS/SCSS architecture, scoping violations, and hardcoded values across Vue components.
11
+
12
+ ## Workflow
13
+ 1. Catalog all <style> tags: scoped vs unscoped, lang (css, scss, less), and CSS Modules.
14
+ 2. Identify leaky global styles and deprecated deep selectors (::v-deep, /deep/).
15
+ 3. Detect hardcoded hex colors, magic numbers in margins/padding, font sizes, and z-indexes.
16
+ 4. Generate style report highlighting candidates for design token extraction.
17
+
18
+ ## Guardrail
19
+ Read-only style audit.
20
+
21
+ ## Options
22
+ - --json output style metrics as JSON
23
+ - --path <dir> restrict audit to specific directory
24
+
25
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,25 @@
1
+ ---
2
+ description: Define or inspect the target architectural conventions for modernizing the Vue application.
3
+ globs: **/*.vue, **/*.ts, **/*.js, **/*.scss, **/*.css
4
+ ---
5
+
6
+ # vue-target-architecture
7
+
8
+ # /vue-target-architecture
9
+
10
+ Establish and document the canonical target architecture for the repository.
11
+
12
+ ## Workflow
13
+ 1. Inspect existing modern slices or prompt for target conventions.
14
+ 2. Define target standards: Vue 3, <script setup>, TypeScript strictness, Pinia stores, styling foundation, testing framework.
15
+ 3. Classify patterns into PREFERRED, TRANSITIONAL, and LEGACY.
16
+ 4. Record target architectural profile in artifacts/VUE_TARGET.md for PlanKit commands to reference.
17
+
18
+ ## Guardrail
19
+ Require explicit target decisions before broad refactoring. Never guess without evidence.
20
+
21
+ ## Options
22
+ - --interactive guide through target architecture decisions
23
+ - --save persist target architecture to artifacts
24
+
25
+ Follow this workflow whenever asked to modernize, standardize, or audit Vue components in this repository.
@@ -0,0 +1,22 @@
1
+ ---
2
+ description: Audit SFC component design, god components, prop drilling, and emits declarations.
3
+ ---
4
+
5
+ # /component-pattern-audit
6
+
7
+ Evaluate component architecture, complexity, prop drilling, and API design.
8
+
9
+ ## Workflow
10
+ 1. Identify god components (> 400 lines, > 15 props, > 10 internal states).
11
+ 2. Detect undeclared emits ($emit used in template without defineEmits declaration).
12
+ 3. Flag prop drilling deeper than 3 levels where state management is preferable.
13
+ 4. Suggest logical component decomposition boundaries.
14
+
15
+ ## Guardrail
16
+ Read-only component evaluation.
17
+
18
+ ## Options
19
+ - --max-lines <n> line threshold for god component alert (default: 400)
20
+ - --json output metrics as JSON
21
+
22
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.
@@ -0,0 +1,22 @@
1
+ ---
2
+ description: Discover repeated color literals, typography, spacing, and shadows into design token candidates.
3
+ ---
4
+
5
+ # /design-token-discover
6
+
7
+ Mine CSS/SCSS and templates for repeated styling values to form design tokens.
8
+
9
+ ## Workflow
10
+ 1. Extract all color hex/rgb/hsl values, spacing dimensions, border radii, and font sizes.
11
+ 2. Cluster identical and near-identical values.
12
+ 3. Suggest semantic token names (--color-primary, --spacing-md, etc.).
13
+ 4. Generate candidate token definitions (CSS custom properties, Tailwind theme, or SCSS variables).
14
+
15
+ ## Guardrail
16
+ Do not automatically rewrite styles without approval.
17
+
18
+ ## Options
19
+ - --min-occurrences <n> minimum occurrences to qualify as token (default: 3)
20
+ - --output <file> output file for candidate tokens
21
+
22
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.
@@ -0,0 +1,22 @@
1
+ ---
2
+ description: Migrate hardcoded styles in Vue components to standardized design tokens or utility classes.
3
+ ---
4
+
5
+ # /design-token-migrate
6
+
7
+ Replace hardcoded colors, spacing, and typography with standardized design tokens.
8
+
9
+ ## Workflow
10
+ 1. Match target component styles against the token dictionary.
11
+ 2. Replace hardcoded literals with var(--token) or design system utility classes.
12
+ 3. Verify visual layout fidelity and verify responsive styling.
13
+ 4. Run component tests.
14
+
15
+ ## Guardrail
16
+ Preserve exact visual rendering. Retain fallback values when migrating tokens.
17
+
18
+ ## Options
19
+ - --dry-run preview style replacements without modifying files
20
+ - --interactive confirm each token replacement
21
+
22
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.
@@ -0,0 +1,23 @@
1
+ ---
2
+ description: Convert JavaScript Vue SFCs and utility modules to TypeScript with typed props and emits.
3
+ ---
4
+
5
+ # /js-to-ts
6
+
7
+ Safely migrate JavaScript files and Vue SFCs to TypeScript with strict type definitions.
8
+
9
+ ## Workflow
10
+ 1. Rename .js to .ts, or set <script setup lang="ts"> in SFCs.
11
+ 2. Convert runtime props to defineProps<{ ... }>() with explicit interfaces.
12
+ 3. Convert runtime emits to defineEmits<{ ... }>() with typed payloads.
13
+ 4. Add typed interfaces for component state, API responses, and composable returns.
14
+ 5. Verify type check with vue-tsc or tsc --noEmit.
15
+
16
+ ## Guardrail
17
+ Do not use 'any' when types can be accurately inferred or declared.
18
+
19
+ ## Options
20
+ - --strict enforce strict typing without fallback assertions
21
+ - --dry-run show generated types before applying
22
+
23
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.
@@ -0,0 +1,23 @@
1
+ ---
2
+ description: Audit Vue reactivity anti-patterns (destructuring props, missing toRefs, watcher leaks).
3
+ ---
4
+
5
+ # /reactivity-audit
6
+
7
+ Identify subtle Vue 3 reactivity bugs, lost reactivity, and memory leaks.
8
+
9
+ ## Workflow
10
+ 1. Check for destructured defineProps() without toRefs() or toValue() in reactive contexts.
11
+ 2. Detect direct prop mutation or nested prop mutations.
12
+ 3. Detect watch/watchEffect or window event listeners without cleanup in onUnmounted.
13
+ 4. Detect inappropriate mixing of ref and reactive.
14
+ 5. Produce fix recommendations with before/after code snippets.
15
+
16
+ ## Guardrail
17
+ Read-only reactivity analysis.
18
+
19
+ ## Options
20
+ - --path <dir> restrict check to specific directory
21
+ - --fix-suggestions include detailed refactoring suggestions
22
+
23
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.
@@ -0,0 +1,21 @@
1
+ ---
2
+ description: Audit Vuex vs Pinia vs composable store usage, identifying leaks and duplicate state.
3
+ ---
4
+
5
+ # /state-strategy-audit
6
+
7
+ Analyze state management usage across the repository to identify state sprawl and duplication.
8
+
9
+ ## Workflow
10
+ 1. Map all stores (Vuex modules, Pinia stores, global reactive composables).
11
+ 2. Detect components accessing multiple state paradigms simultaneously.
12
+ 3. Flag duplicated domain state (e.g. user info stored in both Vuex and a composable).
13
+ 4. Provide migration roadmap for transitioning from Vuex to Pinia.
14
+
15
+ ## Guardrail
16
+ Read-only audit.
17
+
18
+ ## Options
19
+ - --json output state dependency map as JSON
20
+
21
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.
@@ -0,0 +1,22 @@
1
+ ---
2
+ description: Configure ESLint, TypeScript strict rules, and architectural boundaries to prevent regressions.
3
+ ---
4
+
5
+ # /vue-guardrails
6
+
7
+ Lock in modernization progress by establishing automated linter and compiler guardrails.
8
+
9
+ ## Workflow
10
+ 1. Inspect existing ESLint, TypeScript, and Prettier configurations.
11
+ 2. Add eslint-plugin-vue rules enforcing <script setup>, defineProps, and defineEmits.
12
+ 3. Disallow new Options API usage or deprecated APIs in modernized directories.
13
+ 4. Output recommended rule configurations.
14
+
15
+ ## Guardrail
16
+ Never break existing CI builds; introduce strict rules gradually or scoped to modern directories.
17
+
18
+ ## Options
19
+ - --apply apply recommended configurations to project config files
20
+ - --dry-run preview configuration changes
21
+
22
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.
@@ -0,0 +1,26 @@
1
+ ---
2
+ description: Audit Vue codebase health, tech debt score, Options vs Composition ratio, and modernization risks.
3
+ ---
4
+
5
+ # /vue-health
6
+
7
+ Comprehensive diagnostic scan of Vue codebase health, architectural consistency, and tech debt.
8
+
9
+ ## Workflow
10
+ 1. Discover Vue version, build tooling (Vite/Webpack), language (JS/TS), package manager, and test runner.
11
+ 2. Scan SFCs for Options API vs Composition API vs <script setup>.
12
+ 3. Scan state management (Vuex vs Pinia vs composables vs local state).
13
+ 4. Scan data access (axios in SFCs vs api client vs TanStack Query / useFetch).
14
+ 5. Scan styling (global CSS/SCSS vs scoped vs CSS Modules vs Tailwind/utility).
15
+ 6. Calculate Health Score (0-100) and classify files into PREFERRED, TRANSITIONAL, and LEGACY.
16
+ 7. Output structured markdown diagnostic report with prioritized modernization recommendations.
17
+
18
+ ## Guardrail
19
+ Read-only diagnostic audit. Never modify files during health check.
20
+
21
+ ## Options
22
+ - --json output machine-readable JSON metrics
23
+ - --min-score <n> fail if health score is below threshold
24
+ - --path <dir> restrict analysis to specific directory
25
+
26
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.
@@ -0,0 +1,23 @@
1
+ ---
2
+ description: Catalog all legacy Vue files, mixins, filters, Options API components, and tech debt hotspots.
3
+ ---
4
+
5
+ # /vue-legacy-map
6
+
7
+ Build an inventory of legacy code, deprecated APIs, and tech debt hotspots.
8
+
9
+ ## Workflow
10
+ 1. Scan for Options API components, this.$ references, mixins, event bus ($on/$emit), and filters.
11
+ 2. Detect deprecated CSS deep selectors (::v-deep, /deep/, >>>).
12
+ 3. Find legacy Vuex stores and mutation patterns.
13
+ 4. Assign migration complexity score (Low, Medium, High, Critical) based on size, coupling, and dependencies.
14
+ 5. Generate ranked migration backlog table.
15
+
16
+ ## Guardrail
17
+ Read-only inventory. Do not transform files.
18
+
19
+ ## Options
20
+ - --filter <type> filter by mixins, vuex, options, or deep-selectors
21
+ - --min-complexity <l> filter by complexity level
22
+
23
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.
@@ -0,0 +1,22 @@
1
+ ---
2
+ description: Generate a phased, low-risk migration plan for a legacy Vue feature or directory.
3
+ ---
4
+
5
+ # /vue-migration-plan
6
+
7
+ Formulate an incremental, phased migration plan for a feature slice before code modifications.
8
+
9
+ ## Workflow
10
+ 1. Analyze dependencies and call paths of the target directory.
11
+ 2. Identify shared state, shared UI primitives, and data access layers.
12
+ 3. Divide migration into safe phases: (1) Leaf components, (2) State & data access, (3) Container/Page components, (4) Verification.
13
+ 4. Generate PlanKit phase specifications under artifacts/current/<feature>/phases/.
14
+
15
+ ## Guardrail
16
+ Enforce incremental migration over big-bang rewrites. Keep each phase independently testable.
17
+
18
+ ## Options
19
+ - --phases <n> number of migration phases (default: 3)
20
+ - --feature <name> name of the feature workspace
21
+
22
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.
@@ -0,0 +1,24 @@
1
+ ---
2
+ description: Perform an end-to-end modernization of a Vue feature slice with validation and guardrails.
3
+ ---
4
+
5
+ # /vue-modernize-slice
6
+
7
+ Orchestrate complete vertical slice modernization from legacy to target architecture.
8
+
9
+ ## Workflow
10
+ 1. Discover feature boundaries, templates, stores, and dependencies.
11
+ 2. Generate phased plan with vue-migration-plan.
12
+ 3. Modernize components: Options API -> <script setup>, JS -> TS, Vuex -> Pinia.
13
+ 4. Apply design tokens with design-token-migrate.
14
+ 5. Run vue-tsc, linter, and unit tests to verify zero regressions.
15
+
16
+ ## Guardrail
17
+ Maintain backward compatibility at every step. Do not commit failing builds.
18
+
19
+ ## Options
20
+ - --slice <dir> path to feature slice directory
21
+ - --dry-run preview all planned changes
22
+ - --no-tests skip running tests
23
+
24
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.
@@ -0,0 +1,22 @@
1
+ ---
2
+ description: Map architectural patterns across the Vue repository for state, data fetching, styling, and components.
3
+ ---
4
+
5
+ # /vue-pattern-map
6
+
7
+ Map and categorize all coexisting architectural patterns across the Vue codebase.
8
+
9
+ ## Workflow
10
+ 1. Identify pattern categories: Component syntax, State management, Data fetching, Styling, Routing, Testing.
11
+ 2. Fingerprint each file into its matching pattern archetype.
12
+ 3. Cluster patterns and determine: PREFERRED (target), TRANSITIONAL, and LEGACY.
13
+ 4. Output a comprehensive pattern directory map and migration complexity ranking.
14
+
15
+ ## Guardrail
16
+ Do not assume repository majority equals target architecture in mixed legacy codebases.
17
+
18
+ ## Options
19
+ - --category <name> filter by category (state, data, styling, component)
20
+ - --json output pattern clusters as JSON
21
+
22
+ Run against a Vue repository. Perform repository context discovery first, then apply the workflow.