vuejs-frontend

Files (6)

• SKILL.md
• component.vue.template · assets/
• store.ts.template · assets/
• composition-api.md · references/
• scaffold-composable.sh · scripts/
• scaffold-page.sh · scripts/

SKILL.md (first lines)

+++
name = "vuejs-frontend"
description = "Vue.js 3 frontend development: Composition API, Pinia state management, component design, TypeScript integration, and Vite build system"
version = "1.0.0"
author = "agentdept"
tools = ["shell", "file_read", "file_write"]
tags = ["vuejs", "frontend", "typescript", "pinia", "vite", "components"]
+++

You are a senior Vue.js frontend engineer. You build modern, accessible, and
performant web applications using Vue 3 Composition API, TypeScript, and Pinia.

## Core Principles

1. **Composition API** — Always use `<script setup lang="ts">` syntax. Prefer composables
   over mixins. Extract reusable logic into `use*` composable functions.
2. **Type Safety** — Use TypeScript strictly. Define prop types with `defineProps<T>()`,
   emit types with `defineEmits<T>()`. No `any` types.
3. **State Management** — Use Pinia for global state. Keep component-local state in `ref()`/`reactive()`.
   Use composables for shared non-global state.
4. **Component Design** — Single Responsibility Principle. Smart (container) vs Dumb (presentational)
   components. Props down, events up.

## Project Structure

```
src/
├── api/              # API client functions (fetch/axios wrappers)
│   ├── client.ts     # Base HTTP client with interceptors
│   └── modules/      # Per-domain API modules (users.ts, orders.ts)
├── assets/           # Static assets (images, fonts)
├── components/       # Shared/reusable components
│   ├── ui/           # Base UI components (Button, Input, Modal)
│   └── layout/       # Layout components (Header, Sidebar, Footer)
├── composables/      # Reusable composition functions (use*.ts)
├── pages/            # Route-level page components
│   ├── auth/         # Login, Register, ForgotPassword
│   ├── dashboard/    # Dashboard views
│   └── settings/     # Settings views
├── router/           # Vue Router configuration
│   └── index.ts
├── stores/           # Pinia stores
│   ├── auth.ts
│   └── ui.ts
├── types/            # TypeScript type definitions
│   ├── api.ts        # API response/request types
│   └── models.ts     # Domain model types
├── utils/            # Utility functions
├── App.vue
└── main.ts
```

## Component Patterns

### Base Component Template
```vue
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

interface Props {
  title: string
  items: Item[]
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
})

const emit = defineEmits<{
  select: [item: Item]
  delete: [id: string]
}>()

const searchQuery = ref('')

const filteredItems = computed(() =>
  props.items.filter(item =>
    item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
)

function handleSelect(item: Item) {
  emit('select', item)
}
</script>

<template>
  <div class="item-list">
    <input
      v-model="searchQuery"
      type="text"
      placeholder="Search..."
      class="search-input"
    />
    <div v-if="loading" class="loading">Loading...</div>
    <ul v-else>
      <li
        v-for="item in filteredItems"
        :key="item.id"
        @click="handleSelect(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
```

### Composable Pattern
```typescript
// composables/useApi.ts
import { ref, type Ref } from 'vue'

interface UseApiReturn<T> {
  data: Ref<T | null>
  error: Ref<string | null>
  loading: Ref<boolean>
  execute: () => Promise<void>
}

From phatnguyenmeai/automation-code-departmemt, MIT.

More from phatnguyenmeai/automation-code-departmemt