# Fullstack Skill Template

Use this template when generating skills for Fullstack technologies.

## Template Structure

```yaml
---
name: {{SKILL_NAME}}
description: {{DESCRIPTION_MAX_200_CHARS}}
argument-hint: {{OPTIONAL_ARGS}}
allowed-tools: Read, Write, Edit, Glob, Grep
---

# {{SKILL_TITLE}}

{{BRIEF_OVERVIEW}}

## When to Use

- {{USE_CASE_1}}
- {{USE_CASE_2}}
- {{USE_CASE_3}}

## Prerequisites

- {{PREREQUISITE_1}}
- {{PREREQUISITE_2}}

## Instructions

### Step 1: {{STEP_TITLE}}
{{DETAILED_INSTRUCTIONS}}

### Step 2: {{STEP_TITLE}}
{{DETAILED_INSTRUCTIONS}}

## Patterns & Best Practices

### {{PATTERN_NAME}}
{{PATTERN_DESCRIPTION}}

\`\`\`{{LANGUAGE}}
{{CODE_EXAMPLE}}
\`\`\`

## Examples

### Example 1: {{EXAMPLE_TITLE}}
{{EXAMPLE_DESCRIPTION}}

\`\`\`{{LANGUAGE}}
{{EXAMPLE_CODE}}
\`\`\`

## Common Pitfalls

- **{{PITFALL_1}}**: {{EXPLANATION}}
- **{{PITFALL_2}}**: {{EXPLANATION}}

## Verification

{{HOW_TO_VERIFY_SUCCESS}}
```

---

## Technology-Specific Sections

### PostgreSQL Skills

Include these sections:
- Schema design patterns (normalization, indexes)
- Query optimization (EXPLAIN ANALYZE)
- Migration strategies
- Backup/restore procedures
- Connection pooling (PgBouncer)

```sql
-- Always include practical SQL examples
CREATE INDEX CONCURRENTLY idx_name ON table(column);
```

### Django Skills

Include these sections:
- Model field choices and constraints
- Manager and QuerySet methods
- Signal patterns
- Middleware structure
- DRF serializer patterns

```python
# Django model example
class MyModel(models.Model):
    class Meta:
        ordering = ['-created_at']
        indexes = [
            models.Index(fields=['status', 'created_at']),
        ]
```

### REST API Skills

Include these sections:
- HTTP method conventions
- Status code usage
- Error response format
- Authentication patterns
- Pagination strategies

```python
# DRF ViewSet example
@api_view(['GET', 'POST'])
@permission_classes([IsAuthenticated])
def endpoint(request):
    ...
```

### Next.js Skills

Include these sections:
- App Router structure
- Server vs Client Components
- Data fetching patterns
- Caching strategies
- Middleware usage

```typescript
// Server Component example
async function Page({ params }: { params: { id: string } }) {
  const data = await fetchData(params.id);
  return <Component data={data} />;
}
```

### React Skills

Include these sections:
- Component composition
- Hook patterns (custom hooks)
- State management decisions
- Performance optimization
- Testing strategies

```tsx
// Custom hook example
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debouncedValue;
}
```

### Celery Skills

Include these sections:
- Task definition patterns
- Error handling and retries
- Task chaining and groups
- Periodic task setup
- Result backend usage

```python
# Celery task example
@shared_task(
    bind=True,
    max_retries=3,
    default_retry_delay=60,
    autoretry_for=(ConnectionError,),
)
def process_data(self, data_id: int) -> dict:
    ...
```

### Redis Skills

Include these sections:
- Data structure selection
- Cache invalidation strategies
- TTL best practices
- Memory optimization
- Pub/Sub patterns

```python
# Redis caching example
cache_key = f"user:{user_id}:profile"
cached = redis_client.get(cache_key)
if not cached:
    data = fetch_profile(user_id)
    redis_client.setex(cache_key, 3600, json.dumps(data))
```

---

## Description Examples by Technology

| Technology | Good Description |
|------------|------------------|
| PostgreSQL | `Generates optimized PostgreSQL queries with proper indexes and EXPLAIN analysis. Use for query performance tuning.` |
| Django | `Creates Django models with proper Meta options, indexes, managers, and admin registration. Use when adding new models.` |
| REST API | `Designs RESTful API endpoints following OpenAPI spec with proper error handling. Use when creating new endpoints.` |
| Next.js | `Generates Next.js App Router pages with proper data fetching and caching. Use for new page components.` |
| React | `Creates React components with TypeScript, proper hooks, and accessibility. Use when building UI components.` |
| Celery | `Defines Celery tasks with retry logic, error handling, and monitoring. Use for async task implementation.` |
| Redis | `Implements Redis caching with proper TTL and invalidation strategies. Use for caching layer setup.` |