---
description: Quick reference for common patterns and commands
alwaysApply: false
globs: **/*.{vue,js,ts,html}
---

# Quick Reference Guide

## Vue 3 Composition API Template

```vue
<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// Props
const props = defineProps({
  title: String
})

// Emits
const emit = defineEmits(['update'])

// State
const message = ref('Hello')

// Computed
const displayMessage = computed(() => message.value.toUpperCase())

// Methods
const handleClick = () => {
  emit('update', { value: message.value })
}

// Lifecycle
onMounted(() => {
  console.log('Component mounted')
})
</script>
```

## Tailwind Quick Classes

### Layout
```html
<div class="flex items-center justify-between gap-4">
<div class="grid grid-cols-3 gap-6">
<div class="max-w-7xl mx-auto px-4">
```

### Spacing (4px grid)
```html
<div class="p-4">         <!-- 16px all sides -->
<div class="px-6 py-3">   <!-- 24px H, 12px V -->
<div class="mb-6">        <!-- 24px bottom -->
```

### Typography
```html
<p class="text-sm">       <!-- 14px -->
<p class="text-base">     <!-- 16px -->
<p class="text-xl">       <!-- 20px -->
<p class="font-semibold"> <!-- 600 -->
<p class="font-bold">     <!-- 700 -->
```

### Responsive
```html
<div class="text-base md:text-lg lg:text-xl">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div class="hidden md:block">  <!-- Desktop only -->
<div class="block md:hidden">  <!-- Mobile only -->
```

## Common Component Patterns

### Button
```html
<button class="px-6 py-3 bg-primary text-white rounded-lg font-semibold
               hover:bg-primary-dark transition-colors">
  Click Me
</button>
```

### Input
```html
<input 
  type="text"
  class="w-full px-4 py-2.5 border border-gray-300 rounded-lg
         focus:border-primary focus:ring-2 focus:ring-primary-focus"
/>
```

### Card
```html
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
  <h3 class="text-xl font-semibold mb-2">Title</h3>
  <p class="text-gray-600">Content</p>
</div>
```

## Error Handling Pattern

```javascript
async function fetchData() {
  const error = ref(null)
  const isLoading = ref(true)
  const data = ref(null)
  
  try {
    const response = await fetch('/api/data')
    if (!response.ok) throw new Error(`HTTP ${response.status}`)
    data.value = await response.json()
  } catch (err) {
    error.value = err.message
  } finally {
    isLoading.value = false
  }
  
  return { data, error, isLoading }
}
```

## Git Commands

```bash
# Daily workflow
git status
git checkout -b feature/new-feature
git add .
git commit -m "feat: add feature"
git push origin feature/new-feature

# Undo changes
git restore .

# Stash
git stash
git stash pop
```

## Performance Targets

```
LCP (Largest Contentful Paint): < 2.5s
FID (First Input Delay):        < 100ms
CLS (Cumulative Layout Shift):  < 0.1
Bundle Size:                     < 200KB gzipped
```

## Accessibility Quick Checks

- [ ] Images have alt text
- [ ] Color contrast ≥ 4.5:1
- [ ] Keyboard navigation works
- [ ] Focus indicators visible
- [ ] Form labels present
- [ ] Touch targets ≥ 44x44px

## Responsive Breakpoints

```
sm:  640px   // Tablet
md:  768px   // Desktop
lg:  1024px  // Large
xl:  1280px  // XL
```

## Common Regex Patterns

```javascript
// Email
/^[^\s@]+@[^\s@]+\.[^\s@]+$/

// URL
/^https?:\/\/.+/

// Hex color
/^#[0-9A-Fa-f]{6}$/
```