devskill 2.0.7 → 2.0.8

package/skills/fluentui-blazor/references/THEMING.md

@@ -0,0 +1,103 @@
+# Theming
+
+## FluentDesignTheme (recommended)
+
+The primary theming component. Place it at the root of your app.
+
+```razor
+<FluentDesignTheme Mode="DesignThemeModes.System"
+                   OfficeColor="OfficeColor.Teams"
+                   StorageName="mytheme" />
+```
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+|---|---|---|---|
+| `Mode` | `DesignThemeModes` | `System` | `Light`, `Dark`, or `System` (follows OS) |
+| `CustomColor` | `string?` | null | Hex accent color (e.g. `"#0078D4"`) |
+| `OfficeColor` | `OfficeColor?` | null | Preset accent: `Teams`, `Word`, `Excel`, `PowerPoint`, `Outlook`, `OneNote` |
+| `NeutralBaseColor` | `string?` | null | Neutral palette base hex color |
+| `StorageName` | `string?` | null | Persist theme to localStorage under this key |
+| `Direction` | `LocalizationDirection?` | null | `Ltr` or `Rtl` |
+| `OnLuminanceChanged` | `EventCallback<LuminanceChangedEventArgs>` | | Fired when dark/light mode changes |
+| `OnLoaded` | `EventCallback<LoadedEventArgs>` | | Fired when theme is loaded from storage |
+
+### Two-way binding
+
+```razor
+<FluentDesignTheme @bind-Mode="@themeMode"
+                   @bind-OfficeColor="@officeColor"
+                   @bind-CustomColor="@customColor"
+                   StorageName="mytheme" />
+
+<FluentSelect Items="@(Enum.GetValues<DesignThemeModes>())"
+              @bind-SelectedOption="@themeMode"
+              OptionText="@(m => m.ToString())" />
+
+@code {
+    private DesignThemeModes themeMode = DesignThemeModes.System;
+    private OfficeColor? officeColor = OfficeColor.Teams;
+    private string? customColor;
+}
+```
+
+### Important: JS interop dependency
+
+`FluentDesignTheme` uses JavaScript interop internally. It will NOT work during server-side pre-rendering. If you need to react to theme changes:
+
+```csharp
+// Use OnAfterRenderAsync, NOT OnInitialized
+protected override async Task OnAfterRenderAsync(bool firstRender)
+{
+    if (firstRender)
+    {
+        // Safe to interact with design tokens here
+    }
+}
+```
+
+## FluentDesignSystemProvider (advanced)
+
+For scoping design tokens to a subtree of the component tree. Provides 50+ CSS custom properties.
+
+```razor
+<FluentDesignSystemProvider AccentBaseColor="#0078D4"
+                            NeutralBaseColor="#808080"
+                            BaseLayerLuminance="0.95">
+    <FluentButton Appearance="Appearance.Accent">Themed Button</FluentButton>
+</FluentDesignSystemProvider>
+```
+
+## Design Token Classes (DI-based, advanced)
+
+For programmatic token control via dependency injection. Each token is a generated service.
+
+```csharp
+@inject AccentBaseColor AccentBaseColor
+
+protected override async Task OnAfterRenderAsync(bool firstRender)
+{
+    if (firstRender)
+    {
+        // Set token for a specific element
+        await AccentBaseColor.SetValueFor(myElement, "#FF0000".ToSwatch());
+
+        // Read token value
+        var currentColor = await AccentBaseColor.GetValueFor(myElement);
+
+        // Remove override
+        await AccentBaseColor.DeleteValueFor(myElement);
+    }
+}
+```
+
+## Available DesignThemeModes
+
+- `DesignThemeModes.Light` — light theme
+- `DesignThemeModes.Dark` — dark theme
+- `DesignThemeModes.System` — follows OS preference
+
+## Available OfficeColor presets
+
+`Teams`, `Word`, `Excel`, `PowerPoint`, `Outlook`, `OneNote`, `Loop`, `Planner`, `SharePoint`, `Stream`, `Sway`, `Viva`, `VivaEngage`, `VivaInsights`, `VivaLearning`, `VivaTopics`.

package/skills/folder-structure-blueprint-generator/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright GitHub, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/skills/folder-structure-blueprint-generator/SKILL.md

@@ -0,0 +1,405 @@
+---
+name: folder-structure-blueprint-generator
+description: 'Comprehensive technology-agnostic prompt for analyzing and documenting project folder structures. Auto-detects project types (.NET, Java, React, Angular, Python, Node.js, Flutter), generates detailed blueprints with visualization options, naming conventions, file placement patterns, and extension templates for maintaining consistent code organization across diverse technology stacks.'
+---
+
+# Project Folder Structure Blueprint Generator
+
+## Configuration Variables
+
+${PROJECT_TYPE="Auto-detect|.NET|Java|React|Angular|Python|Node.js|Flutter|Other"} 
+<!-- Select primary technology -->
+
+${INCLUDES_MICROSERVICES="Auto-detect|true|false"} 
+<!-- Is this a microservices architecture? -->
+
+${INCLUDES_FRONTEND="Auto-detect|true|false"} 
+<!-- Does project include frontend components? -->
+
+${IS_MONOREPO="Auto-detect|true|false"} 
+<!-- Is this a monorepo with multiple projects? -->
+
+${VISUALIZATION_STYLE="ASCII|Markdown List|Table"} 
+<!-- How to visualize the structure -->
+
+${DEPTH_LEVEL=1-5} 
+<!-- How many levels of folders to document in detail -->
+
+${INCLUDE_FILE_COUNTS=true|false} 
+<!-- Include file count statistics -->
+
+${INCLUDE_GENERATED_FOLDERS=true|false} 
+<!-- Include auto-generated folders -->
+
+${INCLUDE_FILE_PATTERNS=true|false} 
+<!-- Document file naming/location patterns -->
+
+${INCLUDE_TEMPLATES=true|false} 
+<!-- Include file/folder templates for new features -->
+
+## Generated Prompt
+
+"Analyze the project's folder structure and create a comprehensive 'Project_Folders_Structure_Blueprint.md' document that serves as a definitive guide for maintaining consistent code organization. Use the following approach:
+
+### Initial Auto-detection Phase
+
+${PROJECT_TYPE == "Auto-detect" ? 
+"Begin by scanning the folder structure for key files that identify the project type:
+- Look for solution/project files (.sln, .csproj, .fsproj, .vbproj) to identify .NET projects
+- Check for build files (pom.xml, build.gradle, settings.gradle) for Java projects
+- Identify package.json with dependencies for JavaScript/TypeScript projects
+- Look for specific framework files (angular.json, react-scripts entries, next.config.js)
+- Check for Python project identifiers (requirements.txt, setup.py, pyproject.toml)
+- Examine mobile app identifiers (pubspec.yaml, android/ios folders)
+- Note all technology signatures found and their versions" : 
+"Focus analysis on ${PROJECT_TYPE} project structure"}
+
+${IS_MONOREPO == "Auto-detect" ? 
+"Determine if this is a monorepo by looking for:
+- Multiple distinct projects with their own configuration files
+- Workspace configuration files (lerna.json, nx.json, turborepo.json, etc.)
+- Cross-project references and shared dependency patterns
+- Root-level orchestration scripts and configuration" : ""}
+
+${INCLUDES_MICROSERVICES == "Auto-detect" ? 
+"Check for microservices architecture indicators:
+- Multiple service directories with similar/repeated structures
+- Service-specific Dockerfiles or deployment configurations
+- Inter-service communication patterns (APIs, message brokers)
+- Service registry or discovery configuration
+- API gateway configuration files
+- Shared libraries or utilities across services" : ""}
+
+${INCLUDES_FRONTEND == "Auto-detect" ? 
+"Identify frontend components by looking for:
+- Web asset directories (wwwroot, public, dist, static)
+- UI framework files (components, modules, pages)
+- Frontend build configuration (webpack, vite, rollup, etc.)
+- Style sheet organization (CSS, SCSS, styled-components)
+- Static asset organization (images, fonts, icons)" : ""}
+
+### 1. Structural Overview
+
+Provide a high-level overview of the ${PROJECT_TYPE == "Auto-detect" ? "detected project type(s)" : PROJECT_TYPE} project's organization principles and folder structure:
+
+- Document the overall architectural approach reflected in the folder structure
+- Identify the main organizational principles (by feature, by layer, by domain, etc.)
+- Note any structural patterns that repeat throughout the codebase
+- Document the rationale behind the structure where it can be inferred
+
+${IS_MONOREPO == "Auto-detect" ? 
+"If detected as a monorepo, explain how the monorepo is organized and the relationship between projects." : 
+IS_MONOREPO ? "Explain how the monorepo is organized and the relationship between projects." : ""}
+
+${INCLUDES_MICROSERVICES == "Auto-detect" ? 
+"If microservices are detected, describe how they are structured and organized." : 
+INCLUDES_MICROSERVICES ? "Describe how the microservices are structured and organized." : ""}
+
+### 2. Directory Visualization
+
+${VISUALIZATION_STYLE == "ASCII" ? 
+"Create an ASCII tree representation of the folder hierarchy to depth level ${DEPTH_LEVEL}." : ""}
+
+${VISUALIZATION_STYLE == "Markdown List" ? 
+"Use nested markdown lists to represent the folder hierarchy to depth level ${DEPTH_LEVEL}." : ""}
+
+${VISUALIZATION_STYLE == "Table" ? 
+"Create a table with columns for Path, Purpose, Content Types, and Conventions." : ""}
+
+${INCLUDE_GENERATED_FOLDERS ? 
+"Include all folders including generated ones." : 
+"Exclude auto-generated folders like bin/, obj/, node_modules/, etc."}
+
+### 3. Key Directory Analysis
+
+Document each significant directory's purpose, contents, and patterns:
+
+${PROJECT_TYPE == "Auto-detect" ? 
+"For each detected technology, analyze directory structures based on observed usage patterns:" : ""}
+
+${(PROJECT_TYPE == ".NET" || PROJECT_TYPE == "Auto-detect") ? 
+"#### .NET Project Structure (if detected)
+
+- **Solution Organization**: 
+  - How projects are grouped and related
+  - Solution folder organization patterns
+  - Multi-targeting project patterns
+
+- **Project Organization**:
+  - Internal folder structure patterns
+  - Source code organization approach
+  - Resource organization
+  - Project dependencies and references
+
+- **Domain/Feature Organization**:
+  - How business domains or features are separated
+  - Domain boundary enforcement patterns
+
+- **Layer Organization**:
+  - Separation of concerns (Controllers, Services, Repositories, etc.)
+  - Layer interaction and dependency patterns
+
+- **Configuration Management**:
+  - Configuration file locations and purposes
+  - Environment-specific configurations
+  - Secret management approach
+
+- **Test Project Organization**:
+  - Test project structure and naming
+  - Test categories and organization
+  - Test data and mock locations" : ""}
+
+${(PROJECT_TYPE == "React" || PROJECT_TYPE == "Angular" || PROJECT_TYPE == "Auto-detect") ? 
+"#### UI Project Structure (if detected)
+
+- **Component Organization**:
+  - Component folder structure patterns
+  - Grouping strategies (by feature, type, etc.)
+  - Shared vs. feature-specific components
+
+- **State Management**:
+  - State-related file organization
+  - Store structure for global state
+  - Local state management patterns
+
+- **Routing Organization**:
+  - Route definition locations
+  - Page/view component organization
+  - Route parameter handling
+
+- **API Integration**:
+  - API client organization
+  - Service layer structure
+  - Data fetching patterns
+
+- **Asset Management**:
+  - Static resource organization
+  - Image/media file structure
+  - Font and icon organization
+  
+- **Style Organization**:
+  - CSS/SCSS file structure
+  - Theme organization
+  - Style module patterns" : ""}
+
+### 4. File Placement Patterns
+
+${INCLUDE_FILE_PATTERNS ? 
+"Document the patterns that determine where different types of files should be placed:
+
+- **Configuration Files**:
+  - Locations for different types of configuration
+  - Environment-specific configuration patterns
+  
+- **Model/Entity Definitions**:
+  - Where domain models are defined
+  - Data transfer object (DTO) locations
+  - Schema definition locations
+  
+- **Business Logic**:
+  - Service implementation locations
+  - Business rule organization
+  - Utility and helper function placement
+  
+- **Interface Definitions**:
+  - Where interfaces and abstractions are defined
+  - How interfaces are grouped and organized
+  
+- **Test Files**:
+  - Unit test location patterns
+  - Integration test placement
+  - Test utility and mock locations
+  
+- **Documentation Files**:
+  - API documentation placement
+  - Internal documentation organization
+  - README file distribution" : 
+"Document where key file types are located in the project."}
+
+### 5. Naming and Organization Conventions
+Document the naming and organizational conventions observed across the project:
+
+- **File Naming Patterns**:
+  - Case conventions (PascalCase, camelCase, kebab-case)
+  - Prefix and suffix patterns
+  - Type indicators in filenames
+  
+- **Folder Naming Patterns**:
+  - Naming conventions for different folder types
+  - Hierarchical naming patterns
+  - Grouping and categorization conventions
+  
+- **Namespace/Module Patterns**:
+  - How namespaces/modules map to folder structure
+  - Import/using statement organization
+  - Internal vs. public API separation
+
+- **Organizational Patterns**:
+  - Code co-location strategies
+  - Feature encapsulation approaches
+  - Cross-cutting concern organization
+
+### 6. Navigation and Development Workflow
+Provide guidance for navigating and working with the codebase structure:
+
+- **Entry Points**:
+  - Main application entry points
+  - Key configuration starting points
+  - Initial files for understanding the project
+
+- **Common Development Tasks**:
+  - Where to add new features
+  - How to extend existing functionality
+  - Where to place new tests
+  - Configuration modification locations
+  
+- **Dependency Patterns**:
+  - How dependencies flow between folders
+  - Import/reference patterns
+  - Dependency injection registration locations
+
+${INCLUDE_FILE_COUNTS ? 
+"- **Content Statistics**:
+  - Files per directory analysis
+  - Code distribution metrics
+  - Complexity concentration areas" : ""}
+
+### 7. Build and Output Organization
+Document the build process and output organization:
+
+- **Build Configuration**:
+  - Build script locations and purposes
+  - Build pipeline organization
+  - Build task definitions
+  
+- **Output Structure**:
+  - Compiled/built output locations
+  - Output organization patterns
+  - Distribution package structure
+  
+- **Environment-Specific Builds**:
+  - Development vs. production differences
+  - Environment configuration strategies
+  - Build variant organization
+
+### 8. Technology-Specific Organization
+
+${(PROJECT_TYPE == ".NET" || PROJECT_TYPE == "Auto-detect") ? 
+"#### .NET-Specific Structure Patterns (if detected)
+
+- **Project File Organization**:
+  - Project file structure and patterns
+  - Target framework configuration
+  - Property group organization
+  - Item group patterns
+  
+- **Assembly Organization**:
+  - Assembly naming patterns
+  - Multi-assembly architecture
+  - Assembly reference patterns
+  
+- **Resource Organization**:
+  - Embedded resource patterns
+  - Localization file structure
+  - Static web asset organization
+  
+- **Package Management**:
+  - NuGet configuration locations
+  - Package reference organization
+  - Package version management" : ""}
+
+${(PROJECT_TYPE == "Java" || PROJECT_TYPE == "Auto-detect") ? 
+"#### Java-Specific Structure Patterns (if detected)
+
+- **Package Hierarchy**:
+  - Package naming and nesting conventions
+  - Domain vs. technical packages
+  - Visibility and access patterns
+  
+- **Build Tool Organization**:
+  - Maven/Gradle structure patterns
+  - Module organization
+  - Plugin configuration patterns
+  
+- **Resource Organization**:
+  - Resource folder structures
+  - Environment-specific resources
+  - Properties file organization" : ""}
+
+${(PROJECT_TYPE == "Node.js" || PROJECT_TYPE == "Auto-detect") ? 
+"#### Node.js-Specific Structure Patterns (if detected)
+
+- **Module Organization**:
+  - CommonJS vs. ESM organization
+  - Internal module patterns
+  - Third-party dependency management
+  
+- **Script Organization**:
+  - npm/yarn script definition patterns
+  - Utility script locations
+  - Development tool scripts
+  
+- **Configuration Management**:
+  - Configuration file locations
+  - Environment variable management
+  - Secret management approaches" : ""}
+
+### 9. Extension and Evolution
+Document how the project structure is designed to be extended:
+
+- **Extension Points**:
+  - How to add new modules/features while maintaining conventions
+  - Plugin/extension folder patterns
+  - Customization directory structures
+  
+- **Scalability Patterns**:
+  - How the structure scales for larger features
+  - Approach for breaking down large modules
+  - Code splitting strategies
+  
+- **Refactoring Patterns**:
+  - Common refactoring approaches observed
+  - How structural changes are managed
+  - Incremental reorganization patterns
+
+${INCLUDE_TEMPLATES ? 
+"### 10. Structure Templates
+
+Provide templates for creating new components that follow project conventions:
+
+- **New Feature Template**:
+  - Folder structure for adding a complete feature
+  - Required file types and their locations
+  - Naming patterns to follow
+  
+- **New Component Template**:
+  - Directory structure for a typical component
+  - Essential files to include
+  - Integration points with existing structure
+  
+- **New Service Template**:
+  - Structure for adding a new service
+  - Interface and implementation placement
+  - Configuration and registration patterns
+  
+- **New Test Structure**:
+  - Folder structure for test projects/files
+  - Test file organization templates
+  - Test resource organization" : ""}
+
+### ${INCLUDE_TEMPLATES ? "11" : "10"}. Structure Enforcement
+
+Document how the project structure is maintained and enforced:
+
+- **Structure Validation**:
+  - Tools/scripts that enforce structure
+  - Build checks for structural compliance
+  - Linting rules related to structure
+  
+- **Documentation Practices**:
+  - How structural changes are documented
+  - Where architectural decisions are recorded
+  - Structure evolution history
+
+Include a section at the end about maintaining this blueprint and when it was last updated.
+"

package/skills/folder-structure-blueprint-generator/SYNC.md

@@ -0,0 +1,5 @@
+# Sync Info
+
+- **Source:** `vendor/awesome-copilot/skills/folder-structure-blueprint-generator`
+- **Git SHA:** `23fb7006c132a0bba75b0e5af7a35cab11272812`
+- **Synced:** 2026-03-24

package/skills/game-engine/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright GitHub, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/skills/game-engine/SKILL.md

@@ -0,0 +1,139 @@
+---
+name: game-engine
+description: 'Expert skill for building web-based game engines and games using HTML5, Canvas, WebGL, and JavaScript. Use when asked to create games, build game engines, implement game physics, handle collision detection, set up game loops, manage sprites, add game controls, or work with 2D/3D rendering. Covers techniques for platformers, breakout-style games, maze games, tilemaps, audio, multiplayer via WebRTC, and publishing games.'
+---
+
+# Game Engine Skill
+
+Build web-based games and game engines using HTML5 Canvas, WebGL, and JavaScript. This skill includes starter templates, reference documentation, and step-by-step workflows for 2D and 3D game development with frameworks such as Phaser, Three.js, Babylon.js, and A-Frame.
+
+## When to Use This Skill
+
+- Building a game engine or game from scratch using web technologies
+- Implementing game loops, physics, collision detection, or rendering
+- Working with HTML5 Canvas, WebGL, or SVG for game graphics
+- Adding game controls (keyboard, mouse, touch, gamepad)
+- Creating 2D platformers, breakout-style games, maze games, or 3D experiences
+- Working with tilemaps, sprites, or animations
+- Adding audio to web games
+- Implementing multiplayer features with WebRTC or WebSockets
+- Optimizing game performance
+- Publishing and distributing web games
+
+## Prerequisites
+
+- Basic knowledge of HTML, CSS, and JavaScript
+- A modern web browser with Canvas/WebGL support
+- A text editor or IDE
+- Optional: Node.js for build tooling and local development servers
+
+## Core Concepts
+
+The following concepts form the foundation of every web-based game engine.
+
+### Game Loop
+
+Every game engine revolves around the game loop -- a continuous cycle of:
+
+1. **Process Input** - Read keyboard, mouse, touch, or gamepad input
+2. **Update State** - Update game object positions, physics, AI, and logic
+3. **Render** - Draw the current game state to the screen
+
+Use `requestAnimationFrame` for smooth, browser-optimized rendering.
+
+### Rendering
+
+- **Canvas 2D** - Best for 2D games, sprite-based rendering, and tilemaps
+- **WebGL** - Hardware-accelerated 3D and advanced 2D rendering
+- **SVG** - Vector-based graphics, good for UI elements
+- **CSS** - Useful for DOM-based game elements and transitions
+
+### Physics and Collision Detection
+
+- **2D Collision Detection** - AABB, circle, and SAT-based collision
+- **3D Collision Detection** - Bounding box, bounding sphere, and raycasting
+- **Velocity and Acceleration** - Basic Newtonian physics for movement
+- **Gravity** - Constant downward acceleration for platformers
+
+### Controls
+
+- **Keyboard** - Arrow keys, WASD, and custom key bindings
+- **Mouse** - Click, move, and pointer lock for FPS-style controls
+- **Touch** - Mobile touch events and virtual joysticks
+- **Gamepad** - Gamepad API for controller support
+
+### Audio
+
+- **Web Audio API** - Programmatic sound generation and spatial audio
+- **HTML5 Audio** - Simple audio playback for music and sound effects
+
+## Step-by-Step Workflows
+
+### Creating a Basic 2D Game
+
+1. Set up an HTML file with a `<canvas>` element
+2. Get the 2D rendering context
+3. Implement the game loop using `requestAnimationFrame`
+4. Create game objects with position, velocity, and size properties
+5. Handle keyboard/mouse input for player control
+6. Implement collision detection between game objects
+7. Add scoring, lives, and win/lose conditions
+8. Add sound effects and music
+
+### Building a 3D Game
+
+1. Choose a framework (Three.js, Babylon.js, A-Frame, or PlayCanvas)
+2. Set up the scene, camera, and renderer
+3. Load or create 3D models and textures
+4. Implement lighting and shaders
+5. Add physics and collision detection
+6. Implement player controls and camera movement
+7. Add audio and visual effects
+
+### Publishing a Game
+
+1. Optimize assets (compress images, minify code)
+2. Test across browsers and devices
+3. Choose distribution platform (web, app stores, game portals)
+4. Implement monetization if needed
+5. Promote through game communities and social media
+
+## Game Templates
+
+Starter templates are available in the `assets/` folder. Each template provides a complete, working example that can be used as a starting point for a new project.
+
+| Template | Description |
+|----------|-------------|
+| `paddle-game-template.md` | 2D Breakout-style game with pure JavaScript |
+| `2d-maze-game.md` | Maze game with device orientation controls |
+| `2d-platform-game.md` | Platformer game using Phaser framework |
+| `gameBase-template-repo.md` | Game base template repository structure |
+| `simple-2d-engine.md` | Simple 2D platformer engine with collisions |
+
+## Reference Documentation
+
+Detailed reference material is available in the `references/` folder. Consult these files for in-depth coverage of specific topics.
+
+| Reference | Topics Covered |
+|-----------|---------------|
+| `basics.md` | Game development introduction and anatomy |
+| `web-apis.md` | Canvas, WebGL, Web Audio, Gamepad, and other web APIs |
+| `techniques.md` | Collision detection, tilemaps, async scripts, audio |
+| `3d-web-games.md` | 3D theory, frameworks, shaders, WebXR |
+| `game-control-mechanisms.md` | Touch, keyboard, mouse, and gamepad controls |
+| `game-publishing.md` | Distribution, promotion, and monetization |
+| `algorithms.md` | Raycasting, collision, physics, vector math |
+| `terminology.md` | Game development glossary |
+| `game-engine-core-principles.md` | Core design principles for game engines |
+
+## Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| Canvas is blank | Check that you are calling drawing methods after getting the context and inside the game loop |
+| Game runs at different speeds | Use delta time in update calculations instead of fixed values |
+| Collision detection is inconsistent | Use continuous collision detection or reduce time steps for fast-moving objects |
+| Audio does not play | Browsers require user interaction before playing audio; trigger playback from a click handler |
+| Performance is poor | Profile with browser dev tools, reduce draw calls, use object pooling, and optimize asset sizes |
+| Touch controls are unresponsive | Prevent default touch behavior and handle touch events separately from mouse events |
+| WebGL context lost | Handle the `webglcontextlost` event and restore state on `webglcontextrestored` |