A clean, minimal template for building games with React, TypeScript, Three.js, and Vite - built with security-first principles.
This template implements comprehensive security measures:
- ๐ก๏ธ Supply Chain Security - OSSF Scorecard analysis and dependency review
- ๐ Static Analysis - CodeQL scanning for vulnerabilities
- ๐ฆ Dependency Protection - Automated dependency vulnerability checks
- ๏ฟฝ License Compliance - Automated checking of dependency licenses (MIT, Apache-2.0, BSD variants, ISC, CC0-1.0, Unlicense)
- ๐ SBOM Quality Validation - Automated SBOM quality scoring with minimum 7.0/10 threshold using SBOMQS
- ๏ฟฝ๐ Runner Hardening - All CI/CD runners are hardened with audit logging
- ๐ Security Policies - GitHub security advisories and vulnerability reporting
- ๐ท๏ธ Pinned Dependencies - All GitHub Actions pinned to specific SHA hashes
- ๐ SBOM Generation - Software Bill of Materials for transparency
- ๐ Build Attestations - Cryptographic proof of build integrity
- ๐ก๏ธ Immutable Releases - Artifacts cannot be tampered with
- ๐ Build Integrity - Original builds remain unchanged
- ๐ Audit Trail - Complete release history
- ๐ Artifact Verification - SLSA-compliant build provenance
- ๐ท๏ธ ZAP Security Scanning - OWASP ZAP dynamic application security testing
- โก Lighthouse Performance - Automated performance and accessibility audits
- โก Vite - Fast build tool and dev server
- โ๏ธ React 19 - Modern React with hooks
- ๐ท TypeScript - Strict typing with latest standards
- ๐งช Vitest - Fast unit testing with coverage
- ๐ฒ Cypress - Reliable E2E testing
- ๐ฆ ESLint - Code linting with TypeScript rules
- ๐ GitHub Actions - Automated testing and reporting
- ๐ฎ Three.js - High-performance 3D WebGL renderer
- ๐จ @react-three/fiber - React renderer for Three.js
- ๐ ๏ธ @react-three/drei - Useful helpers for react-three-fiber
- ๐ต Howler.js - Audio library for games
This repository includes specialized AI agents that enhance GitHub Copilot's capabilities for game development. These custom agents provide expert guidance in specific domains:
- ๐ฎ game-developer - Three.js game development with @react-three/fiber and @react-three/drei
- ๐จ frontend-specialist - React 19 and TypeScript UI development
- ๐งช test-engineer - Comprehensive testing with Vitest and Cypress
- ๐ security-specialist - Security, compliance, and supply chain protection
- ๐ documentation-writer - Technical documentation and guides
When using GitHub Copilot, you can request help from specific agents by mentioning them in your prompts. Learn more in the Custom Agents Documentation.
When you create a new repository from this template, follow these essential setup steps to get all security and automation features working properly:
Labels are essential for automated pull request categorization and release note generation.
Run the setup workflow:
- Go to Actions โ Setup Repository Labels
- Click "Run workflow"
- Choose whether to recreate all labels (optional)
- Wait for completion
This creates all necessary labels for:
- ๐ Features and enhancements
- ๐ Bug fixes
- ๐ฎ Game development (graphics, audio, game logic)
- ๐ Security and compliance
- ๐ฆ Dependencies and infrastructure
Enable GitHub Pages to automatically deploy your game when creating releases.
Setup GitHub Pages:
- Go to Settings โ Pages
- Under Source, select "GitHub Actions"
- Save the configuration
Your game will be automatically deployed to https://your-username.github.io/your-repo-name/ when you run the release workflow.
Update the OpenSSF Scorecard badge to point to your repository.
Edit the README:
[](https://scorecard.dev/viewer/?uri=github.com/your-username/your-repo-name)Replace your-username/your-repo-name with your actual GitHub repository path.
With the template configured, you can now:
-
Develop locally or in Codespaces
npm install npm run dev
-
Create pull requests - Labels will be automatically applied
-
Run tests - Automated testing on every push/PR
-
Create releases - Use the release workflow for deployment
-
Monitor security - Automated security scanning and scoring
Your repository includes these automated workflows:
| Workflow | Trigger | Purpose |
|---|---|---|
| Setup Repository Labels | Manual | Creates all required labels for PR categorization |
| Setup Copilot Environment | Manual | Validates and documents Copilot MCP server configuration |
| Test and Report | Push/PR | Runs unit tests, E2E tests, license compliance, SBOM quality validation, and generates coverage |
| Build, Attest and Release | Manual/Tag | Creates secure releases with SBOM, license validation, and attestations |
| CodeQL Analysis | Push/PR/Schedule | Static code analysis for security vulnerabilities |
| Dependency Review | PR | Reviews dependencies for known vulnerabilities |
| Scorecard Analysis | Push/Schedule | OSSF supply chain security assessment |
| ZAP Security Scan | Manual | Dynamic security testing of deployed app |
| Lighthouse Performance | Manual | Performance and accessibility audits |
Once configured, your repository automatically provides:
- ๐ก๏ธ Supply Chain Security - OSSF Scorecard analysis and dependency review
- ๐ Static Analysis - CodeQL scanning for vulnerabilities
- ๐ฆ Dependency Protection - Automated dependency vulnerability checks
- ๏ฟฝ License Compliance - Automated checking of dependency licenses (MIT, Apache-2.0, BSD variants, ISC, CC0-1.0, Unlicense)
- ๐ SBOM Quality Validation - Automated SBOM quality scoring with minimum 7.0/10 threshold using SBOMQS
- ๏ฟฝ๐ Runner Hardening - All CI/CD runners are hardened with audit logging
- ๐ Security Policies - GitHub security advisories and vulnerability reporting
- ๐ท๏ธ Pinned Dependencies - All GitHub Actions pinned to specific SHA hashes
- ๐ SBOM Generation - Software Bill of Materials for transparency
- ๐ Build Attestations - Cryptographic proof of build integrity
- ๐ก๏ธ Immutable Releases - Artifacts cannot be tampered with
- ๐ Build Integrity - Original builds remain unchanged
- ๐ Audit Trail - Complete release history
- ๐ Artifact Verification - SLSA-compliant build provenance
- ๐ท๏ธ ZAP Security Scanning - OWASP ZAP dynamic application security testing
- โก Lighthouse Performance - Automated performance and accessibility audits
- Replace the example game in
src/components/with your game logic - Add game assets to the
public/assets/directory - Create your first PR to see automated labeling in action
- Run your first release to deploy to GitHub Pages
- Monitor security through the automatically generated security reports
All security workflows will protect your game from vulnerabilities while providing complete transparency through attestations and SBOM generation.
This template includes a fully configured development environment:
- ๐ GitHub Codespaces - Zero-configuration development environment
- ๐ค GitHub Copilot - AI-assisted development with code suggestions
- ๐ฌ Copilot Chat - In-editor AI assistance for debugging and explanations
- ๐ง VS Code Extensions - Pre-configured extensions for game development
- ๐ Secure Container - Hardened development container with security features
- ๐ MCP Servers - Model Context Protocol servers for enhanced Copilot capabilities
This repository is fully configured for GitHub Codespaces, providing:
- One-click setup - Start coding immediately with zero configuration
- Pre-installed dependencies - All tools and libraries ready to use
- Configured test environment - Cypress and Vitest ready to run
- GitHub Copilot integration - AI-powered code assistance with MCP servers
- Optimized performance - Container configured for game development
This repository is configured with Model Context Protocol (MCP) servers that enhance GitHub Copilot's capabilities:
- ๐๏ธ Filesystem Server - Secure file access for code navigation and editing
- ๐ GitHub Server - Repository context, issues, and PR integration
- ๐ Git Server - Version control history and code evolution understanding
- ๐ง Memory Server - Maintains context across Copilot conversations
- ๐ Brave Search Server - Documentation search (optional, requires API key)
- ๐ญ Playwright Server - Browser automation for testing and debugging
Configuration Files:
.github/copilot-setup-steps.yml- Pre-installation steps for Copilot agent.github/mcp-config.json- MCP server configuration.github/copilot-instructions.md- Coding guidelines for Copilotdocs/MCP_CONFIGURATION.md- Detailed MCP setup documentation
Learn More: See MCP Configuration Guide for detailed setup and usage instructions.
graph LR
A[Developer] -->|Opens in Codespace| B[Container Setup]
B -->|Auto-configures| C[Development Environment]
C -->|Provides| D[VS Code + Extensions]
C -->|Initializes| E[Node.js Environment]
C -->|Configures| F[Testing Tools]
D -->|Includes| G[GitHub Copilot]
D -->|Includes| H[ESLint Integration]
D -->|Includes| I[Debug Tools]
E -->|Installs| J[Three.js]
E -->|Installs| K[React 19]
E -->|Installs| L[TypeScript]
F -->|Prepares| M[Cypress E2E]
F -->|Prepares| N[Vitest Unit Tests]
G -->|Assists with| O[Game Logic]
G -->|Suggests| P[Game Components]
classDef primary fill:#e3f2fd,stroke:#1565c0,stroke-width:2px,color:#000
classDef tools fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px,color:#000
classDef ai fill:#fff3e0,stroke:#e65100,stroke-width:2px,color:#000
classDef testing fill:#f3e5f5,stroke:#4a148c,stroke-width:2px,color:#000
class A,B,C primary
class D,E,F tools
class G,O,P ai
class M,N testing
class J,K,L tools
class H,I tools
graph TD
A[๐ Code Push/PR] --> B{๐ก๏ธ Security Gates}
B --> |๐ Code Analysis| C[CodeQL Scanning]
B --> |๐ฆ Dependencies| D[Dependency Review]
B --> |๐ License Check| E[License Compliance]
B --> |๐๏ธ Supply Chain| F[OSSF Scorecard]
C --> |๐จ Vulnerabilities| G[Security Alerts]
D --> |โ ๏ธ Known CVEs| G
E --> |๏ฟฝ Invalid Licenses| G
F --> |๏ฟฝ๐ Security Score| H[Security Dashboard]
G --> I[๐ซ Block Merge]
H --> J[โ
Security Badge]
subgraph "๐ Protection Layers"
K[Runner Hardening]
L[Pinned Actions]
M[Audit Logging]
end
subgraph "๐งช Runtime Security Testing"
N[๐ท๏ธ ZAP DAST Scan]
O[โก Lighthouse Audit]
P[๐ Live Site Testing]
end
J --> N
N --> |๐ Dynamic Scan| O
O --> |๐ Performance Report| P
%% Styling
classDef security fill:#ffebee,stroke:#c62828,stroke-width:2px,color:#000
classDef analysis fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px,color:#000
classDef protection fill:#e3f2fd,stroke:#1565c0,stroke-width:2px,color:#000
classDef alert fill:#fff3e0,stroke:#ef6c00,stroke-width:2px,color:#000
classDef runtime fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px,color:#000
class A,B,I security
class C,D,E,F analysis
class K,L,M protection
class G,H,J alert
class N,O,P runtime
graph TD
A[๐ Code Push/PR] --> B{๐ Prepare Environment}
B --> |โ
Dependencies| C[๐๏ธ Build Validation]
B --> |โ
Cypress Cache| D[๐งช Unit Tests]
B --> |โ
Display Setup| E[๐ E2E Tests]
C --> |โ
Build Success| F{๐ Parallel Testing}
F --> D
F --> E
D --> |๐ Coverage Report| G[๐ Test Reports]
E --> |๐ฌ Videos & Screenshots| G
G --> H[๐ค Artifact Upload]
H --> I[โจ Combined Reports]
%% Styling
classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px,color:#000
classDef process fill:#f3e5f5,stroke:#4a148c,stroke-width:2px,color:#000
classDef test fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px,color:#000
classDef report fill:#fff3e0,stroke:#e65100,stroke-width:2px,color:#000
classDef artifact fill:#fce4ec,stroke:#880e4f,stroke-width:2px,color:#000
class A,I startEnd
class B,C,F process
class D,E test
class G,H report
class H artifact
# Using GitHub Codespaces
# Click "Code" button on repository and select "Open with Codespaces"
# Or local development:
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Run unit tests
npm run test
# Run E2E tests
npm run test:e2e
# Check license compliance
npm run test:licensesThis template uses Three.js for high-performance 3D game rendering:
- Modern WebGL-based 3D rendering
- Optimized performance with @react-three/fiber
- React integration via @react-three/fiber
- Useful helpers via @react-three/drei
- Sound support via Howler.js
- Responsive 3D canvas
- Touch and mouse input handling
- Camera controls with OrbitControls
Example game component:
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
export function Game() {
return (
<Canvas camera={{ position: [0, 2, 8], fov: 50 }}>
{/* Lighting */}
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} intensity={1} />
{/* 3D Objects */}
<mesh>
<sphereGeometry args={[0.5, 32, 32]} />
<meshStandardMaterial color="#00ff88" />
</mesh>
{/* Camera Controls */}
<OrbitControls />
</Canvas>
);
}- Uses Vitest with jsdom environment
- Configured for React Testing Library
- Coverage reports generated automatically
- Run with:
npm run test
- Uses Cypress for end-to-end testing
- Starts dev server automatically
- Screenshots and videos on failure
- Run with:
npm run test:e2e
- Automated checking of dependency licenses using
license-compliance - Only allows approved open-source licenses (MIT, Apache-2.0, BSD variants, ISC, CC0-1.0, Unlicense)
- Prevents dependencies with restrictive or unknown licenses
- Run with:
npm run test:licenses
- Automated SBOM quality assessment using SBOMQS during CI/CD builds
- Validates SBOM completeness across multiple standards (NTIA-minimum-elements, BSI v1.1/v2.0, Semantic, Quality, Sharing, Structural)
- Enforces minimum quality score of 7.0/10 to ensure high-quality Software Bill of Materials
- Checks for essential components: names, versions, unique IDs, suppliers, licenses, checksums, and dependency relationships
- Blocks builds with insufficient SBOM quality to maintain supply chain transparency
- Provides detailed quality reports with actionable feedback for improvement
flowchart LR
subgraph "๐ง CI Pipeline"
A1[๐ Code Changes] --> A2[๐ Lint & Type Check]
A2 --> A3[๐๏ธ Build]
A3 --> A4[๐งช Test]
A4 --> A5[๐ Report]
end
subgraph "๐ Security Pipeline"
S1[๐ก๏ธ CodeQL Analysis]
S2[๐ฆ Dependency Review]
S3[๐ OSSF Scorecard]
S4[๏ฟฝ SBOM Quality Check]
S5[๏ฟฝ๐ Runner Hardening]
end
subgraph "๐ Test Coverage"
B1[Unit Tests<br/>80%+ Coverage]
B2[E2E Tests<br/>Critical Flows]
B3[Type Safety<br/>Strict Mode]
end
subgraph "๐ฏ Outputs"
C1[๐ Coverage Reports]
C2[๐ฌ Test Videos]
C3[๐ธ Screenshots]
C4[๐ JUnit XML]
C5[๐ก๏ธ Security Reports]
end
A4 --> B1
A4 --> B2
A4 --> B3
A1 --> S1
A1 --> S2
A1 --> S3
A1 --> S4
A1 --> S5
A5 --> C1
A5 --> C2
A5 --> C3
A5 --> C4
S1 --> C5
S2 --> C5
S3 --> C5
S4 --> C5
%% Styling
classDef pipeline fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
classDef security fill:#ffebee,stroke:#c62828,stroke-width:2px
classDef testing fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px
classDef output fill:#fff8e1,stroke:#f57c00,stroke-width:2px
class A1,A2,A3,A4,A5 pipeline
class S1,S2,S3,S4 security
class B1,B2,B3 testing
class C1,C2,C3,C4,C5 output
- CodeQL Analysis: Automated vulnerability scanning on push/PR
- Dependency Review: Checks for known vulnerabilities in dependencies
- License Compliance: Validates all dependencies use approved open-source licenses
- SBOM Quality Validation: Automated SBOM quality assessment using SBOMQS with minimum 7.0/10 score requirement
- OSSF Scorecard: Supply chain security assessment with public scoring
- Runner Hardening: All CI/CD runners use hardened security policies
This template includes a comprehensive, security-first release workflow with automated versioning, security attestations, and deployment.
flowchart TD
A[๐ Release Trigger] --> B{๐ Release Type}
B -->|๐ท๏ธ Tag Push| C[๐ Automatic Release]
B -->|โก Manual Dispatch| D[๐ Manual Release]
C --> E[๐ฆ Prepare Phase]
D --> E
E --> F[๐๏ธ Build & Test]
F --> G[๐ Security Validation]
G --> H[๐ Generate SBOM]
H --> I[๐ Create Attestations]
I --> J[๐ Draft Release Notes]
J --> K[๐ Deploy to Pages]
K --> L[๐ข Publish Release]
subgraph "๐ Security Layers"
M[SLSA Build Provenance]
N[SBOM Attestation]
O[Artifact Signing]
P[Supply Chain Verification]
end
I --> M
I --> N
I --> O
G --> P
%% Styling
classDef trigger fill:#e1f5fe,stroke:#01579b,stroke-width:2px
classDef process fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
classDef security fill:#ffebee,stroke:#c62828,stroke-width:2px
classDef deploy fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
class A,B,C,D trigger
class E,F,J,K,L process
class G,H,I,M,N,O,P security
# Create and push a tag to trigger automatic release
git tag v1.0.0
git push origin v1.0.0- Navigate to Actions โ Build, Attest and Release
- Click Run workflow
- Specify version (e.g.,
v1.0.1) and pre-release status - The workflow handles version bumping and tagging automatically
Release notes are automatically generated using semantic labeling:
graph LR
A[๐ PR Labels] --> B[๐ Release Drafter]
B --> C[๐ Categorized Notes]
subgraph "๐ท๏ธ Label Categories"
D[๐ New Features]
E[๐ฎ Game Development]
F[๐ Security & Compliance]
G[๐ Bug Fixes]
H[๐ฆ Dependencies]
I[๐งช Test Coverage]
end
A --> D
A --> E
A --> F
A --> G
A --> H
A --> I
C --> J[๐ข GitHub Release]
classDef labels fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef process fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
classDef output fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px
class D,E,F,G,H,I labels
class A,B,C process
class J output
- ๐ New Features - Major feature additions
- ๐ฎ Game Development - Game logic, graphics, audio improvements
- ๐จ UI/UX Improvements - Interface and design updates
- ๐๏ธ Infrastructure & Performance - Build and performance optimizations
- ๐ Code Quality & Refactoring - Code improvements and testing
- ๐ Security & Compliance - Security updates and fixes
- ๐ Documentation - Documentation improvements
- ๐ฆ Dependencies - Dependency updates
- ๐ Bug Fixes - Bug fixes and patches
Every release includes a comprehensive SBOM in SPDX format:
{
"SPDXID": "SPDXRef-DOCUMENT",
"name": "game-v1.0.0",
"packages": [
{
"SPDXID": "SPDXRef-Package-react",
"name": "react",
"versionInfo": "19.1.0",
"licenseConcluded": "MIT"
}
]
}SLSA-compliant build attestations provide cryptographic proof:
{
"_type": "https://in-toto.io/Statement/v0.1",
"predicateType": "https://slsa.dev/provenance/v0.2",
"subject": [
{
"name": "game-v1.0.0.zip",
"digest": {
"sha256": "abc123..."
}
}
],
"predicate": {
"builder": {
"id": "https://github.com/actions/runner"
},
"buildType": "https://github.com/actions/workflow@v1"
}
}# Verify build provenance
gh attestation verify game-v1.0.0.zip \
--owner Hack23 --repo game
# Verify SBOM attestation
gh attestation verify game-v1.0.0.zip \
--owner Hack23 --repo game \
--predicate-type https://spdx.dev/DocumentThis repository uses GitHub's immutable releases to prevent unauthorized modifications to published releases.
Immutable releases lock release artifacts after publication, ensuring:
- ๐ก๏ธ Supply Chain Security - Artifacts cannot be tampered with
- ๐ Build Integrity - Original builds remain unchanged
- ๐ Audit Trail - Complete release history
Only release title and notes can be modified after publication.
- Go to Settings โ General
- Scroll to the "Releases" section
- Check "Enable release immutability"
โ ๏ธ Only applies to future releases
- Go to Organization Settings โ Repository โ General
- In "Releases" section, select policy:
- All repositories - Apply to all org repos
- Selected repositories - Choose specific repos
โ ๏ธ Only applies to future releases
# Verify release artifacts haven't been tampered with
gh attestation verify game-v1.1.4.zip --owner Hack23 --repo gamePart of our security-first approach alongside OSSF Scorecard, SLSA attestations, and automated scanning.
Each release includes multiple artifacts with full traceability:
๐ฆ Release v1.0.0
โโโ ๐ฎ game-v1.0.0.zip # Built application
โโโ ๐ game-v1.0.0.spdx.json # Software Bill of Materials
โโโ ๐ game-v1.0.0.zip.intoto.jsonl # Build provenance attestation
โโโ ๐ game-v1.0.0.spdx.json.intoto.jsonl # SBOM attestation
sequenceDiagram
participant Dev as ๐จโ๐ป Developer
participant GH as ๐ GitHub
participant CI as ๐ CI/CD
participant Sec as ๐ Security
participant Pages as ๐ GitHub Pages
Dev->>GH: ๐ท๏ธ Push Tag/Manual Trigger
GH->>CI: ๐ Start Release Workflow
CI->>CI: ๐งช Run Tests & Build
CI->>Sec: ๐ Security Scans
Sec-->>CI: โ
Security Validated
CI->>Sec: ๐ Generate SBOM
CI->>Sec: ๐ Create Attestations
Sec-->>CI: ๐ Security Artifacts Ready
CI->>GH: ๐ Draft Release Notes
CI->>GH: ๐ฆ Upload Artifacts
CI->>Pages: ๐ Deploy Application
Pages-->>CI: โ
Deployment Success
CI->>GH: ๐ข Publish Release
GH-->>Dev: ๐ Release Complete
- Automated scoring of supply chain security practices
- Public transparency with security badge
- Continuous monitoring of security posture
- Pinned dependencies - All GitHub Actions pinned to SHA hashes
- Dependency scanning - Automated vulnerability detection
- SLSA compliance - Build integrity and provenance
- Signed artifacts - Cryptographic verification of releases
Track release quality and security with built-in metrics:
- ๐ Security Score - OSSF Scorecard rating
- ๐ Test Coverage - Unit and E2E test coverage
- ๐ท๏ธ Vulnerability Count - Known security issues
- ๐ฆ Dependency Health - Outdated/vulnerable dependencies
- ๐ Build Success Rate - CI/CD pipeline reliability
This template provides a secure foundation for game development:
- Replace the counter example with your game logic
- Add game-specific components in
src/components/ - Create game state management (Context API, Zustand, etc.)
- Add unit tests for game logic
- Create E2E tests for game flows
- Create releases using the automated workflow
- Monitor security through OSSF Scorecard and attestations
- Deploy using the included security-hardened GitHub Actions
All security workflows will automatically protect your game from common vulnerabilities and supply chain attacks, while providing full transparency through SBOM and attestations.
- Copilot Quick Start Guide - Get started with GitHub Copilot in this repository
- MCP Configuration Guide - Model Context Protocol setup and usage
- MCP Architecture - Visual guide to MCP integration
- Copilot Instructions - Coding guidelines for AI assistance
- Security Policy - Security practices and vulnerability reporting
Happy gaming! ๐ฎ๐