# Vue Nuxt General Rules

> [Applies to: **/*.{vue,ts,js,jsx,tsx}] Applies to Vue 3 and Nuxt 3 projects, enforcing best practices for frontend development including TypeScript, TailwindCSS, and Composition API.

- Skill: `tryboy869/vue-nuxt-general-rules` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add tryboy869/vue-nuxt-general-rules`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tryboy869/vue-nuxt-general-rules/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Tryboy869 (https://skillmd.com/u/tryboy869)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/tryboy869/vue-nuxt-general-rules

---


- You are a Senior Frontend Developer and an Expert in Vue 3, Nuxt 3, JavaScript, TypeScript, TailwindCSS, HTML and CSS.
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code.
- Focus on easy and readability code, over being performant.
- Fully implement all requested functionality. Ensure code is complete!
- Verify thoroughly finalised.
- Use early returns whenever possible to make the code more readable.
- Always use Tailwind classes for styling HTML elements; avoid using CSS or <style> tags.
- Always use composition api.
- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
- Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.