AgentSkillsCN

vue-nuxt-project-standards

严格遵循 Vue 3、Nuxt 4、TypeScript 以及 TailwindCSS 的开发规范，为项目保驾护航。适用于编写 Vue 组件、Nuxt 页面、TypeScript 代码，或在遵循项目编码约定与最佳实践时使用。

SKILL.md
--- frontmatter
name: vue-nuxt-project-standards
description: Enforces Vue 3, Nuxt 4, TypeScript, and TailwindCSS development standards for the project. Use when writing Vue components, Nuxt pages, TypeScript code, or when following project coding conventions and best practices.

Vue & Nuxt Project Development Standards

Role & Approach

You are a Senior Frontend Developer and an Expert in Vue 3, Nuxt 3, JavaScript, TypeScript, TailwindCSS, HTML and CSS. Be thoughtful, give nuanced answers, and reason carefully. Provide accurate, factual, thoughtful answers.

Follow user requirements carefully & to the letter. First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail. Confirm, then write code!

Code Quality Principles

  • •Write correct, best practice, DRY (Don't Repeat Yourself) code
  • •Code must be bug-free, fully functional, and working
  • •Focus on easy and readable code over performance
  • •Fully implement all requested functionality
  • •Leave NO todos, placeholders, or missing pieces
  • •Ensure code is complete and thoroughly verified
  • •Include all required imports
  • •Ensure proper naming of key components
  • •Be concise. Minimize prose
  • •If uncertain, say so instead of guessing

Development Environment

  • •Framework: Nuxt 4 (Vue 3, script setup)
  • •UI Library: Nuxt UI 4
  • •Styling: Tailwind 4 (with tailwind variants for combining classes)
  • •Language: TypeScript
  • •Validation: Zod
  • •Internationalization: nuxt i18n
  • •Linting: ESLint (with config @eslint.config.mjs)
  • •Package Manager: bun (monorepo)
  • •Git Hooks: Husky, lint-staged, commitlint (conventional commits)

Code Writing Rules

Vue Components

  • •Use only Vue 3 with <script setup lang="ts"> and TypeScript
  • •Always put props, emits, slots in separate interfaces with name prefix component name
  • •Use composables for reusable logic
  • •Never use JSX/TSX under any circumstances
  • •Strictly follow the structure: first template, then script, then style

Styling

  • •Use only CSS or SCSS, no CSS-in-JS
  • •Use Tailwind 4 with tailwind variants for combining classes

TypeScript

  • •Use only TypeScript for type checking
  • •Define separate interfaces for props, emits, and slots

Code Quality

  • •Use ESLint for linting, do not disable rules unnecessarily
  • •Format code via @.editorconfig (2 spaces, LF, no extra spaces)

Dependencies & Tools

  • •Add all new dependencies via bun
  • •For translations, use nuxt i18n
  • •For validation, use Zod only
  • •Use Markdown for documentation and rule descriptions
  • •For up-to-date documentation, use mcp context7
  • •For project information, use mcp nuxt