Name: vue-ts-example-2025
Author: yanhao98

Imported from yanhao98/vue-ts-example-2025 (AGENTS.md). Install upstream with npx skills add yanhao98/vue-ts-example-2025. Copyright stays with the author.

AGENTS.md

This file provides guidance to AI when working with code in this repository.

Project Overview

Vue 3 TypeScript application with Vite.

开发服务器

不要启动开发服务器: 开发服务器通常已经由用户启动。除非特别要求，否则不要执行 pnpm dev 之类的命令。
不要执行 Playwright 测试: 除非用户明确要求，否则不要运行 Playwright 端到端测试。

Routing & Layouts

File-based routing: Uses unplugin-vue-router with .page.vue and .page.md extensions in src/pages/
Route naming: Converts to PascalCase (e.g., user-profile.page.vue → UserProfile)
Layouts: vite-plugin-vue-meta-layouts with default layout base-layout/base-layout

Auto-Import Configuration

Multiple auto-import systems are active:

Vue APIs: Core Vue, VueUse, Pinia, Vue Router, vue-i18n
Components: Auto-registered from multiple UI libraries (Naive UI, PrimeVue)
Icons: Uses unplugin-icons with icon- prefix; custom SVGs from src/assets/icons/svgs/ available via icon-svg-filename

IMPORTANT - Auto-Import Limitations:

Dynamic components: Auto-imported components cannot be used with <component :is="..." /> syntax
- ❌ Avoid: <component :is="icon-${name}" />
- ✅ Use: <icon-foo v-if="condition" /> with v-if/v-else-if/v-else directives

Icons in TypeScript/TSX files: Auto-import for icons does NOT work. You must explicitly import them using the ~icons/ prefix:

import IconMenuRounded from '~icons/material-symbols/menu-rounded';

// Then use in JSX/TSX
const menuOption = {
  icon: () => <IconMenuRounded />,
};

UI Component Libraries

Project has multiple UI frameworks configured:

Naive UI
PrimeVue:

Styling

UnoCSS: Wind preset
SCSS: Modern compiler API with global imports from @/styles/scss/global.scss

State Management

Pinia stores

Cloudflare Workers Integration

Server entry: server/index.ts handles /api/* routes with KV storage
KV binding: Named KV

Vite Plugins (notable)

vue-macros: Enhanced Vue features
unplugin-vue-markdown: .md files as Vue components with frontmatter

Path Aliases

@/ maps to src/ directory

{ "ocm": "1", "id": "yanhao98-vue-ts-example-2025-vue-ts-example-2025", "kind": "skill", "name": "vue-ts-example-2025", "description": "This file provides guidance to AI when working with code in this repository.", "publisher": "yanhao98", "version": "1.0.0", "capabilities": { "domains": [ "coding" ], "tags": [ "skill-md", "github-agents" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "This file provides guidance to AI when working with code in this repository." ], "primary": false, "metadata": { "source": { "provider": "github-agents", "repository": "https://github.com/yanhao98/vue-ts-example-2025", "path": "AGENTS.md", "ref": "be3d59691b696c85e99d20f48e880930011d080f", "url": "https://github.com/yanhao98/vue-ts-example-2025/blob/be3d59691b696c85e99d20f48e880930011d080f/AGENTS.md", "key": "yanhao98/vue-ts-example-2025/AGENTS.md" } }, "instructions": "# AGENTS.md\n\nThis file provides guidance to AI when working with code in this repository.\n\n## Project Overview\n\nVue 3 TypeScript application with Vite.\n\n## 开发服务器\n\n- **不要启动开发服务器**: 开发服务器通常已经由用户启动。除非特别要求，否则不要执行 `pnpm dev` 之类的命令。\n- **不要执行 Playwright 测试**: 除非用户明确要求，否则不要运行 Playwright 端到端测试。\n\n### Routing & Layouts\n\n- **File-based routing**: Uses `unplugin-vue-router` with `.page.vue` and `.page.md` extensions in `src/pages/`\n- **Route naming**: Converts to PascalCase (e.g., `user-profile.page.vue` → `UserProfile`)\n- **Layouts**: `vite-plugin-vue-meta-layouts` with default layout `base-layout/base-la", "cost": { "context_tokens": 540 } }

vue-ts-example-2025

About