← ClaudeAtlas

vue-complexitylisted

Complexity thresholds for Vue 3 SFCs — cyclomatic complexity of the <script>/<script setup> block (per-function and aggregate) plus bespoke template metrics (nesting depth, directive density, conditional/loop branches, element count, binding count). Enforced by the generic BundleEngine on every .vue edit.
caiuswang/regin · ★ 3 · Web & Frontend · score 76
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