frontend-agent-skills

Vue 3 · TypeScript · JavaScript · Vite AI agent skills for Cursor, Amp Code, and Claude Code

Looking for Cursor skills for Vue? JavaScript agent skills? Amp or Claude Code rules?
Install production-ready SKILL.md files for your AI coding agent in one command:

npx frontend-agent-skills install

Installs the default (token-light) Vue + TypeScript set into .cursor/skills/ (or the agent you pick): vue-core, vue-pinia, vue-axios, vue-router, vue-composables, vue-testing, typescript-vue, typescript-core, vite.

Heavy catalogs (vueuse, vue-architecture, javascript-*, html-*, css-*, design-*) stay out of the default. Add them with --category or --all.

Curated AI agent skills for Vue 3, TypeScript, JavaScript, and Vite frontend development. Works with Cursor IDE, Amp Code, and Claude Code — the same skills, installed to .cursor/skills/, .agents/skills/, or .claude/skills/.

Gives your AI agent deep knowledge of Vue 3 Composition API, TypeScript (generics, utility types, typed <script setup>), JavaScript ES2020+, Vite, Pinia, Vue Router, VueUse, Vitest, and more — so it writes idiomatic, production-ready code out of the box.

| Install | Links | |---------|-------| | npx frontend-agent-skills install | npm package · GitHub repo · Report issue |

Migrating from vue-cursor-skills? Renamed in v2.0.0 — same skills, clearer name. Old CLI alias still works.

Supported AI Agents

| Agent | Skills directory | Search terms | |-------|-----------------|--------------| | Cursor | .cursor/skills/ | cursor skills, cursor rules, cursor vue skills | | Amp | .agents/skills/ | amp skills, amp code skills, amp agent skills | | Claude Code | .claude/skills/ | claude code skills, claude agent skills |

All agents use the same SKILL.md format — skills are written once and installed to the correct directory for each agent.

Frequently searched

npx frontend-agent-skills install --agent cursor --category vue

Installs: vue-core, vue-pinia, vue-router, vue-testing, vueuse, vue-composables, vue-debug, vue-axios, vue-architecture.

npx frontend-agent-skills install --category javascript

Installs: javascript-core, javascript-dom, javascript-debug, javascript-node, javascript-testing, javascript-performance, javascript-data.

npx frontend-agent-skills install --category typescript

Installs: typescript-core, typescript-types, typescript-config, typescript-vue, typescript-testing, typescript-debug.

npx frontend-agent-skills install --category html

Installs: html-core, html-forms, html-a11y.

npx frontend-agent-skills install --category css

Installs: css-core, css-layout, css-responsive, css-animations.

npx frontend-agent-skills install --category design

Installs: design-transfer, design-from-screenshot, figma-intake.

npx frontend-agent-skills install --agent amp

Copies skills to .agents/skills/ — Amp's native skills directory.

npx frontend-agent-skills install --agent claude

Copies skills to .claude/skills/ — use as slash commands or auto-loaded skills.

npx frontend-agent-skills install --agent all

Skills

Vue 3

| Skill | Description | |-------|-------------| | vue-core | Vue 3 Composition API, <script setup>, reactivity, SFC, data flow, composables, performance | | vue-pinia | Pinia setup stores, storeToRefs, actions, plugins, SSR, testing, gotchas | | vue-router | Vue Router 4 guards, navigation patterns, route lifecycle, gotchas | | vue-testing | Vitest + Vue Test Utils + Playwright E2E, async patterns, Pinia mocking | | vueuse | 200+ VueUse composable utilities with invocation rules | | vue-composables | Library-grade composables with MaybeRef/MaybeRefOrGetter patterns | | vue-debug | Runtime errors, warnings, hydration issues, SSR debugging guide | | vue-axios | Axios HTTP client patterns for Vue 3 projects | | vue-architecture | Enterprise Vue 3 architecture: structure, state, API layer, routing, layouts, permissions, DX, team standards |

Vite

| Skill | Description | |-------|-------------| | vite | Vite config (defineConfig, env vars, proxy, aliases), plugin API (hooks, virtual modules, ordering), build (library mode, multi-page, chunking), SSR, Environment API (v6+), Rolldown migration (v8) |

JavaScript

| Skill | Description | |-------|-------------| | javascript-core | Modern ES2020+ best practices: declarations, naming, strict equality, functions, destructuring, async/await & Promise APIs, immutability, array methods, ES modules, error handling | | javascript-dom | Vanilla DOM: selectors, event delegation, safe HTML (no innerHTML XSS), forms & FormData, Intersection/Resize/Mutation observers, layout performance, cleanup | | javascript-debug | Language pitfall catalog: this binding, closures in loops, TDZ, floating point, reference equality, coercion, mutation, microtasks vs macrotasks, async traps, JSON losses | | javascript-node | Node.js ≥18: node: builtins, fs/promises, env config, CLI with parseArgs, streams & pipeline, child processes, AbortSignal timeouts, graceful shutdown, worker threads | | javascript-testing | Vitest for plain JS: AAA structure, matchers, vi.fn/spyOn/mock, fake timers, async rejects/resolves, it.each, setup/teardown, what not to test | | javascript-performance | Debounce/throttle, memoization, rAF/idle scheduling, Web Workers, memory leak prevention, Map/Set in hot loops, lazy loading, measuring with Performance API | | javascript-data | Dates & time zones, Intl formatting (currency, plurals, lists, collation), JSON gotchas, structuredClone, regex best practices, Map/Set/WeakMap collections |

TypeScript

| Skill | Description | |-------|-------------| | typescript-core | Fundamentals: type annotations, interface vs type, unions, literal types, narrowing, functions, classes, enums, unknown vs any, strict-mode discipline | | typescript-types | Utility types (Partial, Pick, Omit, Record, ReturnType, Awaited...), constrained generics, mapped types, conditional types with infer, template literal types, discriminated unions | | typescript-config | tsconfig.json, strict-mode flags explained, module resolution (bundler/NodeNext), path aliases, project references, declaration (.d.ts) files | | typescript-vue | Typed <script setup lang="ts">: defineProps/defineEmits/defineModel, generic components, template refs, InjectionKey, typed composables & Pinia stores | | typescript-testing | Typed Vitest patterns: vi.fn<T>/Mocked<T> mocks, expectTypeOf/assertType type-testing, typed fixture factories, avoiding any in test doubles | | typescript-debug | Compiler error decoder: assignability (TS2345/TS2322/TS2769), nullability (TS18048), non-null assertion pitfalls, type widening, any vs unknown, structural typing surprises |

HTML

| Skill | Description | |-------|-------------| | html-core | Semantic HTML, document structure/head metadata, media (picture, srcset, lazy loading), dialog/details, data attributes | | html-forms | Forms, input types, native validation, autocomplete, labels/fieldsets, FormData, submit patterns | | html-a11y | Accessibility: ARIA first rule, landmarks, headings, focus management, keyboard patterns, alt text, prefers-* |

CSS

| Skill | Description | |-------|-------------| | css-core | Modern CSS: custom properties, nesting, :is/:where/:has, cascade layers, specificity, logical properties, units | | css-layout | Flexbox vs Grid, grid patterns, subgrid, container queries, intrinsic sizing | | css-responsive | Mobile-first strategy, fluid typography with clamp(), media vs container queries, dvh viewport units | | css-animations | Transitions, @keyframes, compositor-friendly motion, View Transitions, scroll-driven animations, prefers-reduced-motion |

Design

| Skill | Description | |-------|-------------| | design-transfer | Source-agnostic design-to-code playbook: capture into a durable design brief, map tokens to CSS custom properties, implement and verify from brief + reference images only | | design-from-screenshot | Vision-only intake from screenshots/photos: layout hierarchy, 4/8px spacing scale, palette and type extraction with confidence markers | | figma-intake | One-pass Figma MCP capture (metadata → context → variables → screenshots) into the brief; graceful fallback to screenshot intake when access fails |

Installation

Option 1: npx — no install required (recommended)

npx frontend-agent-skills install

This copies the default skill set (Vue + TypeScript + Vite, not every catalog). You will be prompted to choose your agent(s):

? Install skills for which agent(s)?

  1) Cursor (default)
  2) Amp
  3) Claude Code
  4) All (Cursor + Amp + Claude Code)

Choose [1-4] (press Enter for Cursor):

Press Enter to skip — defaults to Cursor.

Skip the prompt in CI or scripts:

npx frontend-agent-skills install --yes
# or
FRONTEND_AGENT_SKILLS_AGENT=amp npx frontend-agent-skills install

Specify agent directly (no prompt)

npx frontend-agent-skills install --agent cursor        # Cursor only
npx frontend-agent-skills install --agent amp            # Amp only
npx frontend-agent-skills install --agent claude         # Claude Code only
npx frontend-agent-skills install --agent cursor --agent amp   # multiple agents
npx frontend-agent-skills install --agent all            # all supported agents

Filter by category or specific skills

npx frontend-agent-skills install --all
npx frontend-agent-skills install --category vue
npx frontend-agent-skills install --category javascript
npx frontend-agent-skills install --category html
npx frontend-agent-skills install --category css
npx frontend-agent-skills install --category design
npx frontend-agent-skills install --skill vue-core --skill javascript-core --skill vite

Combine agent + category/skill filters

npx frontend-agent-skills install --agent amp --category vue
npx frontend-agent-skills install --agent all --skill vue-core --skill vite

Install into a specific project

npx frontend-agent-skills install --target /path/to/my-project

Option 2: npm install as devDependency

npm install --save-dev frontend-agent-skills

Add to package.json:

{
  "scripts": {
    "skills:install": "frontend-agent-skills install",
    "skills:install:all": "frontend-agent-skills install --agent all"
  }
}

Then run:

npm run skills:install

Option 3: Global install

npm install -g frontend-agent-skills
frontend-agent-skills install

Option 4: Manual

Copy any folder from skills/ directly into your agent's skills directory:

| Agent | Copy to | |-------|---------| | Cursor | .cursor/skills/<skill-name>/ | | Amp | .agents/skills/<skill-name>/ | | Claude Code | .claude/skills/<skill-name>/ |

After Installation

Skills are copied to the appropriate directory for your chosen agent(s). Restart the agent to activate them.

Example structure after installing for all agents:

your-project/
├── .cursor/skills/       ← Cursor
│   ├── vue-core/
│   ├── javascript-core/
│   ├── vite/
│   └── ...
├── .agents/skills/       ← Amp
│   ├── vue-core/
│   ├── javascript-core/
│   ├── vite/
│   └── ...
└── .claude/skills/       ← Claude Code
    ├── vue-core/
    ├── javascript-core/
    ├── vite/
    └── ...

Usage

After installation, skills are automatically available in your agent. For best results, reference skills explicitly in your prompt:

Cursor:

Use vue-core skill, create a dashboard component with real-time data updates
Use javascript-core skill, refactor this module to ES modules with async/await
Use vite skill, configure proxy and path aliases for my Vue project

Amp:

Use the vite skill to create a Vite plugin that injects build metadata
Use vue-pinia skill, set up an auth store with SSR support
Use javascript-debug skill, why does this async loop not await?

Claude Code:

/vue-core create a dashboard component with real-time data updates
/javascript-core refactor this file to modern ES2020+ patterns
/vite configure proxy and path aliases for my Vue project

Alternatively, add to your project's configuration:

| Agent | File | Example | |-------|------|---------| | Cursor | .cursor/rules/ | Always load vue-core, javascript-core, and vite skills for frontend work. | | Amp | AGENTS.md | Always load vue-core, javascript-core, and vite skills for frontend work. | | Claude Code | CLAUDE.md | Always load vue-core, javascript-core, and vite skills for frontend work. |

List Available Skills

npx frontend-agent-skills list

Output:

  📁 vue/
      - vue-core
      - vue-pinia
      ...
  📦 vite
  📁 javascript/
      - javascript-core
      - javascript-data
      - javascript-debug
      - javascript-dom
      - javascript-node
      - javascript-performance
      - javascript-testing
  📁 typescript/
      - typescript-config
      - typescript-core
      - typescript-debug
      - typescript-testing
      - typescript-types
      - typescript-vue
  📁 html/
      - html-a11y
      - html-core
      - html-forms
  📁 css/
      - css-animations
      - css-core
      - css-layout
      - css-responsive
  📁 design/
      - design-from-screenshot
      - design-transfer
      - figma-intake

  Supported agents: Cursor (cursor), Amp (amp), Claude Code (claude)

Repository Structure

frontend-agent-skills/
├── package.json
├── README.md
├── bin/
│   └── install.js              # CLI installer (multi-agent)
└── skills/
    ├── vue/                    # Vue 3 skills
    ├── vite/                   # Vite build tool skill
    ├── javascript/             # JavaScript skills
    ├── typescript/             # TypeScript skills
    ├── html/                   # HTML skills
    ├── css/                    # CSS skills
    └── design/                 # Design transfer skills

How It Works

All skills use a single unified format (SKILL.md + references/) that is compatible with every supported agent. The installer simply copies the same skill files into the correct directory for each agent:

| Agent | Target directory | |-------|-----------------| | Cursor | .cursor/skills/<skill-name>/ | | Amp | .agents/skills/<skill-name>/ | | Claude Code | .claude/skills/<skill-name>/ |

No code duplication. Skills are authored once, stored once in skills/, and installed to one or more agent directories. Adding a new agent in the future requires only one line in the installer's agent registry.

Migration from vue-cursor-skills

| Before (v1.x) | After (v2.x) | |---------------|--------------| | npx vue-cursor-skills install | npx frontend-agent-skills install | | npm i -D vue-cursor-skills | npm i -D frontend-agent-skills | | VUE_CURSOR_SKILLS_AGENT=amp | FRONTEND_AGENT_SKILLS_AGENT=amp |

The old package name vue-cursor-skills and CLI alias remain available temporarily for backward compatibility.

Roadmap

• [x] Vue 3 core skills (9 skills)
• [x] vue-architecture — enterprise project structure, API layer, routing, team standards
• [x] Vite — config, plugins, build, SSR, Environment API, Rolldown migration
• [x] Multi-agent support — Cursor, Amp, Claude Code
• [x] JavaScript — 7 skills: core, dom, debug, node, testing, performance, data
• [x] Package rename — frontend-agent-skills v2.0.0
• [x] TypeScript — 6 skills: core, types (advanced/utility), config, vue, testing, debug
• [x] HTML — 3 skills: core, forms, a11y
• [x] CSS — 4 skills: core, layout, responsive, animations
• [x] Design — 3 skills: transfer, from-screenshot, figma-intake
• [ ] Vitest — advanced testing patterns
• [ ] Additional agents — Windsurf, Cline, and others

npm & GitHub discoverability

Indexed by npm search (keywords, description, README) and Google (npm package page + GitHub README).

GitHub repository settings

In Repository settings → General:

| Field | Value | |-------|-------| | Description | Vue 3, TypeScript, JavaScript & Vite AI agent skills for Cursor, Amp Code, and Claude Code | | Website | https://www.npmjs.com/package/frontend-agent-skills | | Topics | vue3, vue, javascript, vite, cursor, cursor-ide, cursor-skills, agent-skills, ai-skills, claude-code, amp, ampcode, pinia, vueuse, vitest, frontend, llm, coding-agent, skill-md |

npm registry

After publish, deprecate the old package name so npm search surfaces the redirect message:

npm deprecate vue-cursor-skills "Renamed to frontend-agent-skills → npx frontend-agent-skills install"

Verify indexing:

npm search frontend-agent-skills
npm view frontend-agent-skills

Contributing

1. Fork makshc2/vue-3-AI-skills.
2. Add or improve skills in skills/<category>/<skill-name>/SKILL.md.
3. Follow the SKILL.md frontmatter format.
4. Submit a PR.

License

MIT — Skills content retains original licenses from source repositories.