vue-complexitylisted
Install: claude install-skill caiuswang/regin
# vue-complexity
Use this skill when writing or editing `.vue` files — or the `.js`/`.ts`
composables and utils a component's logic is extracted into — in this repo.
regin runs a complexity rule bundle on every such edit and warns when the code
crosses the configured thresholds. Keep edits under these limits, or split the
component / function.
The JS/TS check exists so that splitting a god-component into a composable
*actually* reduces complexity instead of relocating it to an unchecked file.
## What is measured
Three families. The `.vue` script + template are parsed from the SFC by
`@vue/compiler-sfc`; the JS/TS check runs on raw module files.
### Script (`<script>` / `<script setup>`)
Cyclomatic complexity is computed over the script block with `@babel/parser`.
Because `<script setup>` puts logic at module top level (outside any function),
the bundle reports BOTH a per-function score and a whole-script aggregate — the
aggregate is what catches an over-loaded `setup` that per-function tools miss.
| Rule | Metric | Threshold |
|------|--------|-----------|
| `vue.script.cyclomatic-function` | max per-function cyclomatic complexity | 15 |
| `vue.script.cyclomatic-module` | whole-script aggregate cyclomatic complexity | 130 |
| `vue.script.function-length` | longest function, in lines | 60 |
| `vue.script.surface-area` | top-level reactive decls + functions | 45 |
`surface-area` is the **god-component** signal the cyclomatic checks miss: many
*simple* refs and functions