scip-vue-maintainability

name	scip-vue-maintainability
description	Review Vue maintainability with scip-query. Use for Vue, Nuxt, SFCs, duplicated templates, composable candidates, large views, frontend health pressure, or verifying Vue reuse after refactors.
commands	[{"template":"scip-query augment-vue --project <path-to-tsconfig>","when":"Bound and augment: add compiler-resolved Vue SFC references first."},{"template":"scip-query vue-component-duplicates --scope <scope> --full --json","when":"Scan: duplicated template structure candidates."},{"template":"scip-query vue-composable-candidates --scope <scope> --full --json","when":"Scan: shared state/lifecycle extraction candidates."},{"template":"scip-query vue-large-view-pressure --scope <scope> --full --json","when":"Scan: SFCs carrying several reasons to change."},{"template":"scip-query recent-duplicates --scope <scope> --full --json","when":"Scan: recent code re-implementing established components."},{"template":"scip-query health --json","when":"Scan: frontend health pressure baseline."}]

scip-vue-maintainability

Use this skill to review Vue frontends as maintainable systems of single-file components, templates, scripts, styles, external scripts, components, and composables.

Load shared mechanics from ../_shared/SKILL.md.

Commands for this skill

Command	Purpose	When
scip-query augment-vue --project <path-to-tsconfig>	Add compiler-resolved Vue SFC references to the SQLite index using Volar	Bound and augment: add compiler-resolved Vue SFC references first.
scip-query vue-component-duplicates --scope <scope> --full --json	Find heuristic duplicated Vue component structure candidates from template tags, bindings, slots, and directives	Scan: duplicated template structure candidates.
scip-query vue-composable-candidates --scope <scope> --full --json	Find heuristic Vue composable extraction candidates from shared state, effects, requests, and template bindings	Scan: shared state/lifecycle extraction candidates.
scip-query vue-large-view-pressure --scope <scope> --full --json	Find heuristic large Vue view pressure candidates from template, script, style, and external script line counts	Scan: SFCs carrying several reasons to change.
scip-query recent-duplicates --scope <scope> --full --json	Directional duplicate candidates: recent code that re-implements established callable, React, or Vue code	Scan: recent code re-implementing established components.
scip-query health --json	Composite codebase health report with prioritized action list	Scan: frontend health pressure baseline.

Use this shortlist first. Open ../_shared/SKILL.md only when it is insufficient.

Terms

A Vue component duplicate candidate is a pair or group of rendered structures that repeat the same user-facing arrangement, controls, states, or data-presentation shape enough that a shared component may reduce drift.

A Vue composable candidate is a pair or group of script behaviors that repeat the same state lifecycle, effects, requests, validation, persistence, or derived-data policy enough that a shared composable may preserve behavior better.

Large view pressure means one SFC or linked view file contains several kinds of knowledge that change for different reasons.

Workflow

1. Bound and augment

Pick the narrowest Vue source root, feature area, or changed-file scope that still includes likely reuse partners. When component references, imported composables, script blocks, or linked external scripts matter, run:

scip-query augment-vue --project <path-to-tsconfig>

This step is complete only when the review scope and augmentation decision are recorded.

2. Scan

Run uncapped commands:

scip-query vue-component-duplicates --scope <scope> --full --json
scip-query vue-composable-candidates --scope <scope> --full --json
scip-query vue-large-view-pressure --scope <scope> --full --json
scip-query recent-duplicates --scope <scope> --full --json
scip-query health --json

This step is complete only when command scope, counts, and uncapped/full status are recorded.

3. Cross-check candidates

• Component duplicate only: inspect for shared presentational component or existing component reuse.
• Composable candidate only: inspect for shared lifecycle, request, validation, persistence, event, or derived-state policy.
• Both: inspect for a feature-level concept needing both component and composable boundaries.
• Large view only: split by reason to change, not by line count.

Use:

scip-query outline <file>
scip-query deps <file>
scip-query rdeps <file>
scip-query similar-files --scope <scope>
scip-query recent-duplicates --scope <scope> --full --json

This step is complete only when each top candidate is reuse, extract, split, skip, or blocked.

4. Act and verify

Prefer reuse before extraction. Extract components for repeated template structure, props, slots, states, or design-system composition. Extract composables for repeated state, lifecycle, requests, validation, persistence, derived data, or event policy. Keep essential variation at the call site.

Run routed postchecks from the shared reference, including Vue commands, incomplete-migration, recent-duplicates, unused-params, and wrapper/passthrough/stale checks, then invoke scip-verify.

The work is complete only when acted-on candidate pairs disappear, weaken materially, or are explicitly accepted as essential variation.

False Positive Checks

Shared design-system primitives, CSS utilities, icons, labels, or test IDs are not enough. Similar templates with different domain lifecycles may justify a presentational component but not a composable. A large style block is pressure, not proof.

Report

Report executive read, command evidence, candidate groups, recommended action, post-change proof, and remaining accepted variation.