TRAE-Skills

A collection of skill files for Trae IDE that enhance Vue 3 / Vite / Pinia based frontend development workflows. (In the future, we’ll be adding skills beyond just frontend development; if you’d like to contribute, please feel free to join.)

You can put your agent skills into your project main path to ".trae" folder. For example: .trae/agent-browser/SKILL.md

Purpose: Browser automation CLI for UI testing, E2E tests, and page interaction.

Use cases:

• Test UI components and forms
• Automated E2E testing without heavy frameworks
• Page interaction testing
• Screenshot capture for visual verification

Setup:

npm install -g agent-browser
agent-browser install

Key features:

• Lightweight alternative to Playwright
• Accessibility tree-based element selection
• Snapshot inspection for element refs
• Keyboard and mouse automation
• Screenshot capture

Purpose: Internationalization implementation guide for vue-i18n v9 with Vue 3 Composition API.

Use cases:

• Adding new user-facing text to components
• Creating new locale files (tr/en/ro)
• Translating hardcoded strings
• Date/number formatting per locale
• Language switching

Key concepts:

• Translation function: t('key.path')
• Interpolation: t('key', { field: 'value' })
• Pluralization: {n} | {n} format
• Date formatting: d(date, 'short')
• Number formatting: n(amount, 'currency')

File structure:

src/
├── i18n/
│   ├── i18n.js
│   ├── dateTimeFormats.js
│   └── numberFormats.js
└── locales/
    ├── tr/
    ├── en/
    └── ro/

Purpose: Form validation with Vuelidate and internationalized error messages.

Use cases:

• Adding validation rules to forms
• Creating localized validation messages
• Custom validator development
• Error message display patterns

Built-in validators:

• required, email, minLength, maxLength
• minValue, maxValue, sameAs
• requiredIf, numeric, integer

Error message mapping:

Copy the skill files to your Trae configuration directory:

~/.trae/skills/
├── agent-browser/
│   └── SKILL.md
├── vue-i18n/
│   └── SKILL.md
└── vuelidate-i18n/
    └── SKILL.md

Or reference them in your project's .trae/skills/ directory for team sharing.

When you invoke these skills, Trae will provide context-aware guidance based on the skill files.

Example prompts:

• "Login sayfasına validation ekle"
• "Yeni bir locale dosyası oluştur"
• "Ürün ekleme formunu test et"
• "Bu component'e çeviri anahtarları ekle"

These skills are designed for projects using:

• Vue 3.5+ (Composition API & Options API)
• Pinia 3.x (State management)
• Vue Router 4 (Routing)
• Vite 7 (Build tool)
• Vue-i18n (Internationalization)
• Vuelidate (Form validation)

Contributions are welcome! Please feel free to submit issues or pull requests.

This project is licensed under the MIT License - see the LICENSE file for details.

Created for Vue 3 / Vite / Pinia enterprise applications in any domain.