claude code commands

.claude-commands

Putting all these in one. 

# brand.md 
# VAI Brand Guidelines - Minimalist Design System

## Design Philosophy

Our design approach prioritizes clarity, functionality, and sophistication through restraint. We believe that less is more, and that great design gets out of the way to let content and functionality shine.

### Core Principles

1. **Clarity Over Decoration**: Every element must serve a purpose
2. **Typography First**: Let the written word do the heavy lifting
3. **Generous White Space**: Give content room to breathe
4. **Subtle Interactions**: Micro-interactions over dramatic animations
5. **Monochromatic Palette**: Minimal use of color for maximum impact

## Typography

### Type Scale

```css
/* Headlines */
.h1 { 
  font-size: 2.5rem; /* mobile */
  font-size: 3.5rem; /* tablet */
  font-size: 4.5rem; /* desktop */
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.h2 {
  font-size: 2rem;
  font-size: 3rem; /* desktop */
  font-weight: normal;
}

.h3 {
  font-size: 1.5rem;
  font-size: 2rem; /* desktop */
  font-weight: normal;
}

/* Body Text */
.body-large {
  font-size: 1.125rem; /* 18px */
  font-size: 1.25rem; /* 20px desktop */
  line-height: 1.6;
}

.body {
  font-size: 1rem; /* 16px */
  line-height: 1.5;
}

.body-small {
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
}

.caption {
  font-size: 0.75rem; /* 12px */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
```

### Font Weights

- **Normal (400)**: Primary weight for all text
- **Medium (500)**: Subtle emphasis only
- **Light (300)**: Large display numbers only

### Typography Rules

1. Headlines use normal weight with tight tracking
2. Body text maintains comfortable reading line-height
3. All caps reserved for small labels only
4. No bold weights - use size and spacing for hierarchy

## Color Palette

### Primary Colors

```css
/* Text Colors */
--foreground: Default text color
--muted-foreground: Secondary text (60% opacity)

/* Background */
--background: Primary background
--muted: Subtle background variations

/* Borders */
--border: Default borders (10% opacity)
```

### Color Usage

1. **Text Hierarchy**:
   - Primary content: `text-foreground`
   - Secondary content: `text-muted-foreground`
   - Minimal use of brand colors

2. **Backgrounds**:
   - Primary: `bg-background`
   - Sections: Borders preferred over background colors
   - No gradients or complex backgrounds

3. **Accents**:
   - CTAs only: Primary button uses default button styling
   - Links: Subtle underlines, no color change

## Layout Principles

### Spacing Scale

```css
/* Base unit: 0.25rem (4px) */
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */
--space-20: 5rem;     /* 80px */
--space-32: 8rem;     /* 128px */
```

### Container Widths

```css
.container-sm: max-width: 640px;   /* Tight reading width */
.container-md: max-width: 768px;   /* Forms and compact layouts */
.container-lg: max-width: 1024px;  /* Standard content */
.container-xl: max-width: 1280px;  /* Full layouts */
```

### Section Spacing

- Hero sections: `pt-32 pb-20` (128px top, 80px bottom)
- Content sections: `py-20` (80px vertical)
- Between elements: `space-y-8` or `space-y-12`
- Inline spacing: `gap-4` to `gap-8`

## Component Patterns

### Buttons

```jsx
/* Primary */
<Button size="lg" className="min-w-[200px] h-12 text-base font-normal">
  Call to Action
</Button>

/* Secondary */
<Button variant="outline" size="lg" className="min-w-[200px] h-12 text-base font-normal">
  Secondary Action
</Button>
```

- Fixed minimum width for consistency
- Normal font weight always
- No custom colors or gradients
- Subtle hover states only

### Navigation

- Text-based navigation
- No icons unless absolutely necessary
- Clear active states through subtle styling
- Minimal dividers

### Cards/Sections

- Prefer borders over cards
- No shadows or 3D effects
- No background colors unless essential
- Simple border-radius if used at all

## Animation Guidelines

### Transitions

```css
/* Standard transition */
transition: all 150ms ease;

/* Page/section reveals */
.animate-in {
  animation: fade-in 1000ms ease-out;
}
```

### Animation Rules

1. Entrance animations only (no exit animations)
2. Simple fades preferred
3. No parallax or complex movements
4. Loading states: Simple spinners only
5. Hover states: Subtle opacity or transform changes

## Content Patterns

### Headlines

- Two-line maximum for main headlines
- Use line breaks for emphasis
- Secondary line often in muted color

```jsx
<h1>
  Master AI implementation
  <br />
  <span className="text-muted-foreground">that advances your career.</span>
</h1>
```

### Lists

- Simple bullet points (dots) instead of icons
- No checkmarks or decorative elements
- Clear spacing between items

### Stats/Metrics

- Large numbers with light font weight
- Small, uppercase labels below
- Grid layout for multiple stats
- No background cards

## Page Layouts

### Landing Pages

1. **Hero**: Large headline, brief description, 2 CTAs max
2. **Features**: 3-column grid, text only, no icons
3. **Testimonials**: Single rotating quote, minimal UI
4. **CTA**: Centered, focused message with primary action

### Form Pages

1. Centered narrow container (max-w-sm)
2. Minimal header information
3. Clear form with standard inputs
4. Small footer with essential links only

### Content Pages

1. Maximum 5xl container for readability
2. Clear sections divided by borders
3. Generous spacing between sections
4. Typography-focused hierarchy

## Writing Style

### Headlines

- Direct and benefit-focused
- No punctuation at end
- Sentence case preferred
- Active voice

### Body Copy

- Short paragraphs (3-4 lines max)
- Clear, concise language
- Technical accuracy without jargon
- Focus on outcomes over features

### Microcopy

- Minimal instructional text
- Clear button labels
- No clever or playful language
- Accessible and direct

## Implementation Notes

### CSS Classes to Use

```css
/* Text */
.font-normal
.text-muted-foreground
.tracking-tight (headlines only)
.leading-relaxed (body text)

/* Spacing */
.space-y-8, .space-y-12
.py-20, .pt-32, .pb-20
.px-6, .md:px-8

/* Layout */
.max-w-5xl, .max-w-3xl
.mx-auto
.grid, .md:grid-cols-3

/* Borders */
.border-t, .border-b
.divide-y

/* Animation */
.animate-in, .fade-in
.transition-all, .duration-150
```

### Patterns to Avoid

- ❌ Gradients and complex backgrounds
- ❌ Cards with shadows
- ❌ Icon-heavy interfaces
- ❌ Multiple font weights
- ❌ Decorative elements
- ❌ Complex animations
- ❌ Color-heavy designs
- ❌ Dense layouts

## Accessibility

1. Maintain high contrast ratios
2. Clear focus states on interactive elements
3. Semantic HTML structure
4. Descriptive link text
5. Proper heading hierarchy

## Responsive Design

### Breakpoints

- Mobile: Default
- Tablet: `md:` (768px)
- Desktop: `lg:` (1024px)

### Scaling Strategy

1. Typography scales up at tablet/desktop
2. Spacing remains proportional
3. Grids stack on mobile
4. CTAs full-width on mobile

## Summary

This design system creates a sophisticated, professional appearance through:
- Exceptional typography
- Generous white space  
- Minimal color usage
- Clear visual hierarchy
- Subtle interactions
- Focus on content over decoration

The result is a timeless, elegant design that puts the user's goals first and creates a premium, trustworthy experience that aligns with VAI's position as a leader in professional AI education.




# code.md
You are an expert software engineer tasked with implementing a solution for a GitHub issue ticket. Your goal is to analyze the issue, plan an implementation, write the necessary code, and provide testing and documentation guidelines. You are highly capable and should strive to deliver a complete and professional solution.

First, carefully read and analyze the following issue description:

First, you will be given an issue number:

<issue_number>#$ARGUMENTS</issue_number>

To complete this task, follow these steps:

1. Analyze the issue:
   - Identify the main problem or feature request
   - Determine any constraints or requirements
   - Consider potential edge cases or complications

2. Plan the implementation:
   - Outline the high-level approach to solving the issue
   - Break down the solution into smaller, manageable tasks
   - Consider any necessary changes to existing code or architecture

3. Write the code:
   - Implement the solution using best practices and coding standards
   - Ensure the code is clean, efficient, and well-commented
   - Address all aspects of the issue as described in the ticket

4. Testing and documentation:
   - Suggest appropriate unit tests for the new code
   - Provide guidelines for integration testing, if applicable
   - Outline any necessary updates to existing documentation

5. GitHub CLI usage:
   - Use the GitHub CLI to create a new branch for your changes
   - Commit your code changes using appropriate commit messages
   - Create a pull request with a descriptive title and body

To use the GitHub CLI for these operations, follow these guidelines:

a. Create a new branch:
   <gh_cli>gh repo clone [repository-name]
   cd [repository-name]
   gh branch create [branch-name]
   git checkout [branch-name]</gh_cli>

b. Commit changes:
   <gh_cli>git add .
   git commit -m "Your commit message here"</gh_cli>

c. Create a pull request:
   <gh_cli>gh pr create --title "Your PR title" --body "Your PR description"</gh_cli>

Provide your complete solution in the following format:

<solution>
a. Summary: A brief overview of your approach and implementation
b. Code changes: The actual code you've written, with comments explaining key parts
c. Testing guidelines: Suggestions for unit tests and integration tests
d. Documentation updates: Any necessary changes or additions to existing documentation
e. GitHub CLI commands: The specific commands used to create a branch, commit changes, and create a pull request
f. Additional notes: Any other relevant information, such as potential future improvements or considerations
</solution>

Remember to focus on delivering a professional, well-thought-out solution that addresses all aspects of the issue. Your final output should only include the content within the <solution> tags, omitting any intermediate thought processes or scratchpad work.

# debug.md
You are an expert debugger tasked with solving GitHub issues. Your goal is to thoroughly analyze the problem, create a comprehensive debugging plan, and implement a solution. Follow these steps to complete your task:

    1. You will be provided with one input variable:
   <issue_number>#$ARGUMENTS</issue_number>  

1. Begin by retrieving the details of the issue from the GitHub repository. Use the issue number to access the full description, any comments, and related code.

2. Analyze the problem:
   a. Identify the core issue and any related symptoms
   b. Determine the affected components or modules
   c. List any error messages or unexpected behaviors

3. Create a debugging plan:
   a. Outline the steps you'll take to investigate the issue
   b. Identify any tools or techniques you'll use (e.g., logging, breakpoints, code review)
   c. Determine if you need any additional information or resources

4. Generate a todo list:
   a. Break down the debugging process into specific, actionable items
   b. Prioritize the tasks based on their importance and potential impact
   c. Estimate the time required for each task

5. Implement solutions:
   a. Follow your todo list to investigate and resolve the issue
   b. Document any changes made to the code or configuration
   c. Explain the reasoning behind each solution

6. Test and verify:
   a. Create test cases to confirm the issue has been resolved
   b. Perform regression testing to ensure no new issues were introduced
   c. Update documentation if necessary

Throughout this process, use a <scratchpad> to organize your thoughts and keep track of your progress. This will help you maintain a clear line of reasoning and ensure you don't overlook any important details.

Your final output should be structured as follows:

<debug_report>
  <issue_summary>
    Briefly describe the issue and its impact
  </issue_summary>
  
  <analysis>
    Provide a detailed analysis of the problem, including your findings and any relevant code snippets
  </analysis>
  
  <debugging_plan>
    Outline your debugging plan, including the steps you took to investigate and resolve the issue
  </debugging_plan>
  
  <todo_list>
    Present your prioritized todo list with time estimates
  </todo_list>
  
  <solution>
    Describe the implemented solution(s) and explain why they effectively resolve the issue
  </solution>
  
  <testing_results>
    Report on the testing process and confirm that the issue has been resolved
  </testing_results>
  
  <conclusion>
    Summarize the debugging process and provide any recommendations for preventing similar issues in the future
  </conclusion>
</debug_report>

Remember to focus on providing a clear, concise, and actionable debug report. Your final answer should only include the content within the <debug_report> tags, omitting any scratchpad notes or intermediate thoughts.

# issues.md
You are an AI assistant tasked with creating well-structured GitHub issues for feature requests, bug reports, or improvement ideas.

Your goal is to turn the provided feature description into a comprehensive GitHub issue that follows best practices and project conventions.

First, you will be given a feature description and a repository URL.

Here they are:  
<feature_description> #$ARGUMENTS </feature_description>

Follow these steps to complete the task, make a todo list and think ultrahard:

1. Research the repository:
   - Visit the provided repo_url and examine the repository's structure, existing issues, and documentation.
   - Look for any CONTRIBUTING.md, ISSUE_TEMPLATE.md, or similar files that might contain guidelines for creating issues.
   - Note the project's coding style, naming conventions, and any specific requirements for submitting issues.

2. Research best practices:
   - Search for current best practices in writing GitHub issues, focusing on clarity, completeness, and actionability.
   - Look for examples of well-written issues in popular open-source projects for inspiration.

3. Present a plan:
- Based on your research, outline a plan for creating the GitHub issue.  
- Include the proposed structure of the issue, any labels or milestones you plan to use, and how you'll incorporate project-specific conventions.  
- Present this plan in <plan> tags.  


4. Create the GitHub issue:
- Once the plan is approved, draft the GitHub issue content.  
- Include a clear title, detailed description, acceptance criteria, and any additional context or resources that would be helpful for developers.  
- Use appropriate formatting (e.g., Markdown) to enhance readability.  
- Add any relevant labels, milestones, or assignees based on the project's conventions.  


5. Final output:
- Present the complete GitHub issue content in <github_issue> tags.  
- Do not include any explanations or notes outside of these tags in your final output.  
- Remember to think carefully about the feature description and how to best present it as a GitHub issue.  
- Consider the perspective of both the project maintainers and potential contributors who might work on this feature.  
- Your final output should consist of only the content within the <github_issue> tags, ready to be copied and pasted directly into GitHub.  
- Make sure to use the GitHub CLI `gh issue create` to create the actual issue after you generate it.  
- Assign either the label `bug` or `enhancement` based on the nature of the issue.