claude-vault/skills/skill-creator/templates/fullstack-template.md

Fullstack Skill Template

Use this template when generating skills for Fullstack technologies.

Template Structure

---
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)

-- 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

# 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

# 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

// 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

// 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

# 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

# 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.