[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-jetbrains-vue-best-practices":3,"mdc--9197kw-key":36,"related-repo-jetbrains-vue-best-practices":1058,"related-org-jetbrains-vue-best-practices":1180},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":31,"sourceUrl":34,"mdContent":35},"vue-best-practices","implement Vue.js best practices","MUST be used for Vue.js tasks. Strongly recommends Composition API with `\u003Cscript setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"jetbrains","JetBrains","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fjetbrains.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"Vue","vue","tag",{"name":17,"slug":18,"type":15},"TypeScript","typescript",{"name":20,"slug":21,"type":15},"Best Practices","best-practices",{"name":23,"slug":24,"type":15},"Frontend","frontend",252,"https:\u002F\u002Fgithub.com\u002FJetBrains\u002Fskills","2026-07-13T06:42:52.642229","MIT",17,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"Curated agent skills collection verified by JetBrains","https:\u002F\u002Fgithub.com\u002FJetBrains\u002Fskills\u002Ftree\u002FHEAD\u002Fvue-best-practices","---\nname: vue-best-practices\ndescription: MUST be used for Vue.js tasks. Strongly recommends Composition API with `\u003Cscript setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.\nlicense: MIT\nmetadata:\n  short-description: \"Follow modern Vue best practices\"\n  author: Vue.js AI\n  version: \"18.0.0\"\n  source: https:\u002F\u002Fgithub.com\u002Fantfu\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Fvue-best-practices\n---\n\n# Vue Best Practices Workflow\n\nUse this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order.\n\n## Core Principles\n- **Keep state predictable:** one source of truth, derive everything else.\n- **Make data flow explicit:** Props down, Events up for most cases.\n- **Favor small, focused components:** easier to test, reuse, and maintain.\n- **Avoid unnecessary re-renders:** use computed properties and watchers wisely.\n- **Readability counts:** write clear, self-documenting code.\n\n## 1) Confirm architecture before coding (required)\n\n- Default stack: Vue 3 + Composition API + `\u003Cscript setup lang=\"ts\">`.\n- If the project explicitly uses Options API, load `vue-options-api-best-practices` skill if available.\n- If the project explicitly uses JSX, load `vue-jsx-best-practices` skill if available.\n\n### 1.1 Must-read core references (required)\n\n- Before implementing any Vue task, make sure to read and apply these core references:\n  - `references\u002Freactivity.md`\n  - `references\u002Fsfc.md`\n  - `references\u002Fcomponent-data-flow.md`\n  - `references\u002Fcomposables.md`\n- Keep these references in active working context for the entire task, not only when a specific issue appears.\n\n### 1.2 Plan component boundaries before coding (required)\n\nCreate a brief component map before implementation for any non-trivial feature.\n\n- Define each component's single responsibility in one sentence.\n- Keep entry\u002Froot and route-level view components as composition surfaces by default.\n- Move feature UI and feature logic out of entry\u002Froot\u002Fview components unless the task is intentionally a tiny single-file demo.\n- Define props\u002Femits contracts for each child component in the map.\n- Prefer a feature folder layout (`components\u002F\u003Cfeature>\u002F...`, `composables\u002Fuse\u003CFeature>.ts`) when adding more than one component.\n\n## 2) Apply essential Vue foundations (required)\n\nThese are essential, must-know foundations. Apply all of them in every Vue task using the core references already loaded in section `1.1`.\n\n### Reactivity\n\n- Must-read reference from `1.1`: [reactivity](references\u002Freactivity.md)\n- Keep source state minimal (`ref`\u002F`reactive`), derive everything possible with `computed`.\n- Use watchers for side effects if needed.\n- Avoid recomputing expensive logic in templates.\n\n### SFC structure and template safety\n\n- Must-read reference from `1.1`: [sfc](references\u002Fsfc.md)\n- Keep SFC sections in this order: `\u003Cscript>` → `\u003Ctemplate>` → `\u003Cstyle>`.\n- Keep SFC responsibilities focused; split large components.\n- Keep templates declarative; move branching\u002Fderivation to script.\n- Apply Vue template safety rules (`v-html`, list rendering, conditional rendering choices).\n\n### Keep components focused\n\nSplit a component when it has **more than one clear responsibility** (e.g. data orchestration + UI, or multiple independent UI sections).\n\n- Prefer **smaller components + composables** over one “mega component”\n- Move **UI sections** into child components (props in, events out).\n- Move **state\u002Fside effects** into composables (`useXxx()`).\n\nApply objective split triggers. Split the component if **any** condition is true:\n\n- It owns both orchestration\u002Fstate and substantial presentational markup for multiple sections.\n- It has 3+ distinct UI sections (for example: form, filters, list, footer\u002Fstatus).\n- A template block is repeated or could become reusable (item rows, cards, list entries).\n\nEntry\u002Froot and route view rule:\n\n- Keep entry\u002Froot and route view components thin: app shell\u002Flayout, provider wiring, and feature composition.\n- Do not place full feature implementations in entry\u002Froot\u002Fview components when those features contain independent parts.\n- For CRUD\u002Flist features (todo, table, catalog, inbox), split at least into:\n  - feature container component\n  - input\u002Fform component\n  - list (and\u002For item) component\n  - footer\u002Factions or filter\u002Fstatus component\n- Allow a single-file implementation only for very small throwaway demos; if chosen, explicitly justify why splitting is unnecessary.\n\n### Component data flow\n\n- Must-read reference from `1.1`: [component-data-flow](references\u002Fcomponent-data-flow.md)\n- Use props down, events up as the primary model.\n- Use `v-model` only for true two-way component contracts.\n- Use provide\u002Finject only for deep-tree dependencies or shared context.\n- Keep contracts explicit and typed with `defineProps`, `defineEmits`, and `InjectionKey` as needed.\n\n### Composables\n\n- Must-read reference from `1.1`: [composables](references\u002Fcomposables.md)\n- Extract logic into composables when it is reused, stateful, or side-effect heavy.\n- Keep composable APIs small, typed, and predictable.\n- Separate feature logic from presentational components.\n\n## 3) Consider optional features only when requirements call for them\n\n### 3.1 Standard optional features\n\nDo not add these by default. Load the matching reference only when the requirement exists.\n\n- Slots: parent needs to control child content\u002Flayout -> [component-slots](references\u002Fcomponent-slots.md)\n- Fallthrough attributes: wrapper\u002Fbase components must forward attrs\u002Fevents safely -> [component-fallthrough-attrs](references\u002Fcomponent-fallthrough-attrs.md)\n- Built-in component `\u003CKeepAlive>` for stateful view caching -> [component-keep-alive](references\u002Fcomponent-keep-alive.md)\n- Built-in component `\u003CTeleport>` for overlays\u002Fportals -> [component-teleport](references\u002Fcomponent-teleport.md)\n- Built-in component `\u003CSuspense>` for async subtree fallback boundaries -> [component-suspense](references\u002Fcomponent-suspense.md)\n- Animation-related features: pick the simplest approach that matches the required motion behavior.\n  - Built-in component `\u003CTransition>` for enter\u002Fleave effects -> [transition](references\u002Fcomponent-transition.md)\n  - Built-in component `\u003CTransitionGroup>` for animated list mutations -> [transition-group](references\u002Fcomponent-transition-group.md)\n  - Class-based animation for non-enter\u002Fleave effects -> [animation-class-based-technique](references\u002Fanimation-class-based-technique.md)\n  - State-driven animation for user-input-driven animation -> [animation-state-driven-technique](references\u002Fanimation-state-driven-technique.md)\n\n### 3.2 Less-common optional features\n\nUse these only when there is explicit product or technical need.\n\n- Directives: behavior is DOM-specific and not a good composable\u002Fcomponent fit -> [directives](references\u002Fdirectives.md)\n- Async components: heavy\u002Frarely-used UI should be lazy loaded -> [component-async](references\u002Fcomponent-async.md)\n- Render functions only when templates cannot express the requirement -> [render-functions](references\u002Frender-functions.md)\n- Plugins when behavior must be installed app-wide -> [plugins](references\u002Fplugins.md)\n- State management patterns: app-wide shared state crosses feature boundaries -> [state-management](references\u002Fstate-management.md)\n\n## 4) Run performance optimization after behavior is correct\n\nPerformance work is a post-functionality pass. Do not optimize before core behavior is implemented and verified.\n\n- Large list rendering bottlenecks -> [perf-virtualize-large-lists](references\u002Fperf-virtualize-large-lists.md)\n- Static subtrees re-rendering unnecessarily -> [perf-v-once-v-memo-directives](references\u002Fperf-v-once-v-memo-directives.md)\n- Over-abstraction in hot list paths -> [perf-avoid-component-abstraction-in-lists](references\u002Fperf-avoid-component-abstraction-in-lists.md)\n- Expensive updates triggered too often -> [updated-hook-performance](references\u002Fupdated-hook-performance.md)\n\n## 5) Final self-check before finishing\n\n- Core behavior works and matches requirements.\n- All must-read references were read and applied.\n- Reactivity model is minimal and predictable.\n- SFC structure and template rules are followed.\n- Components are focused and well-factored, splitting when needed.\n- Entry\u002Froot and route view components remain composition surfaces unless there is an explicit small-demo exception.\n- Component split decisions are explicit and defensible (responsibility boundaries are clear).\n- Data flow contracts are explicit and typed.\n- Composables are used where reuse\u002Fcomplexity justifies them.\n- Moved state\u002Fside effects into composables if applicable\n- Optional features are used only when requirements demand them.\n- Performance changes were applied only after functionality was complete.\n",{"data":37,"body":43},{"name":4,"description":6,"license":28,"metadata":38},{"short-description":39,"author":40,"version":41,"source":42},"Follow modern Vue best practices","Vue.js AI","18.0.0","https:\u002F\u002Fgithub.com\u002Fantfu\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Fvue-best-practices",{"type":44,"children":45},"root",[46,55,61,68,124,130,172,179,231,237,242,286,292,304,310,368,374,442,448,460,506,518,536,541,587,593,661,667,699,705,711,716,862,868,873,931,937,942,989,995],{"type":47,"tag":48,"props":49,"children":51},"element","h1",{"id":50},"vue-best-practices-workflow",[52],{"type":53,"value":54},"text","Vue Best Practices Workflow",{"type":47,"tag":56,"props":57,"children":58},"p",{},[59],{"type":53,"value":60},"Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order.",{"type":47,"tag":62,"props":63,"children":65},"h2",{"id":64},"core-principles",[66],{"type":53,"value":67},"Core Principles",{"type":47,"tag":69,"props":70,"children":71},"ul",{},[72,84,94,104,114],{"type":47,"tag":73,"props":74,"children":75},"li",{},[76,82],{"type":47,"tag":77,"props":78,"children":79},"strong",{},[80],{"type":53,"value":81},"Keep state predictable:",{"type":53,"value":83}," one source of truth, derive everything else.",{"type":47,"tag":73,"props":85,"children":86},{},[87,92],{"type":47,"tag":77,"props":88,"children":89},{},[90],{"type":53,"value":91},"Make data flow explicit:",{"type":53,"value":93}," Props down, Events up for most cases.",{"type":47,"tag":73,"props":95,"children":96},{},[97,102],{"type":47,"tag":77,"props":98,"children":99},{},[100],{"type":53,"value":101},"Favor small, focused components:",{"type":53,"value":103}," easier to test, reuse, and maintain.",{"type":47,"tag":73,"props":105,"children":106},{},[107,112],{"type":47,"tag":77,"props":108,"children":109},{},[110],{"type":53,"value":111},"Avoid unnecessary re-renders:",{"type":53,"value":113}," use computed properties and watchers wisely.",{"type":47,"tag":73,"props":115,"children":116},{},[117,122],{"type":47,"tag":77,"props":118,"children":119},{},[120],{"type":53,"value":121},"Readability counts:",{"type":53,"value":123}," write clear, self-documenting code.",{"type":47,"tag":62,"props":125,"children":127},{"id":126},"_1-confirm-architecture-before-coding-required",[128],{"type":53,"value":129},"1) Confirm architecture before coding (required)",{"type":47,"tag":69,"props":131,"children":132},{},[133,147,160],{"type":47,"tag":73,"props":134,"children":135},{},[136,138,145],{"type":53,"value":137},"Default stack: Vue 3 + Composition API + ",{"type":47,"tag":139,"props":140,"children":142},"code",{"className":141},[],[143],{"type":53,"value":144},"\u003Cscript setup lang=\"ts\">",{"type":53,"value":146},".",{"type":47,"tag":73,"props":148,"children":149},{},[150,152,158],{"type":53,"value":151},"If the project explicitly uses Options API, load ",{"type":47,"tag":139,"props":153,"children":155},{"className":154},[],[156],{"type":53,"value":157},"vue-options-api-best-practices",{"type":53,"value":159}," skill if available.",{"type":47,"tag":73,"props":161,"children":162},{},[163,165,171],{"type":53,"value":164},"If the project explicitly uses JSX, load ",{"type":47,"tag":139,"props":166,"children":168},{"className":167},[],[169],{"type":53,"value":170},"vue-jsx-best-practices",{"type":53,"value":159},{"type":47,"tag":173,"props":174,"children":176},"h3",{"id":175},"_11-must-read-core-references-required",[177],{"type":53,"value":178},"1.1 Must-read core references (required)",{"type":47,"tag":69,"props":180,"children":181},{},[182,226],{"type":47,"tag":73,"props":183,"children":184},{},[185,187],{"type":53,"value":186},"Before implementing any Vue task, make sure to read and apply these core references:\n",{"type":47,"tag":69,"props":188,"children":189},{},[190,199,208,217],{"type":47,"tag":73,"props":191,"children":192},{},[193],{"type":47,"tag":139,"props":194,"children":196},{"className":195},[],[197],{"type":53,"value":198},"references\u002Freactivity.md",{"type":47,"tag":73,"props":200,"children":201},{},[202],{"type":47,"tag":139,"props":203,"children":205},{"className":204},[],[206],{"type":53,"value":207},"references\u002Fsfc.md",{"type":47,"tag":73,"props":209,"children":210},{},[211],{"type":47,"tag":139,"props":212,"children":214},{"className":213},[],[215],{"type":53,"value":216},"references\u002Fcomponent-data-flow.md",{"type":47,"tag":73,"props":218,"children":219},{},[220],{"type":47,"tag":139,"props":221,"children":223},{"className":222},[],[224],{"type":53,"value":225},"references\u002Fcomposables.md",{"type":47,"tag":73,"props":227,"children":228},{},[229],{"type":53,"value":230},"Keep these references in active working context for the entire task, not only when a specific issue appears.",{"type":47,"tag":173,"props":232,"children":234},{"id":233},"_12-plan-component-boundaries-before-coding-required",[235],{"type":53,"value":236},"1.2 Plan component boundaries before coding (required)",{"type":47,"tag":56,"props":238,"children":239},{},[240],{"type":53,"value":241},"Create a brief component map before implementation for any non-trivial feature.",{"type":47,"tag":69,"props":243,"children":244},{},[245,250,255,260,265],{"type":47,"tag":73,"props":246,"children":247},{},[248],{"type":53,"value":249},"Define each component's single responsibility in one sentence.",{"type":47,"tag":73,"props":251,"children":252},{},[253],{"type":53,"value":254},"Keep entry\u002Froot and route-level view components as composition surfaces by default.",{"type":47,"tag":73,"props":256,"children":257},{},[258],{"type":53,"value":259},"Move feature UI and feature logic out of entry\u002Froot\u002Fview components unless the task is intentionally a tiny single-file demo.",{"type":47,"tag":73,"props":261,"children":262},{},[263],{"type":53,"value":264},"Define props\u002Femits contracts for each child component in the map.",{"type":47,"tag":73,"props":266,"children":267},{},[268,270,276,278,284],{"type":53,"value":269},"Prefer a feature folder layout (",{"type":47,"tag":139,"props":271,"children":273},{"className":272},[],[274],{"type":53,"value":275},"components\u002F\u003Cfeature>\u002F...",{"type":53,"value":277},", ",{"type":47,"tag":139,"props":279,"children":281},{"className":280},[],[282],{"type":53,"value":283},"composables\u002Fuse\u003CFeature>.ts",{"type":53,"value":285},") when adding more than one component.",{"type":47,"tag":62,"props":287,"children":289},{"id":288},"_2-apply-essential-vue-foundations-required",[290],{"type":53,"value":291},"2) Apply essential Vue foundations (required)",{"type":47,"tag":56,"props":293,"children":294},{},[295,297,303],{"type":53,"value":296},"These are essential, must-know foundations. Apply all of them in every Vue task using the core references already loaded in section ",{"type":47,"tag":139,"props":298,"children":300},{"className":299},[],[301],{"type":53,"value":302},"1.1",{"type":53,"value":146},{"type":47,"tag":173,"props":305,"children":307},{"id":306},"reactivity",[308],{"type":53,"value":309},"Reactivity",{"type":47,"tag":69,"props":311,"children":312},{},[313,330,358,363],{"type":47,"tag":73,"props":314,"children":315},{},[316,318,323,325],{"type":53,"value":317},"Must-read reference from ",{"type":47,"tag":139,"props":319,"children":321},{"className":320},[],[322],{"type":53,"value":302},{"type":53,"value":324},": ",{"type":47,"tag":326,"props":327,"children":328},"a",{"href":198},[329],{"type":53,"value":306},{"type":47,"tag":73,"props":331,"children":332},{},[333,335,341,343,349,351,357],{"type":53,"value":334},"Keep source state minimal (",{"type":47,"tag":139,"props":336,"children":338},{"className":337},[],[339],{"type":53,"value":340},"ref",{"type":53,"value":342},"\u002F",{"type":47,"tag":139,"props":344,"children":346},{"className":345},[],[347],{"type":53,"value":348},"reactive",{"type":53,"value":350},"), derive everything possible with ",{"type":47,"tag":139,"props":352,"children":354},{"className":353},[],[355],{"type":53,"value":356},"computed",{"type":53,"value":146},{"type":47,"tag":73,"props":359,"children":360},{},[361],{"type":53,"value":362},"Use watchers for side effects if needed.",{"type":47,"tag":73,"props":364,"children":365},{},[366],{"type":53,"value":367},"Avoid recomputing expensive logic in templates.",{"type":47,"tag":173,"props":369,"children":371},{"id":370},"sfc-structure-and-template-safety",[372],{"type":53,"value":373},"SFC structure and template safety",{"type":47,"tag":69,"props":375,"children":376},{},[377,392,419,424,429],{"type":47,"tag":73,"props":378,"children":379},{},[380,381,386,387],{"type":53,"value":317},{"type":47,"tag":139,"props":382,"children":384},{"className":383},[],[385],{"type":53,"value":302},{"type":53,"value":324},{"type":47,"tag":326,"props":388,"children":389},{"href":207},[390],{"type":53,"value":391},"sfc",{"type":47,"tag":73,"props":393,"children":394},{},[395,397,403,405,411,412,418],{"type":53,"value":396},"Keep SFC sections in this order: ",{"type":47,"tag":139,"props":398,"children":400},{"className":399},[],[401],{"type":53,"value":402},"\u003Cscript>",{"type":53,"value":404}," → ",{"type":47,"tag":139,"props":406,"children":408},{"className":407},[],[409],{"type":53,"value":410},"\u003Ctemplate>",{"type":53,"value":404},{"type":47,"tag":139,"props":413,"children":415},{"className":414},[],[416],{"type":53,"value":417},"\u003Cstyle>",{"type":53,"value":146},{"type":47,"tag":73,"props":420,"children":421},{},[422],{"type":53,"value":423},"Keep SFC responsibilities focused; split large components.",{"type":47,"tag":73,"props":425,"children":426},{},[427],{"type":53,"value":428},"Keep templates declarative; move branching\u002Fderivation to script.",{"type":47,"tag":73,"props":430,"children":431},{},[432,434,440],{"type":53,"value":433},"Apply Vue template safety rules (",{"type":47,"tag":139,"props":435,"children":437},{"className":436},[],[438],{"type":53,"value":439},"v-html",{"type":53,"value":441},", list rendering, conditional rendering choices).",{"type":47,"tag":173,"props":443,"children":445},{"id":444},"keep-components-focused",[446],{"type":53,"value":447},"Keep components focused",{"type":47,"tag":56,"props":449,"children":450},{},[451,453,458],{"type":53,"value":452},"Split a component when it has ",{"type":47,"tag":77,"props":454,"children":455},{},[456],{"type":53,"value":457},"more than one clear responsibility",{"type":53,"value":459}," (e.g. data orchestration + UI, or multiple independent UI sections).",{"type":47,"tag":69,"props":461,"children":462},{},[463,475,487],{"type":47,"tag":73,"props":464,"children":465},{},[466,468,473],{"type":53,"value":467},"Prefer ",{"type":47,"tag":77,"props":469,"children":470},{},[471],{"type":53,"value":472},"smaller components + composables",{"type":53,"value":474}," over one “mega component”",{"type":47,"tag":73,"props":476,"children":477},{},[478,480,485],{"type":53,"value":479},"Move ",{"type":47,"tag":77,"props":481,"children":482},{},[483],{"type":53,"value":484},"UI sections",{"type":53,"value":486}," into child components (props in, events out).",{"type":47,"tag":73,"props":488,"children":489},{},[490,491,496,498,504],{"type":53,"value":479},{"type":47,"tag":77,"props":492,"children":493},{},[494],{"type":53,"value":495},"state\u002Fside effects",{"type":53,"value":497}," into composables (",{"type":47,"tag":139,"props":499,"children":501},{"className":500},[],[502],{"type":53,"value":503},"useXxx()",{"type":53,"value":505},").",{"type":47,"tag":56,"props":507,"children":508},{},[509,511,516],{"type":53,"value":510},"Apply objective split triggers. Split the component if ",{"type":47,"tag":77,"props":512,"children":513},{},[514],{"type":53,"value":515},"any",{"type":53,"value":517}," condition is true:",{"type":47,"tag":69,"props":519,"children":520},{},[521,526,531],{"type":47,"tag":73,"props":522,"children":523},{},[524],{"type":53,"value":525},"It owns both orchestration\u002Fstate and substantial presentational markup for multiple sections.",{"type":47,"tag":73,"props":527,"children":528},{},[529],{"type":53,"value":530},"It has 3+ distinct UI sections (for example: form, filters, list, footer\u002Fstatus).",{"type":47,"tag":73,"props":532,"children":533},{},[534],{"type":53,"value":535},"A template block is repeated or could become reusable (item rows, cards, list entries).",{"type":47,"tag":56,"props":537,"children":538},{},[539],{"type":53,"value":540},"Entry\u002Froot and route view rule:",{"type":47,"tag":69,"props":542,"children":543},{},[544,549,554,582],{"type":47,"tag":73,"props":545,"children":546},{},[547],{"type":53,"value":548},"Keep entry\u002Froot and route view components thin: app shell\u002Flayout, provider wiring, and feature composition.",{"type":47,"tag":73,"props":550,"children":551},{},[552],{"type":53,"value":553},"Do not place full feature implementations in entry\u002Froot\u002Fview components when those features contain independent parts.",{"type":47,"tag":73,"props":555,"children":556},{},[557,559],{"type":53,"value":558},"For CRUD\u002Flist features (todo, table, catalog, inbox), split at least into:\n",{"type":47,"tag":69,"props":560,"children":561},{},[562,567,572,577],{"type":47,"tag":73,"props":563,"children":564},{},[565],{"type":53,"value":566},"feature container component",{"type":47,"tag":73,"props":568,"children":569},{},[570],{"type":53,"value":571},"input\u002Fform component",{"type":47,"tag":73,"props":573,"children":574},{},[575],{"type":53,"value":576},"list (and\u002For item) component",{"type":47,"tag":73,"props":578,"children":579},{},[580],{"type":53,"value":581},"footer\u002Factions or filter\u002Fstatus component",{"type":47,"tag":73,"props":583,"children":584},{},[585],{"type":53,"value":586},"Allow a single-file implementation only for very small throwaway demos; if chosen, explicitly justify why splitting is unnecessary.",{"type":47,"tag":173,"props":588,"children":590},{"id":589},"component-data-flow",[591],{"type":53,"value":592},"Component data flow",{"type":47,"tag":69,"props":594,"children":595},{},[596,610,615,628,633],{"type":47,"tag":73,"props":597,"children":598},{},[599,600,605,606],{"type":53,"value":317},{"type":47,"tag":139,"props":601,"children":603},{"className":602},[],[604],{"type":53,"value":302},{"type":53,"value":324},{"type":47,"tag":326,"props":607,"children":608},{"href":216},[609],{"type":53,"value":589},{"type":47,"tag":73,"props":611,"children":612},{},[613],{"type":53,"value":614},"Use props down, events up as the primary model.",{"type":47,"tag":73,"props":616,"children":617},{},[618,620,626],{"type":53,"value":619},"Use ",{"type":47,"tag":139,"props":621,"children":623},{"className":622},[],[624],{"type":53,"value":625},"v-model",{"type":53,"value":627}," only for true two-way component contracts.",{"type":47,"tag":73,"props":629,"children":630},{},[631],{"type":53,"value":632},"Use provide\u002Finject only for deep-tree dependencies or shared context.",{"type":47,"tag":73,"props":634,"children":635},{},[636,638,644,645,651,653,659],{"type":53,"value":637},"Keep contracts explicit and typed with ",{"type":47,"tag":139,"props":639,"children":641},{"className":640},[],[642],{"type":53,"value":643},"defineProps",{"type":53,"value":277},{"type":47,"tag":139,"props":646,"children":648},{"className":647},[],[649],{"type":53,"value":650},"defineEmits",{"type":53,"value":652},", and ",{"type":47,"tag":139,"props":654,"children":656},{"className":655},[],[657],{"type":53,"value":658},"InjectionKey",{"type":53,"value":660}," as needed.",{"type":47,"tag":173,"props":662,"children":664},{"id":663},"composables",[665],{"type":53,"value":666},"Composables",{"type":47,"tag":69,"props":668,"children":669},{},[670,684,689,694],{"type":47,"tag":73,"props":671,"children":672},{},[673,674,679,680],{"type":53,"value":317},{"type":47,"tag":139,"props":675,"children":677},{"className":676},[],[678],{"type":53,"value":302},{"type":53,"value":324},{"type":47,"tag":326,"props":681,"children":682},{"href":225},[683],{"type":53,"value":663},{"type":47,"tag":73,"props":685,"children":686},{},[687],{"type":53,"value":688},"Extract logic into composables when it is reused, stateful, or side-effect heavy.",{"type":47,"tag":73,"props":690,"children":691},{},[692],{"type":53,"value":693},"Keep composable APIs small, typed, and predictable.",{"type":47,"tag":73,"props":695,"children":696},{},[697],{"type":53,"value":698},"Separate feature logic from presentational components.",{"type":47,"tag":62,"props":700,"children":702},{"id":701},"_3-consider-optional-features-only-when-requirements-call-for-them",[703],{"type":53,"value":704},"3) Consider optional features only when requirements call for them",{"type":47,"tag":173,"props":706,"children":708},{"id":707},"_31-standard-optional-features",[709],{"type":53,"value":710},"3.1 Standard optional features",{"type":47,"tag":56,"props":712,"children":713},{},[714],{"type":53,"value":715},"Do not add these by default. Load the matching reference only when the requirement exists.",{"type":47,"tag":69,"props":717,"children":718},{},[719,730,741,760,778,796],{"type":47,"tag":73,"props":720,"children":721},{},[722,724],{"type":53,"value":723},"Slots: parent needs to control child content\u002Flayout -> ",{"type":47,"tag":326,"props":725,"children":727},{"href":726},"references\u002Fcomponent-slots.md",[728],{"type":53,"value":729},"component-slots",{"type":47,"tag":73,"props":731,"children":732},{},[733,735],{"type":53,"value":734},"Fallthrough attributes: wrapper\u002Fbase components must forward attrs\u002Fevents safely -> ",{"type":47,"tag":326,"props":736,"children":738},{"href":737},"references\u002Fcomponent-fallthrough-attrs.md",[739],{"type":53,"value":740},"component-fallthrough-attrs",{"type":47,"tag":73,"props":742,"children":743},{},[744,746,752,754],{"type":53,"value":745},"Built-in component ",{"type":47,"tag":139,"props":747,"children":749},{"className":748},[],[750],{"type":53,"value":751},"\u003CKeepAlive>",{"type":53,"value":753}," for stateful view caching -> ",{"type":47,"tag":326,"props":755,"children":757},{"href":756},"references\u002Fcomponent-keep-alive.md",[758],{"type":53,"value":759},"component-keep-alive",{"type":47,"tag":73,"props":761,"children":762},{},[763,764,770,772],{"type":53,"value":745},{"type":47,"tag":139,"props":765,"children":767},{"className":766},[],[768],{"type":53,"value":769},"\u003CTeleport>",{"type":53,"value":771}," for overlays\u002Fportals -> ",{"type":47,"tag":326,"props":773,"children":775},{"href":774},"references\u002Fcomponent-teleport.md",[776],{"type":53,"value":777},"component-teleport",{"type":47,"tag":73,"props":779,"children":780},{},[781,782,788,790],{"type":53,"value":745},{"type":47,"tag":139,"props":783,"children":785},{"className":784},[],[786],{"type":53,"value":787},"\u003CSuspense>",{"type":53,"value":789}," for async subtree fallback boundaries -> ",{"type":47,"tag":326,"props":791,"children":793},{"href":792},"references\u002Fcomponent-suspense.md",[794],{"type":53,"value":795},"component-suspense",{"type":47,"tag":73,"props":797,"children":798},{},[799,801],{"type":53,"value":800},"Animation-related features: pick the simplest approach that matches the required motion behavior.\n",{"type":47,"tag":69,"props":802,"children":803},{},[804,822,840,851],{"type":47,"tag":73,"props":805,"children":806},{},[807,808,814,816],{"type":53,"value":745},{"type":47,"tag":139,"props":809,"children":811},{"className":810},[],[812],{"type":53,"value":813},"\u003CTransition>",{"type":53,"value":815}," for enter\u002Fleave effects -> ",{"type":47,"tag":326,"props":817,"children":819},{"href":818},"references\u002Fcomponent-transition.md",[820],{"type":53,"value":821},"transition",{"type":47,"tag":73,"props":823,"children":824},{},[825,826,832,834],{"type":53,"value":745},{"type":47,"tag":139,"props":827,"children":829},{"className":828},[],[830],{"type":53,"value":831},"\u003CTransitionGroup>",{"type":53,"value":833}," for animated list mutations -> ",{"type":47,"tag":326,"props":835,"children":837},{"href":836},"references\u002Fcomponent-transition-group.md",[838],{"type":53,"value":839},"transition-group",{"type":47,"tag":73,"props":841,"children":842},{},[843,845],{"type":53,"value":844},"Class-based animation for non-enter\u002Fleave effects -> ",{"type":47,"tag":326,"props":846,"children":848},{"href":847},"references\u002Fanimation-class-based-technique.md",[849],{"type":53,"value":850},"animation-class-based-technique",{"type":47,"tag":73,"props":852,"children":853},{},[854,856],{"type":53,"value":855},"State-driven animation for user-input-driven animation -> ",{"type":47,"tag":326,"props":857,"children":859},{"href":858},"references\u002Fanimation-state-driven-technique.md",[860],{"type":53,"value":861},"animation-state-driven-technique",{"type":47,"tag":173,"props":863,"children":865},{"id":864},"_32-less-common-optional-features",[866],{"type":53,"value":867},"3.2 Less-common optional features",{"type":47,"tag":56,"props":869,"children":870},{},[871],{"type":53,"value":872},"Use these only when there is explicit product or technical need.",{"type":47,"tag":69,"props":874,"children":875},{},[876,887,898,909,920],{"type":47,"tag":73,"props":877,"children":878},{},[879,881],{"type":53,"value":880},"Directives: behavior is DOM-specific and not a good composable\u002Fcomponent fit -> ",{"type":47,"tag":326,"props":882,"children":884},{"href":883},"references\u002Fdirectives.md",[885],{"type":53,"value":886},"directives",{"type":47,"tag":73,"props":888,"children":889},{},[890,892],{"type":53,"value":891},"Async components: heavy\u002Frarely-used UI should be lazy loaded -> ",{"type":47,"tag":326,"props":893,"children":895},{"href":894},"references\u002Fcomponent-async.md",[896],{"type":53,"value":897},"component-async",{"type":47,"tag":73,"props":899,"children":900},{},[901,903],{"type":53,"value":902},"Render functions only when templates cannot express the requirement -> ",{"type":47,"tag":326,"props":904,"children":906},{"href":905},"references\u002Frender-functions.md",[907],{"type":53,"value":908},"render-functions",{"type":47,"tag":73,"props":910,"children":911},{},[912,914],{"type":53,"value":913},"Plugins when behavior must be installed app-wide -> ",{"type":47,"tag":326,"props":915,"children":917},{"href":916},"references\u002Fplugins.md",[918],{"type":53,"value":919},"plugins",{"type":47,"tag":73,"props":921,"children":922},{},[923,925],{"type":53,"value":924},"State management patterns: app-wide shared state crosses feature boundaries -> ",{"type":47,"tag":326,"props":926,"children":928},{"href":927},"references\u002Fstate-management.md",[929],{"type":53,"value":930},"state-management",{"type":47,"tag":62,"props":932,"children":934},{"id":933},"_4-run-performance-optimization-after-behavior-is-correct",[935],{"type":53,"value":936},"4) Run performance optimization after behavior is correct",{"type":47,"tag":56,"props":938,"children":939},{},[940],{"type":53,"value":941},"Performance work is a post-functionality pass. Do not optimize before core behavior is implemented and verified.",{"type":47,"tag":69,"props":943,"children":944},{},[945,956,967,978],{"type":47,"tag":73,"props":946,"children":947},{},[948,950],{"type":53,"value":949},"Large list rendering bottlenecks -> ",{"type":47,"tag":326,"props":951,"children":953},{"href":952},"references\u002Fperf-virtualize-large-lists.md",[954],{"type":53,"value":955},"perf-virtualize-large-lists",{"type":47,"tag":73,"props":957,"children":958},{},[959,961],{"type":53,"value":960},"Static subtrees re-rendering unnecessarily -> ",{"type":47,"tag":326,"props":962,"children":964},{"href":963},"references\u002Fperf-v-once-v-memo-directives.md",[965],{"type":53,"value":966},"perf-v-once-v-memo-directives",{"type":47,"tag":73,"props":968,"children":969},{},[970,972],{"type":53,"value":971},"Over-abstraction in hot list paths -> ",{"type":47,"tag":326,"props":973,"children":975},{"href":974},"references\u002Fperf-avoid-component-abstraction-in-lists.md",[976],{"type":53,"value":977},"perf-avoid-component-abstraction-in-lists",{"type":47,"tag":73,"props":979,"children":980},{},[981,983],{"type":53,"value":982},"Expensive updates triggered too often -> ",{"type":47,"tag":326,"props":984,"children":986},{"href":985},"references\u002Fupdated-hook-performance.md",[987],{"type":53,"value":988},"updated-hook-performance",{"type":47,"tag":62,"props":990,"children":992},{"id":991},"_5-final-self-check-before-finishing",[993],{"type":53,"value":994},"5) Final self-check before finishing",{"type":47,"tag":69,"props":996,"children":997},{},[998,1003,1008,1013,1018,1023,1028,1033,1038,1043,1048,1053],{"type":47,"tag":73,"props":999,"children":1000},{},[1001],{"type":53,"value":1002},"Core behavior works and matches requirements.",{"type":47,"tag":73,"props":1004,"children":1005},{},[1006],{"type":53,"value":1007},"All must-read references were read and applied.",{"type":47,"tag":73,"props":1009,"children":1010},{},[1011],{"type":53,"value":1012},"Reactivity model is minimal and predictable.",{"type":47,"tag":73,"props":1014,"children":1015},{},[1016],{"type":53,"value":1017},"SFC structure and template rules are followed.",{"type":47,"tag":73,"props":1019,"children":1020},{},[1021],{"type":53,"value":1022},"Components are focused and well-factored, splitting when needed.",{"type":47,"tag":73,"props":1024,"children":1025},{},[1026],{"type":53,"value":1027},"Entry\u002Froot and route view components remain composition surfaces unless there is an explicit small-demo exception.",{"type":47,"tag":73,"props":1029,"children":1030},{},[1031],{"type":53,"value":1032},"Component split decisions are explicit and defensible (responsibility boundaries are clear).",{"type":47,"tag":73,"props":1034,"children":1035},{},[1036],{"type":53,"value":1037},"Data flow contracts are explicit and typed.",{"type":47,"tag":73,"props":1039,"children":1040},{},[1041],{"type":53,"value":1042},"Composables are used where reuse\u002Fcomplexity justifies them.",{"type":47,"tag":73,"props":1044,"children":1045},{},[1046],{"type":53,"value":1047},"Moved state\u002Fside effects into composables if applicable",{"type":47,"tag":73,"props":1049,"children":1050},{},[1051],{"type":53,"value":1052},"Optional features are used only when requirements demand them.",{"type":47,"tag":73,"props":1054,"children":1055},{},[1056],{"type":53,"value":1057},"Performance changes were applied only after functionality was complete.",{"items":1059,"total":1179},[1060,1079,1092,1108,1123,1146,1163],{"slug":1061,"name":1061,"fn":1062,"description":1063,"org":1064,"tags":1065,"stars":25,"repoUrl":26,"updatedAt":1078},"algorithmic-art","create generative art with p5.js","Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1066,1069,1072,1075],{"name":1067,"slug":1068,"type":15},"Creative","creative",{"name":1070,"slug":1071,"type":15},"Generative Art","generative-art",{"name":1073,"slug":1074,"type":15},"Graphics","graphics",{"name":1076,"slug":1077,"type":15},"JavaScript","javascript","2026-07-13T06:41:35.540127",{"slug":1080,"name":1080,"fn":1081,"description":1082,"org":1083,"tags":1084,"stars":25,"repoUrl":26,"updatedAt":1091},"antfu","configure JavaScript projects with Anthony Fu's tools","Anthony Fu's opinionated tooling and conventions for JavaScript\u002FTypeScript projects. Use when setting up new projects, configuring ESLint\u002FPrettier alternatives, monorepos, library publishing, or when the user mentions Anthony Fu's preferences.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1085,1086,1089,1090],{"name":20,"slug":21,"type":15},{"name":1087,"slug":1088,"type":15},"Engineering","engineering",{"name":1076,"slug":1077,"type":15},{"name":17,"slug":18,"type":15},"2026-07-13T06:43:13.153309",{"slug":1093,"name":1093,"fn":1094,"description":1095,"org":1096,"tags":1097,"stars":25,"repoUrl":26,"updatedAt":1107},"brand-guidelines","apply Anthropic brand guidelines","Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1098,1101,1104],{"name":1099,"slug":1100,"type":15},"Branding","branding",{"name":1102,"slug":1103,"type":15},"Design","design",{"name":1105,"slug":1106,"type":15},"Typography","typography","2026-07-13T06:43:06.077629",{"slug":1109,"name":1109,"fn":1110,"description":1111,"org":1112,"tags":1113,"stars":25,"repoUrl":26,"updatedAt":1122},"canvas-design","create visual art and design assets","Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1114,1115,1116,1119],{"name":1067,"slug":1068,"type":15},{"name":1102,"slug":1103,"type":15},{"name":1117,"slug":1118,"type":15},"Images","images",{"name":1120,"slug":1121,"type":15},"PDF","pdf","2026-07-13T06:39:58.803113",{"slug":1124,"name":1124,"fn":1125,"description":1126,"org":1127,"tags":1128,"stars":25,"repoUrl":26,"updatedAt":1145},"ci-cd-containerization-advisor","design CI\u002FCD pipelines for Kotlin applications","Design reproducible build, image, and deployment pipelines for Kotlin plus Spring applications, including CI verification, layered containers, rollout safety, and deployment-time migration coordination. Use when creating or improving Dockerfiles, CI workflows, image hardening, Kubernetes manifests, release gates, or deployment strategies for Spring Boot services, especially where build reproducibility and operational safety matter.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1129,1132,1135,1138,1139,1142],{"name":1130,"slug":1131,"type":15},"CI\u002FCD","ci-cd",{"name":1133,"slug":1134,"type":15},"Containers","containers",{"name":1136,"slug":1137,"type":15},"Deployment","deployment",{"name":1087,"slug":1088,"type":15},{"name":1140,"slug":1141,"type":15},"Kotlin","kotlin",{"name":1143,"slug":1144,"type":15},"Spring","spring","2026-07-13T06:41:47.83899",{"slug":1147,"name":1147,"fn":1148,"description":1149,"org":1150,"tags":1151,"stars":25,"repoUrl":26,"updatedAt":1162},"cloudflare-deploy","deploy applications to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1152,1155,1158,1161],{"name":1153,"slug":1154,"type":15},"Cloudflare","cloudflare",{"name":1156,"slug":1157,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":1159,"slug":1160,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":1136,"slug":1137,"type":15},"2026-07-17T06:04:42.853896",{"slug":1164,"name":1164,"fn":1165,"description":1166,"org":1167,"tags":1168,"stars":25,"repoUrl":26,"updatedAt":1178},"compose-ui-control","interact with Compose Desktop applications","Control a running Compose Desktop application via HTTP. Use when you need to interact with UI elements, click buttons, enter text, wait for elements to appear, or capture screenshots in a Compose Desktop app that has compose-ui-test-server enabled.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1169,1172,1175],{"name":1170,"slug":1171,"type":15},"Automation","automation",{"name":1173,"slug":1174,"type":15},"Desktop","desktop",{"name":1176,"slug":1177,"type":15},"UI Components","ui-components","2026-07-13T06:40:38.798626",128,{"items":1181,"total":1306},[1182,1198,1207,1216,1227,1237,1246,1255,1264,1274,1283,1296],{"slug":1183,"name":1183,"fn":1184,"description":1185,"org":1186,"tags":1187,"stars":1195,"repoUrl":1196,"updatedAt":1197},"mps-aspect-accessories","configure JetBrains MPS module dependencies","Wire MPS module and model dependencies, used languages, used devkits, extended languages, runtime solutions, accessory models, and language\u002Fdependency versions. Use when adding\u002Fremoving module dependencies, importing languages or devkits into a model, declaring runtime solutions, or shipping accessory content visible to consumers without explicit import.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1188,1191,1194],{"name":1189,"slug":1190,"type":15},"Architecture","architecture",{"name":1192,"slug":1193,"type":15},"Configuration","configuration",{"name":1087,"slug":1088,"type":15},1650,"https:\u002F\u002Fgithub.com\u002FJetBrains\u002FMPS","2026-07-17T06:06:57.311661",{"slug":1199,"name":1199,"fn":1200,"description":1201,"org":1202,"tags":1203,"stars":1195,"repoUrl":1196,"updatedAt":1206},"mps-aspect-actions","define and edit MPS node factories","Use when defining or editing MPS node factories (the \"actions\" aspect) — `NodeFactories` roots, per-concept `NodeFactory` setup functions that initialize a freshly created node and optionally copy data from a replaced `sampleNode`, plus the actions aspect's `CopyPasteHandlers` and `PasteWrappers` roots. Reach for this skill when a substitution, side transform, completion replacement, or `add new initialized(...)` should preserve fields from the node it is replacing, or when defaults set in a constructor are not enough.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1204,1205],{"name":1189,"slug":1190,"type":15},{"name":1087,"slug":1088,"type":15},"2026-07-17T06:04:48.066901",{"slug":1208,"name":1208,"fn":1209,"description":1210,"org":1211,"tags":1212,"stars":1195,"repoUrl":1196,"updatedAt":1215},"mps-aspect-behavior","define and edit MPS concept behavior","Use when defining or editing MPS `ConceptBehavior` — per-concept methods (non-virtual \u002F virtual \u002F abstract \u002F static \u002F virtual static), constructors, virtual dispatch (MRO), super and interface-default calls (`super\u003CInterface>.method`), overriding methods from `lang.core.behavior` interfaces such as `ScopeProvider.getScope` \u002F `INamedConcept.getName` \u002F `BaseConcept.getPresentation`, calling sibling methods (`LocalBehaviorMethodCall`) and behavior methods from other aspects via `node.method(...)`. Reach for this skill whenever the task involves authoring or modifying `\u003Clang>\u002FlanguageModels\u002Fbehavior.mps`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1213,1214],{"name":1189,"slug":1190,"type":15},{"name":1087,"slug":1088,"type":15},"2026-07-13T06:45:21.757084",{"slug":1217,"name":1217,"fn":1218,"description":1219,"org":1220,"tags":1221,"stars":1195,"repoUrl":1196,"updatedAt":1226},"mps-aspect-constraints","define JetBrains MPS language constraints","Use when defining or editing MPS language constraints — property validators \u002F setters \u002F getters, referent search scopes (imperative or inherited via `ScopeProvider.getScope`), `referentSetHandler` side effects, default-scope blocks, `canBeChild` \u002F `canBeParent` \u002F `canBeAncestor` \u002F `canBeRoot` placement rules, `defaultConcreteConcept` for abstract concepts, `set \u003Cread-only>` and `{name}` aliasing, and scope helpers (`SimpleRoleScope`, `ListScope`, `CompositeScope`, `HidingByNameScope`). Reach for this skill whenever the task involves authoring or modifying `\u003Clang>\u002FlanguageModels\u002Fconstraints.mps`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1222,1223],{"name":1189,"slug":1190,"type":15},{"name":1224,"slug":1225,"type":15},"Code Analysis","code-analysis","2026-07-23T05:41:33.639365",{"slug":1228,"name":1228,"fn":1229,"description":1230,"org":1231,"tags":1232,"stars":1195,"repoUrl":1196,"updatedAt":1236},"mps-aspect-dataflow","define and debug MPS dataflow builders","Use when defining or debugging MPS dataflow builders for a concept — control\u002Fdata flow declarations that drive reachability analysis and variable-use checking. Covers DataFlowBuilderDeclaration, BuilderBlock, emit instructions (code for, jump, ifjump, label, read, write, ret, mayBeUnreachable), positions (AfterPosition, BeforePosition, LabelPosition), the jetbrains.mps.lang.dataFlow language, the NodeParameter implicit, BL+smodel usage inside builder bodies, and IBuilderMode for advanced analyses such as nullable\u002Fnon-null tracking.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1233],{"name":1234,"slug":1235,"type":15},"Data Analysis","data-analysis","2026-07-13T06:45:19.114674",{"slug":1238,"name":1238,"fn":1239,"description":1240,"org":1241,"tags":1242,"stars":1195,"repoUrl":1196,"updatedAt":1245},"mps-aspect-editor","define MPS editor layouts","Use when creating or changing MPS editor definitions — the overall workflow from scaffolding a `ConceptEditorDeclaration` through componentizing reusable `EditorComponentDeclaration`s, refining cell models and cell layouts, applying style sheets and indent-layout style items, wiring smart references, leveraging inheritance via super-concepts and interfaces, inspecting (`print_node_json`, `show_node_representation`) and validating (`check_root_node_problems`). Covers `jetbrains.mps.lang.editor` cell models (`CellModel_RefNode`\u002F`CellModel_RefNodeList`\u002F`CellModel_RefCell`\u002F`CellModel_Property`\u002F`CellModel_Constant`), layout choices, and JSON blueprints for common editor shapes. For the non-layout side (action maps, keymaps, transformation\u002Fsubstitute menus) use `mps-aspect-editor-menus-and-keymaps`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1243,1244],{"name":1102,"slug":1103,"type":15},{"name":1176,"slug":1177,"type":15},"2026-07-23T05:41:56.638151",{"slug":1247,"name":1247,"fn":1248,"description":1249,"org":1250,"tags":1251,"stars":1195,"repoUrl":1196,"updatedAt":1254},"mps-aspect-editor-menus-and-keymaps","author MPS editor menus and keymaps","Use when authoring the **non-layout** parts of the MPS editor aspect — what happens when the user types, presses a key, triggers completion, pastes, or invokes a context action. Covers action maps (`CellActionMapDeclaration`), cell keymaps (`CellKeyMapDeclaration`), transformation menus (`TransformationMenu_Default` \u002F `_Named` \u002F `_Contribution`), substitute menus (`SubstituteMenu_Default` \u002F `SubstituteMenu` \u002F contributions), side transforms (LEFT\u002FRIGHT), legacy cell menus, paste wrappers and copy-paste handlers (in the actions language), completion styling, reference presentation, two-step deletion, and the editor selection API. Trigger terms: `actionMap`, `keyMap`, `delete_action_id`, `transformationMenu`, `substituteMenu`, `Ctrl+Space`, `Ctrl+Alt+B`, side transform, paste wrapper, completion styling, `PasteWrappers`, `CopyPasteHandlers`. For the **layout** side (cells, layouts, style sheets) use `mps-aspect-editor` instead.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1252,1253],{"name":1087,"slug":1088,"type":15},{"name":1176,"slug":1177,"type":15},"2026-07-23T05:41:49.666535",{"slug":1256,"name":1256,"fn":1257,"description":1258,"org":1259,"tags":1260,"stars":1195,"repoUrl":1196,"updatedAt":1263},"mps-aspect-generation-plan","modify MPS generation plans","Use when defining or modifying an MPS generation plan — explicit ordering of generators, checkpoints for cross-model reference resolution, forks for parallel branches, IncludePlan composition, conditional PlanContribution activation, ParameterEquals\u002FConceptListSelector fork selectors, and InitModelAttributes for targetFacet routing. Apply when working with @genplan models, the jetbrains.mps.lang.generator.plan language, attaching plans via DevKits or the Custom generation facet, or debugging cross-model mapping label resolution.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1261,1262],{"name":1189,"slug":1190,"type":15},{"name":1087,"slug":1088,"type":15},"2026-07-13T06:44:59.507855",{"slug":1265,"name":1265,"fn":1266,"description":1267,"org":1268,"tags":1269,"stars":1195,"repoUrl":1196,"updatedAt":1273},"mps-aspect-generator","define JetBrains MPS generator rules","Use when defining or modifying MPS generators — author a generator module, add or edit root\u002Freduction\u002Fweaving\u002Fpattern mapping rules, attach template macros ($COPY_SRC, $LOOP, $IF, $PROPERTY, $REF, $SWITCH, $MAP_SRC, $WEAVE, $INSERT, $LABEL, $TRACE, $VAR), wire mapping labels, build template switches, write pre\u002Fpost mapping scripts, navigate `genContext`, or debug \"rule didn't fire\", missing references, empty output, infinite reduction loops, and generated-Java compile failures.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1270,1271,1272],{"name":1189,"slug":1190,"type":15},{"name":1224,"slug":1225,"type":15},{"name":1087,"slug":1088,"type":15},"2026-07-17T06:06:58.042999",{"slug":1275,"name":1275,"fn":1276,"description":1277,"org":1278,"tags":1279,"stars":1195,"repoUrl":1196,"updatedAt":1282},"mps-aspect-intentions","define and edit MPS intentions","Use when defining or editing MPS intentions (the Alt+Enter context-action aspect) — adding `IntentionDeclaration` roots, parameterized or surround-with variants, description\u002FisApplicable\u002Fexecute blocks, child-filter functions, factory-initialized AST splicing, or debugging why an intention is not offered. Lives in the language's `intentions` model and uses `jetbrains.mps.lang.intentions`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1280,1281],{"name":1189,"slug":1190,"type":15},{"name":1087,"slug":1088,"type":15},"2026-07-23T05:41:48.692899",{"slug":1284,"name":1284,"fn":1285,"description":1286,"org":1287,"tags":1288,"stars":1195,"repoUrl":1196,"updatedAt":1295},"mps-aspect-migrations","author and debug MPS migration scripts","Use when authoring or debugging MPS migration scripts that upgrade user models after a language definition changes — covers jetbrains.mps.lang.migration (MigrationScript class-based, PureMigrationScript declarative, MoveConcept\u002FMoveContainmentLink\u002FMoveReferenceLink\u002FMoveProperty, ordering via OrderDependency, data exchange via putData\u002FgetData, RefactoringLog, ConceptMigrationReference) and jetbrains.mps.lang.script Enhancement Scripts (MigrationScript with MigrationScriptPart_Instance, ExtractInterfaceMigration, FactoryMigrationScriptPart, CommentMigrationScriptPart) — when a model needs version-gated upgrade, concept rename or removal, link or property rename, instance-level transformation, or composition of migration steps.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1289,1292],{"name":1290,"slug":1291,"type":15},"Debugging","debugging",{"name":1293,"slug":1294,"type":15},"Migration","migration","2026-07-13T06:45:20.372122",{"slug":1297,"name":1297,"fn":1298,"description":1299,"org":1300,"tags":1301,"stars":1195,"repoUrl":1196,"updatedAt":1305},"mps-aspect-structure-concepts","define concepts in MPS structure aspect","Define concepts, interface concepts, enumerations, and constrained data types in an MPS language's `structure` aspect. Covers smart-reference detection, alias rules, cardinality, INamedConcept usage, bulk creation, and the full `mps_mcp_alter_structure` \u002F `mps_mcp_query_structure` reference. Use when authoring or modifying a language's structure model.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1302],{"name":1303,"slug":1304,"type":15},"Data Modeling","data-modeling","2026-07-23T05:41:30.705975",188]