# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Agent Workflow

### Primary Agent (You)

As the primary Claude agent, you handle ALL general development tasks:
- Writing and modifying code (HTML, CSS, JavaScript)
- Reading and analyzing files
- Implementing features and fixing bugs
- Answering questions and providing guidance
- General project management and coordination

**You are the main worker. Specialist agents are consultants only.**

### Specialist Agents (Consultants)

Specialist agents in `.claude/agents/` are invoked ONLY for specific workflow stages:

1. **minimalist-geek-webpage-builder**
   - **When**: User explicitly requests geek-style webpage creation
   - **Role**: Design consultation and implementation guidance
   - **Not for**: General HTML/CSS questions or minor tweaks

2. **code-reviewer**
   - **When**: After completing a logical chunk of work
   - **Role**: Review code quality, security, and best practices
   - **Not for**: Writing code or making changes

3. **test-engineer**
   - **When**: User requests test creation or test strategy
   - **Role**: Design and implement comprehensive tests
   - **Not for**: General debugging or code fixes

4. **ux-expert**
   - **When**: User asks for UX evaluation or design guidance
   - **Role**: Usability analysis and accessibility recommendations
   - **Not for**: Implementation or coding

5. **product-manager**
   - **When**: User needs requirements definition or prioritization
   - **Role**: Create user stories, prioritize features
   - **Not for**: Technical implementation

6. **devops-engineer**
   - **When**: User needs CI/CD, infrastructure, or deployment help
   - **Role**: DevOps strategy and configuration
   - **Not for**: Application code or Git basics

7. **scrum-master**
   - **When**: User needs sprint planning or agile process help
   - **Role**: Facilitate agile ceremonies and remove blockers
   - **Not for**: Technical decisions or coding

### Workflow Principle

**Primary Agent does the work → Specialist agents provide expert consultation when needed**

Do NOT delegate routine tasks to specialists. Only invoke specialist agents when:
- User explicitly requests specialist expertise
- You've completed work that needs expert review
- Complex decisions require domain-specific knowledge

## Project Overview

**Project Name**: McDonald's IT Halloween Event Page

**Purpose**: A minimalist, geek-style webpage to announce Halloween day activities for McDonald's IT department.

**Target Audience**: McDonald's IT staff and programmers

## Design Requirements

### Visual Style
- **Aesthetic**: Extreme minimalist geek style, inspired by Homebrew (macOS package manager)
- **Background**: Pure black (#000000)
- **Typography**: Monospace fonts only (Courier New, Monaco, Consolas, Menlo)
- **Color Scheme**: High contrast - green/white/amber text on black background
- **No Effects**: No shadows, gradients, borders, or decorative elements

### Layout Structure
1. **Center**: ASCII art of "McDonald's" logo as main visual element
2. **Below**: Halloween event information and activity details
3. **Overall**: Terminal/command-line interface aesthetic

### Technical Requirements
- **Responsive**: Must work seamlessly on both web (desktop) and mobile devices
- **Cross-device**: ASCII art must remain legible on all screen sizes
- **Performance**: Single-file HTML with inline CSS, minimal dependencies
- **Compatibility**: Modern browsers (Chrome, Firefox, Safari, Edge)

## Technology Stack

- Pure HTML5 (semantic markup)
- Inline CSS (no external stylesheets)
- Vanilla JavaScript (only if necessary)
- No frameworks or libraries

## File Structure

```
test-project/
├── .claude/
│   ├── agents/              # AI agent configurations
│   └── constitution.md      # Agent system principles
├── CLAUDE.md               # This file
├── index.html              # Main Halloween event page
└── README.md               # Project documentation
```

## Development Guidelines

### Code Style
- Clean, semantic HTML5
- Well-commented code for maintainability
- Consistent indentation (2 spaces)
- UTF-8 character encoding

### Design Principles
- Mobile-first responsive design
- Accessibility considerations (WCAG 2.1 AA)
- Fast load time (< 1 second)
- Self-contained single file for easy deployment

### ASCII Art Guidelines
- Use standard ASCII characters for maximum compatibility
- Center alignment
- Provide mobile-optimized version if needed
- Test on multiple screen sizes

## Project Metadata

**Created**: 2025-10-04 08:50:35 UTC / 2025-10-04 16:50:35 GMT+8  
**Last Updated**: 2025-10-04 08:50:35 UTC / 2025-10-04 16:50:35 GMT+8  
**Status**: In Development

## Version Control

**Repository**: `ssh://gitea@git.shihong.me:2222/snowprint/halloween-test.git`

### Git Workflow Requirements

All team members must maintain good version control practices:

1. **Commit Conventions**: Use conventional commit format
   - `feat(scope): description` for new features
   - `fix(scope): description` for bug fixes
   - `docs(scope): description` for documentation

2. **Branch Strategy**:
   - `main` - production-ready code (protected)
   - `feature/*` - new features
   - `fix/*` - bug fixes
   - `hotfix/*` - urgent fixes

3. **Code Review**: All changes require review before merging to main

4. **Security**: Never commit credentials, API keys, or sensitive data

### DevOps Responsibilities

**Primary agent handles**: Basic Git operations (commit, push, branch, merge)

**DevOps specialist consulted for**:
- CI/CD pipeline setup
- Infrastructure as code
- Deployment automation
- Complex repository management
- Security scanning and monitoring

See `.claude/git-workflow.md` for agent-specific guidelines.

## Time Recording Standards

**Critical Policy**: All timestamps must be recorded accurately.

- **Never fabricate dates or times**
- **Always use dual timezone format**: UTC and GMT+8
- **Format**: `YYYY-MM-DD HH:MM:SS UTC` / `YYYY-MM-DD HH:MM:SS GMT+8`
- **Unknown dates**: Use "TBD" (To Be Determined)

See `.claude/time-recording-policy.md` for complete guidelines.

## Development Workflow

### Standard Development Process

1. **Implementation** (Primary Agent)
   - Write code based on requirements
   - Follow design guidelines
   - Commit changes with proper messages

2. **Review** (code-reviewer agent - if needed)
   - Invoke after completing logical work units
   - Review for quality, security, performance

3. **Testing** (test-engineer agent - if requested)
   - Create test cases when user asks
   - Validate functionality

4. **Deployment** (devops-engineer agent - if needed)
   - Setup deployment pipeline
   - Configure hosting

### Current Project Status

1. ✅ Create project README with setup instructions
2. ✅ Set up Git repository and workflow documentation
3. ⏳ Implement main Halloween event page (index.html)
4. ⏳ Test responsive behavior on various devices
5. ⏳ Validate HTML5 compliance
6. ⏳ Deploy to hosting platform

## Quick Reference

**Primary Agent (You)**: Does all the actual work
**Specialist Agents**: Provide expert consultation only when specifically needed

**Remember**: You are capable and should handle most tasks directly. Don't over-delegate.