frontend-agent-skills

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.

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

Supported AI Agents

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

npx frontend-agent-skills install --category javascript

npx frontend-agent-skills install --category typescript

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 --agent amp

npx frontend-agent-skills install --agent claude

npx frontend-agent-skills install --agent all

Skills

Vue 3

Vite

JavaScript

TypeScript

HTML

CSS

Design

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:

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

The javascript-core and javascript-debug prompts above need the JavaScript category, which the default install omits: run npx frontend-agent-skills install --category javascript first.

Alternatively, add to your project's configuration:

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:

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

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

Roadmap

• Vue 3 core skills (9 skills)
• vue-architecture — enterprise project structure, API layer, routing, team standards
• Vite — config, plugins, build, SSR, Environment API, Rolldown migration
• Multi-agent support — Cursor, Amp, Claude Code
• JavaScript — 7 skills: core, dom, debug, node, testing, performance, data
• Package rename — frontend-agent-skills v2.0.0
• TypeScript — 6 skills: core, types (advanced/utility), config, vue, testing, debug
• HTML — 3 skills: core, forms, a11y
• CSS — 4 skills: core, layout, responsive, animations
• 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:

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.