ub-vuejs

Enforce Vue 3 patterns and strict TypeScript across SFCs and Composition API.

6|2|Updated Mar 12, 2026
One-click install
npx skills add https://github.com/robert-hoffmann/uncle-bob --skill ub-vuejs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ub-vuejs
Source: https://github.com/robert-hoffmann/uncle-bob/tree/main/.agents/skills/ub-vuejs
Command: npx skills add https://github.com/robert-hoffmann/uncle-bob --skill ub-vuejs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Enforces Vue core best practices for the latest stable release with strict TypeScript, providing migration-aware guidance to modernize both new and legacy codebases.

Core Features & Use Cases

  • Enforces Vue 3 best-practices across SFCs, composition API, SSR/hydration, and component contracts.
  • Automates alignment with modern patterns such as script setup, defineModel, and useTemplateRef, with on-demand references to governance guidelines.
  • Guides incremental migrations by offering explicit references for migration from legacy patterns and by deferring Nuxt-specific concerns to ub-nuxt.

Quick Start

Install the ub-vuejs skill in your project and start applying its Vue core modernization guidelines with strict TypeScript.

Frequently Asked Questions about ub-vuejs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce Vue 3 best practices with strict TypeScript in my project?

Apply modern Vue core patterns across SFCs using the Composition API and script setup to enforce strict TypeScript discipline and improve maintainability across your codebase.

What is the best way to migrate legacy Vue code to the Composition API?

Use incremental migration guidance that provides explicit references for transitioning from legacy patterns to the Composition API while maintaining strict TypeScript discipline.

How do I handle SSR and hydration patterns in Vue 3 applications?

Apply targeted component contracts and validation steps like typechecking and linting to ensure consistent Vue 3 server-side rendering and hydration behavior.

Does this Vue modernization approach work with Nuxt projects?

This Vue core modernization approach focuses on Vue 3 patterns and explicitly defers Nuxt-specific concerns and rules to dedicated Nuxt governance guidelines.

When do I need to use script setup and defineModel in Vue components?

Use script setup and defineModel to automate alignment with modern Vue patterns, ensuring strict TypeScript usage and well-defined component contracts across your application.

What validation steps are required for Vue 3 projects using strict TypeScript?

Required validation steps for Vue 3 projects using strict TypeScript include running typechecking, linting, and tests to verify adherence to modern patterns like script setup and SSR hydration.