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