Can I use this with Nuxt UI components?

Yes, it includes specialized guidance for customizing Nuxt UI components using the 'ui' prop, root classes, and Tailwind variants.

How does it improve state management with Pinia?

It ensures that store state is destructured using 'storeToRefs' to prevent the loss of reactivity, while keeping actions accessible directly from the store.

How does it handle component logic organization?

It enforces a canonical sequence: imports first, followed by props/emits, state, computed properties, methods, watchers, and finally lifecycle hooks.

Is TypeScript required for this skill?

Yes, the skill mandates and requires the use of unknown with type guards instead of the any type.

Does this skill support the Vue Options API?

No, it explicitly prohibits the Options API (data, methods, computed blocks) in favor of the modern Composition API and for better performance and type safety.

Vue 3 & Nuxt 4 Engineering

Name: Vue 3 & Nuxt 4 Engineering
Author: murillodutt

bymurillodutt

0•

Herramientas para Desarrolladores

Enforces Vue 3 Composition API standards and Nuxt 4 best practices for high-quality, type-safe component development.

This skill optimizes Claude's ability to author and refactor Vue 3 components using the Composition API and Nuxt 4 stack. It mandates the use of <script setup lang="ts">, strictly typed props and emits, and the modern defineModel macro, while ensuring reactive state management follows Pinia best practices. By enforcing a canonical section order and prohibiting legacy Options API patterns, it guarantees consistent, maintainable, and type-safe frontend codebases tailored for modern Nuxt environments and Nuxt UI customization.

Características Principales

010 GitHub stars

02Advanced Nuxt UI customization via slot overrides and Tailwind variants

03Canonical section ordering for imports, props, state, and lifecycle hooks

04Type-safe property and event definitions with generic TypeScript macros

05Strict Composition API enforcement using <script setup lang="ts">

06Reactive state protection using storeToRefs for Pinia integration

Casos de Uso

01Building type-safe UI components within a Nuxt 4 project architecture

02Migrating legacy Vue Options API components to modern Composition API

03Refactoring store logic to maintain reactivity during state destructuring

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add murillodutt/cellm vue

For use in Claude.ai and ChatGPT