maxart

Vue With AI — AI skill for Claude Code

AI community

A comprehensive CLAUDE.md template for Vue 3 projects.

How to install Vue With AI

This entry records only its repository, not the path inside it, so there is no exact command to give. Open maxart/Vue-with-AI and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Vue With AI does

A comprehensive CLAUDE.md template for Vue 3 projects. Drop it in and Claude Code automatically follows production-grade conventions for TypeScript, Composition API, state management, accessibility, security, testing, and more — with token-efficient output rules built in.

Alternatives in AI

Claude Code Configs — A comprehensive collection of production-grade Claude Code configurations, specialized agents, and automation 624 ★
Nuxt Skills — Vue, Nuxt, and NuxtHub skills for AI coding assistants 597 ★
Unofficial Claude Code Prompt Playbook — Unofficial playbook for production-grade LLM system prompt architecture, derived from local analysis of Claude 258 ★

README

Vue-with-AI

A `CLAUDE.md` template that teaches [Claude Code](https://docs.anthropic.com/en/docs/claude-code) modern Vue 3 best practices. Drop it into any Vue project and Claude will follow production-grade conventions for TypeScript, state management, accessibility, security, testing, and more — automatically, on every interaction.

Why

Claude Code reads `CLAUDE.md` from your working directory and applies its rules to every conversation (including sub-agents). Without guardrails, AI-generated Vue code can drift: `any` types, raw `onMounted` + `ref` data fetching, inaccessible markup, unsanitized `v-html`, missing cleanup, and more. This template codifies the conventions experienced Vue teams enforce in code review, so Claude follows them from the first line.

Two Versions

Pick the one that fits your project.

File	Size	Contains	Best for
`CLAUDE.md.FULL`	37,886 chars	All rules plus BAD/GOOD code examples	Projects where you want Claude to pattern-match from examples, or onboarding human devs alongside Claude
`CLAUDE.md.SHORT`	17,455 chars	All rules, no code examples	Context-sensitive projects, large monorepos, or when you already trust Claude to apply Vue idioms correctly

Both files cover the **same rules** — the only difference is whether each rule is illustrated with a BAD/GOOD code block. Rules that lived inside code-only examples in the FULL version were folded into prose in SHORT, so no guidance is lost.

What's inside (click to expand)

Area	Key rules
Output & Efficiency	Token-efficient responses (adapted from claude-token-efficient), no sycophantic fluff, ASCII-safe output
Code Quality	Early returns, no `enum`, files under 200 lines, naming conventions (PascalCase / camelCase / UPPER_SNAKE_CASE)
TypeScript	Stric