Astro Project Instructions Generator

Generate a comprehensive CLAUDE.md file that provides AI coding assistants with complete context about an Astro project's architecture, patterns, and workflows.

What This Skill Does

Creates a detailed instruction file (CLAUDE.md) for Astro-based projects that includes:

Instructions

Step 1: Analyze Project Structure

Examine the project to identify:

Step 2: Document Common Commands

Create a comprehensive command reference covering:

**Development Commands**:

**Code Quality Commands**:

**Testing Commands**:

**Dependency Management**:

Step 3: Define Architecture Section

Document the technology stack and project structure:

**Technology Stack**:

**Project Structure**:

**Key Configurations**:

Step 4: Establish Development Patterns

#### Component Development Patterns

Document how to:

#### CSS Architecture

Define styling approach:

#### Testing Patterns

Provide E2E testing structure:

```typescript

import { test, expect } from '@playwright/test'

test.describe('Feature Name', () => {

test.beforeEach(async ({ page }) => {

await page.goto('/')

})

test('should display expected content', async ({ page }) => {

await expect(page.getByRole('heading', { name: 'Title' })).toBeVisible()

})

})

```

**Best Practices**:

Step 5: Define Quality Assurance Protocol

Create a verification workflow that must run after EACH task:

```bash

bun typecheck # TypeScript validation

bun check # Format and lint

bun test:e2e # E2E tests

```

**Critical Rule**: Never proceed to next task until all checks pass.

Step 6: Document Task Management Workflow

1. User assigns tasks

2. Create todos for each task

3. Complete one todo at a time

4. Run ALL verification scripts

5. Fix any issues before proceeding

6. Mark complete only when checks pass

Step 7: Include UI/UX Strategy (If Applicable)

For projects with design systems, document:

**Design Philosophy**:

**Lessons Learned**:

**Recent Changes**:

Step 8: Add Important Notes

Include project-specific guidance:

Step 9: Create Global CSS Patterns Section

Document standard CSS utilities and base styles:

```css

@theme inline {

--font-sans: var(--font-geist-sans);

}

@layer base {

body {

@apply bg-purple-50/50 text-foreground font-sans;

}

}

@layer utilities {

.text-accent-purple {

@apply text-purple-600 font-bold;

}

}

```

Step 10: Define Section Design Patterns

Provide templates for common section types:

**Interactive Sections**: Use cards, badges, animations

**Text-Heavy Sections**: Simple container + max-width + paragraphs

**Mixed Sections**: Combine both approaches

Best Practices

1. **Keep it actionable**: Every section should help AI make concrete decisions

2. **Include examples**: Show code patterns, don't just describe them

3. **Document the "why"**: Explain decisions, not just the "what"

4. **Maintain session summaries**: Track recent changes for context

5. **Emphasize quality gates**: Make testing/verification workflows explicit

6. **Use clear hierarchy**: Organize with logical sections and subsections

7. **Include command reference**: Make it easy to find common operations

8. **Document patterns**: Provide templates for repetitive tasks

Constraints