nuxt-code-editor

Nuxt Code Editor Skill

Capabilities

• Vue 3 Composition API: Generate <script setup lang="ts"> components.
• PrimeVue Integration: Correctly use PrimeVue components according to utils/ or existing components/ usage.
• Better-Auth Integration: Correctly use authClient (frontend) and auth (server-side) for authentication and authorization control.
• Type Safety: Ensure all backend code uses the TypeORM entities and DTOs defined in server/database/entities or types/ .
• Zod Validation: Use Zod for API request parameter validation (refer to utils/schemas/)。
• Incremental Editing: Prefer patching rather than rewriting entire files to preserve context.

Instructions

1. Path and Worktree Awareness: All file creation and modification operations must be performed in the worktree to which the current task belongs. If it is main feature development, it should be in dev or fix the directory corresponding to the branch.
2. Code Style Guide: Follow the ESLint and Prettier configurations. Use SCSS for styles and apply the BEM naming convention.
3. Component Standards: Use defineProps, defineEmits together with TypeScript interfaces/types.
4. Backend Standards:
   • Ensure server/api handlers use defineEventHandler and return standardized responses (refer to docs/standards/api.md)。
   • Do not use the PATCH method, all update operations should use the PUT method.
   • List-type APIs must return a unified pagination format:items (data list), total (total count), page, limit, totalPages。
5. Internationalization (I18n): All UI strings must be wrapped in $t() .
   • Key Naming Convention: Must follow the development specification required snake_case (lowercase + underscores) naming (except for existing kebab-case fields).
6. Files: When creating files, ensure they are located in the correct Nuxt directories (components, composables, server/api , etc.).
7. Dependency Constraints: Follow the dependency constraints in docs/standards/development.md to avoid circular dependencies.

Usage Example

Input: "Create a button component." Action: Use PrimeVue Button to generate components/base/AppButton.vue, and define props in a TS interface.

Input: "Create an API to fetch the article list." Action: In server/api/posts.get.ts use defineEventHandler and typeorm Repository to fetch data.