Minesweeper Development Guidelines

This skill provides development guidelines for building a modern minesweeper game using vanilla JavaScript, HTML5, and CSS3.

Technology Stack

Project Structure

Follow this standardized directory layout:

```

src/

├── index.html

├── styles/

│ ├── tokens.css

│ ├── layout.css

│ └── components/

│ └── board.css

└── scripts/

├── core/

├── state/

├── ui/

└── main.js

tests/

├── unit/

├── integration/

└── accessibility/

```

Development Commands

When working on this project, use these npm scripts:

Code Style Guidelines

1. **HTML5**: Use semantic elements and follow accessibility best practices

2. **CSS3**: Organize styles using tokens, layout, and component-specific files

3. **JavaScript (ES2020)**:

- Use modern ES2020 features (optional chaining, nullish coalescing, etc.)

- No frameworks or libraries - vanilla JS only

- Separate concerns: core logic, state management, and UI

- Follow standard JavaScript conventions

Architecture Principles

Instructions for AI Agent

When helping with this minesweeper project:

1. **Always reference the project structure** when creating or modifying files

2. **Use ES2020 syntax** - arrow functions, destructuring, optional chaining, etc.

3. **Keep it vanilla** - never suggest frameworks, libraries, or build tool dependencies beyond what's specified

4. **Separate concerns** - place game logic in `core/`, state in `state/`, UI in `ui/`

5. **Test coverage** - suggest tests when implementing new features

6. **CSS organization** - use tokens for design system values, keep components modular

7. **Accessibility** - ensure keyboard navigation and screen reader support

Example Usage

When asked to add a feature:

1. Determine which directory the code belongs in (core/state/ui)

2. Write vanilla ES2020 JavaScript

3. Update relevant CSS in the appropriate component file

4. Suggest corresponding unit or integration tests

5. Consider accessibility implications