plankit-cli 1.3.1 → 1.4.0

package/templates/vue-commands/opencode/vue-standardize.md

@@ -0,0 +1,24 @@
+---
+description: Refactor a Vue component or composable to conform to the established target architecture.
+---
+
+# /vue-standardize
+
+Refactor a component or composable to align with target conventions with zero breaking changes.
+
+## Workflow
+1. Parse target SFC (script, template, style).
+2. Convert Options API to <script setup> with Composition API.
+3. Replace this.$store with Pinia store or reactive composable.
+4. Preserve public API (props, emits, exposed slots) to avoid breaking parent components.
+5. Verify TypeScript types and run component tests.
+
+## Guardrail
+Never rewrite business logic. Always preserve component prop/event contracts and visual styling.
+
+## Options
+- --dry-run           preview changes without writing
+- --no-tests          skip running verification tests
+- --interactive       confirm transformations step by step
+
+Run against a Vue repository. Perform repository context discovery first, then apply the workflow.

package/templates/vue-commands/opencode/vue-style-audit.md

@@ -0,0 +1,22 @@
+---
+description: Audit styling patterns, global vs scoped CSS/SCSS, deep selectors, and hardcoded values.
+---
+
+# /vue-style-audit
+
+Analyze CSS/SCSS architecture, scoping violations, and hardcoded values across Vue components.
+
+## Workflow
+1. Catalog all <style> tags: scoped vs unscoped, lang (css, scss, less), and CSS Modules.
+2. Identify leaky global styles and deprecated deep selectors (::v-deep, /deep/).
+3. Detect hardcoded hex colors, magic numbers in margins/padding, font sizes, and z-indexes.
+4. Generate style report highlighting candidates for design token extraction.
+
+## Guardrail
+Read-only style audit.
+
+## Options
+- --json              output style metrics as JSON
+- --path <dir>        restrict audit to specific directory
+
+Run against a Vue repository. Perform repository context discovery first, then apply the workflow.

package/templates/vue-commands/opencode/vue-target-architecture.md

@@ -0,0 +1,22 @@
+---
+description: Define or inspect the target architectural conventions for modernizing the Vue application.
+---
+
+# /vue-target-architecture
+
+Establish and document the canonical target architecture for the repository.
+
+## Workflow
+1. Inspect existing modern slices or prompt for target conventions.
+2. Define target standards: Vue 3, <script setup>, TypeScript strictness, Pinia stores, styling foundation, testing framework.
+3. Classify patterns into PREFERRED, TRANSITIONAL, and LEGACY.
+4. Record target architectural profile in artifacts/VUE_TARGET.md for PlanKit commands to reference.
+
+## Guardrail
+Require explicit target decisions before broad refactoring. Never guess without evidence.
+
+## Options
+- --interactive       guide through target architecture decisions
+- --save              persist target architecture to artifacts
+
+Run against a Vue repository. Perform repository context discovery first, then apply the workflow.

package/templates/vue-skills/gemini/component-pattern-audit/SKILL.md

@@ -0,0 +1,25 @@
+---
+name: component-pattern-audit
+description: Audit SFC component design, god components, prop drilling, and emits declarations.
+---
+
+# /component-pattern-audit
+
+Evaluate component architecture, complexity, prop drilling, and API design.
+
+## Workflow
+1. Identify god components (> 400 lines, > 15 props, > 10 internal states).
+2. Detect undeclared emits ($emit used in template without defineEmits declaration).
+3. Flag prop drilling deeper than 3 levels where state management is preferable.
+4. Suggest logical component decomposition boundaries.
+
+## Guardrail
+Read-only component evaluation.
+
+## Options
+- --max-lines <n>     line threshold for god component alert (default: 400)
+- --json              output metrics as JSON
+
+# component-pattern-audit
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/design-token-discover/SKILL.md

@@ -0,0 +1,25 @@
+---
+name: design-token-discover
+description: Discover repeated color literals, typography, spacing, and shadows into design token candidates.
+---
+
+# /design-token-discover
+
+Mine CSS/SCSS and templates for repeated styling values to form design tokens.
+
+## Workflow
+1. Extract all color hex/rgb/hsl values, spacing dimensions, border radii, and font sizes.
+2. Cluster identical and near-identical values.
+3. Suggest semantic token names (--color-primary, --spacing-md, etc.).
+4. Generate candidate token definitions (CSS custom properties, Tailwind theme, or SCSS variables).
+
+## Guardrail
+Do not automatically rewrite styles without approval.
+
+## Options
+- --min-occurrences <n> minimum occurrences to qualify as token (default: 3)
+- --output <file>       output file for candidate tokens
+
+# design-token-discover
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/design-token-migrate/SKILL.md

@@ -0,0 +1,25 @@
+---
+name: design-token-migrate
+description: Migrate hardcoded styles in Vue components to standardized design tokens or utility classes.
+---
+
+# /design-token-migrate
+
+Replace hardcoded colors, spacing, and typography with standardized design tokens.
+
+## Workflow
+1. Match target component styles against the token dictionary.
+2. Replace hardcoded literals with var(--token) or design system utility classes.
+3. Verify visual layout fidelity and verify responsive styling.
+4. Run component tests.
+
+## Guardrail
+Preserve exact visual rendering. Retain fallback values when migrating tokens.
+
+## Options
+- --dry-run           preview style replacements without modifying files
+- --interactive       confirm each token replacement
+
+# design-token-migrate
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/js-to-ts/SKILL.md

@@ -0,0 +1,26 @@
+---
+name: js-to-ts
+description: Convert JavaScript Vue SFCs and utility modules to TypeScript with typed props and emits.
+---
+
+# /js-to-ts
+
+Safely migrate JavaScript files and Vue SFCs to TypeScript with strict type definitions.
+
+## Workflow
+1. Rename .js to .ts, or set <script setup lang="ts"> in SFCs.
+2. Convert runtime props to defineProps<{ ... }>() with explicit interfaces.
+3. Convert runtime emits to defineEmits<{ ... }>() with typed payloads.
+4. Add typed interfaces for component state, API responses, and composable returns.
+5. Verify type check with vue-tsc or tsc --noEmit.
+
+## Guardrail
+Do not use 'any' when types can be accurately inferred or declared.
+
+## Options
+- --strict            enforce strict typing without fallback assertions
+- --dry-run           show generated types before applying
+
+# js-to-ts
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/reactivity-audit/SKILL.md

@@ -0,0 +1,26 @@
+---
+name: reactivity-audit
+description: Audit Vue reactivity anti-patterns (destructuring props, missing toRefs, watcher leaks).
+---
+
+# /reactivity-audit
+
+Identify subtle Vue 3 reactivity bugs, lost reactivity, and memory leaks.
+
+## Workflow
+1. Check for destructured defineProps() without toRefs() or toValue() in reactive contexts.
+2. Detect direct prop mutation or nested prop mutations.
+3. Detect watch/watchEffect or window event listeners without cleanup in onUnmounted.
+4. Detect inappropriate mixing of ref and reactive.
+5. Produce fix recommendations with before/after code snippets.
+
+## Guardrail
+Read-only reactivity analysis.
+
+## Options
+- --path <dir>        restrict check to specific directory
+- --fix-suggestions   include detailed refactoring suggestions
+
+# reactivity-audit
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/state-strategy-audit/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: state-strategy-audit
+description: Audit Vuex vs Pinia vs composable store usage, identifying leaks and duplicate state.
+---
+
+# /state-strategy-audit
+
+Analyze state management usage across the repository to identify state sprawl and duplication.
+
+## Workflow
+1. Map all stores (Vuex modules, Pinia stores, global reactive composables).
+2. Detect components accessing multiple state paradigms simultaneously.
+3. Flag duplicated domain state (e.g. user info stored in both Vuex and a composable).
+4. Provide migration roadmap for transitioning from Vuex to Pinia.
+
+## Guardrail
+Read-only audit.
+
+## Options
+- --json              output state dependency map as JSON
+
+# state-strategy-audit
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/vue-guardrails/SKILL.md

@@ -0,0 +1,25 @@
+---
+name: vue-guardrails
+description: Configure ESLint, TypeScript strict rules, and architectural boundaries to prevent regressions.
+---
+
+# /vue-guardrails
+
+Lock in modernization progress by establishing automated linter and compiler guardrails.
+
+## Workflow
+1. Inspect existing ESLint, TypeScript, and Prettier configurations.
+2. Add eslint-plugin-vue rules enforcing <script setup>, defineProps, and defineEmits.
+3. Disallow new Options API usage or deprecated APIs in modernized directories.
+4. Output recommended rule configurations.
+
+## Guardrail
+Never break existing CI builds; introduce strict rules gradually or scoped to modern directories.
+
+## Options
+- --apply             apply recommended configurations to project config files
+- --dry-run           preview configuration changes
+
+# vue-guardrails
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/vue-health/SKILL.md

@@ -0,0 +1,29 @@
+---
+name: vue-health
+description: Audit Vue codebase health, tech debt score, Options vs Composition ratio, and modernization risks.
+---
+
+# /vue-health
+
+Comprehensive diagnostic scan of Vue codebase health, architectural consistency, and tech debt.
+
+## Workflow
+1. Discover Vue version, build tooling (Vite/Webpack), language (JS/TS), package manager, and test runner.
+2. Scan SFCs for Options API vs Composition API vs <script setup>.
+3. Scan state management (Vuex vs Pinia vs composables vs local state).
+4. Scan data access (axios in SFCs vs api client vs TanStack Query / useFetch).
+5. Scan styling (global CSS/SCSS vs scoped vs CSS Modules vs Tailwind/utility).
+6. Calculate Health Score (0-100) and classify files into PREFERRED, TRANSITIONAL, and LEGACY.
+7. Output structured markdown diagnostic report with prioritized modernization recommendations.
+
+## Guardrail
+Read-only diagnostic audit. Never modify files during health check.
+
+## Options
+- --json              output machine-readable JSON metrics
+- --min-score <n>     fail if health score is below threshold
+- --path <dir>        restrict analysis to specific directory
+
+# vue-health
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/vue-legacy-map/SKILL.md

@@ -0,0 +1,26 @@
+---
+name: vue-legacy-map
+description: Catalog all legacy Vue files, mixins, filters, Options API components, and tech debt hotspots.
+---
+
+# /vue-legacy-map
+
+Build an inventory of legacy code, deprecated APIs, and tech debt hotspots.
+
+## Workflow
+1. Scan for Options API components, this.$ references, mixins, event bus ($on/$emit), and filters.
+2. Detect deprecated CSS deep selectors (::v-deep, /deep/, >>>).
+3. Find legacy Vuex stores and mutation patterns.
+4. Assign migration complexity score (Low, Medium, High, Critical) based on size, coupling, and dependencies.
+5. Generate ranked migration backlog table.
+
+## Guardrail
+Read-only inventory. Do not transform files.
+
+## Options
+- --filter <type>     filter by mixins, vuex, options, or deep-selectors
+- --min-complexity <l> filter by complexity level
+
+# vue-legacy-map
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/vue-migration-plan/SKILL.md

@@ -0,0 +1,25 @@
+---
+name: vue-migration-plan
+description: Generate a phased, low-risk migration plan for a legacy Vue feature or directory.
+---
+
+# /vue-migration-plan
+
+Formulate an incremental, phased migration plan for a feature slice before code modifications.
+
+## Workflow
+1. Analyze dependencies and call paths of the target directory.
+2. Identify shared state, shared UI primitives, and data access layers.
+3. Divide migration into safe phases: (1) Leaf components, (2) State & data access, (3) Container/Page components, (4) Verification.
+4. Generate PlanKit phase specifications under artifacts/current/<feature>/phases/.
+
+## Guardrail
+Enforce incremental migration over big-bang rewrites. Keep each phase independently testable.
+
+## Options
+- --phases <n>        number of migration phases (default: 3)
+- --feature <name>    name of the feature workspace
+
+# vue-migration-plan
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/vue-modernize-slice/SKILL.md

@@ -0,0 +1,27 @@
+---
+name: vue-modernize-slice
+description: Perform an end-to-end modernization of a Vue feature slice with validation and guardrails.
+---
+
+# /vue-modernize-slice
+
+Orchestrate complete vertical slice modernization from legacy to target architecture.
+
+## Workflow
+1. Discover feature boundaries, templates, stores, and dependencies.
+2. Generate phased plan with vue-migration-plan.
+3. Modernize components: Options API -> <script setup>, JS -> TS, Vuex -> Pinia.
+4. Apply design tokens with design-token-migrate.
+5. Run vue-tsc, linter, and unit tests to verify zero regressions.
+
+## Guardrail
+Maintain backward compatibility at every step. Do not commit failing builds.
+
+## Options
+- --slice <dir>       path to feature slice directory
+- --dry-run           preview all planned changes
+- --no-tests          skip running tests
+
+# vue-modernize-slice
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/vue-pattern-map/SKILL.md

@@ -0,0 +1,25 @@
+---
+name: vue-pattern-map
+description: Map architectural patterns across the Vue repository for state, data fetching, styling, and components.
+---
+
+# /vue-pattern-map
+
+Map and categorize all coexisting architectural patterns across the Vue codebase.
+
+## Workflow
+1. Identify pattern categories: Component syntax, State management, Data fetching, Styling, Routing, Testing.
+2. Fingerprint each file into its matching pattern archetype.
+3. Cluster patterns and determine: PREFERRED (target), TRANSITIONAL, and LEGACY.
+4. Output a comprehensive pattern directory map and migration complexity ranking.
+
+## Guardrail
+Do not assume repository majority equals target architecture in mixed legacy codebases.
+
+## Options
+- --category <name>   filter by category (state, data, styling, component)
+- --json              output pattern clusters as JSON
+
+# vue-pattern-map
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/vue-standardize/SKILL.md

@@ -0,0 +1,27 @@
+---
+name: vue-standardize
+description: Refactor a Vue component or composable to conform to the established target architecture.
+---
+
+# /vue-standardize
+
+Refactor a component or composable to align with target conventions with zero breaking changes.
+
+## Workflow
+1. Parse target SFC (script, template, style).
+2. Convert Options API to <script setup> with Composition API.
+3. Replace this.$store with Pinia store or reactive composable.
+4. Preserve public API (props, emits, exposed slots) to avoid breaking parent components.
+5. Verify TypeScript types and run component tests.
+
+## Guardrail
+Never rewrite business logic. Always preserve component prop/event contracts and visual styling.
+
+## Options
+- --dry-run           preview changes without writing
+- --no-tests          skip running verification tests
+- --interactive       confirm transformations step by step
+
+# vue-standardize
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/vue-style-audit/SKILL.md

@@ -0,0 +1,25 @@
+---
+name: vue-style-audit
+description: Audit styling patterns, global vs scoped CSS/SCSS, deep selectors, and hardcoded values.
+---
+
+# /vue-style-audit
+
+Analyze CSS/SCSS architecture, scoping violations, and hardcoded values across Vue components.
+
+## Workflow
+1. Catalog all <style> tags: scoped vs unscoped, lang (css, scss, less), and CSS Modules.
+2. Identify leaky global styles and deprecated deep selectors (::v-deep, /deep/).
+3. Detect hardcoded hex colors, magic numbers in margins/padding, font sizes, and z-indexes.
+4. Generate style report highlighting candidates for design token extraction.
+
+## Guardrail
+Read-only style audit.
+
+## Options
+- --json              output style metrics as JSON
+- --path <dir>        restrict audit to specific directory
+
+# vue-style-audit
+
+Execute the workflow with the target arguments from the request.

package/templates/vue-skills/gemini/vue-target-architecture/SKILL.md

@@ -0,0 +1,25 @@
+---
+name: vue-target-architecture
+description: Define or inspect the target architectural conventions for modernizing the Vue application.
+---
+
+# /vue-target-architecture
+
+Establish and document the canonical target architecture for the repository.
+
+## Workflow
+1. Inspect existing modern slices or prompt for target conventions.
+2. Define target standards: Vue 3, <script setup>, TypeScript strictness, Pinia stores, styling foundation, testing framework.
+3. Classify patterns into PREFERRED, TRANSITIONAL, and LEGACY.
+4. Record target architectural profile in artifacts/VUE_TARGET.md for PlanKit commands to reference.
+
+## Guardrail
+Require explicit target decisions before broad refactoring. Never guess without evidence.
+
+## Options
+- --interactive       guide through target architecture decisions
+- --save              persist target architecture to artifacts
+
+# vue-target-architecture
+
+Execute the workflow with the target arguments from the request.