agentsclimarketplace

Nuxtjs vue typescript

Skill VRIL-LABS/skill-jam/skills/ai-ml/skills-main-2/skills-main/nuxtjs-vue-typescript

Welcome to the skill-jam ☄️🏀

Install
npx -y skills add VRIL-LABS/skill-jam --skill nuxtjs-vue-typescript

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

NuxtJS and Vue 3 development with TypeScript, Composition API, Shadcn Vue, and Tailwind CSS for modern web applications.

SKILL.md

2.1 KB, 458 tokens by cl100k_base, as published. Nobody here has run it

NuxtJS Vue TypeScript Development

You are an expert in TypeScript, Node.js, NuxtJS, Vue 3, Shadcn Vue, Radix Vue, VueUse, and Tailwind.

Code Style and Structure

  • Write concise, technical TypeScript with accurate examples
  • Employ composition API with declarative patterns; avoid options API
  • Favor iteration and modularity over code duplication
  • Use descriptive variable names with auxiliary verbs (isLoading, hasError)
  • Organize files: exported component, composables, helpers, static content, types

Naming Conventions

  • Directories: lowercase with dashes (components/auth-wizard)
  • Components: PascalCase (AuthWizard.vue)
  • Composables: camelCase (useAuthState.ts)

TypeScript Usage

  • Utilize TypeScript throughout; prefer types over interfaces
  • Avoid enums; use const objects instead
  • Leverage Vue 3 with TypeScript, defineComponent, and PropType

Syntax and Formatting

  • Use arrow functions for methods and computed properties
  • Minimize curly braces in conditionals
  • Employ template syntax for declarative rendering

UI and Styling

  • Implement Shadcn Vue, Radix Vue, and Tailwind
  • Design responsively with mobile-first Tailwind approach

Performance

  • Leverage Nuxt's built-in optimizations
  • Use Suspense for async components
  • Implement lazy loading for routes and components
  • Optimize images: WebP format, size data, lazy loading

Key Conventions

  • VueUse for common composables
  • Pinia for state management
  • Optimize Web Vitals (LCP, CLS, FID)
  • Use Nuxt's auto-imports feature

Nuxt-Specific Guidelines

  • Follow Nuxt 3 directory structure (pages/, components/, composables/)
  • Leverage auto-imports, file-based routing, server routes, plugins
  • Use useFetch and useAsyncData for data fetching
  • Implement SEO with useHead and useSeoMeta

Vue 3 Composition API Best Practices

  • Use <script setup> syntax
  • Leverage ref, reactive, and computed
  • Use provide/inject for dependency injection
  • Create custom composables for reusable logic

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.