- Node.js v20+
- npm v10+
git clone <your-fork>
npm install
npm run dev- Format:
npm run format - Build:
npm run build(must pass) - Test: Verify functionality across screen sizes
- Lint: Follow existing TypeScript patterns
- Reference issue number if applicable
- Include clear description of changes
- Test on desktop/mobile if UI changes
- Follow existing code patterns and architecture
- Automatic deployment on merge to
main - Build verification via GitHub Actions
- Manual testing for UI/UX changes
- Strict typing required
- Use existing interfaces and types
- Follow established patterns in
/src/scripts/
- Use existing CSS variables from
/public/css/base/variables.css - Follow BEM-like naming conventions
- Maintain responsive design principles
- Components:
/src/components/ - Business logic:
/src/scripts/features/ - Core systems:
/src/scripts/core/ - Utilities:
/src/scripts/utilities/
Refer to technical documentation for detailed architecture:
- Architecture Overview:
docs/technical/architecture.md - Storage Systems:
docs/technical/storage.md - Technical README:
docs/technical/README.md
- Style modules: Implement
load(),apply(),syncUI(),update() - Use
settingsManager.setSection()for persistence - Follow existing patterns in
/src/scripts/features/style/
- Use Web Workers for heavy operations (see
xpmparser.ts) - Implement proper cleanup in component lifecycle
- Cache expensive operations where appropriate
- Create module in
/src/scripts/features/style/ - Implement required methods:
load(),apply(),syncUI(),update() - Register in
StyleManagerconstructor - Add UI component in
/src/components/features/style/ - Add CSS in
/public/css/components/style-manager/
- Add icon to
/public/icons/ - Update
SYSTEM_ICONSarray indesktop.ts - Implement click handler if needed
- XPM backdrops use palette colors - clear cache on palette changes
- Test with multiple palettes to ensure compatibility
- Use existing palettes from
/src/data/cde_palettes.json
- Desktop: Window management, drag & drop, right-click menus
- Mobile: Touch gestures, responsive layouts
- Theme system: URL sharing, palette changes, backdrop rendering
npm run format # Code formatting
npm run build # TypeScript compilation and Astro buildFor detailed information, see:
- User Guide:
docs/user-guide/ - Technical Docs:
docs/technical/ - Architecture:
docs/technical/architecture.md
- Language: Use clear, concise English. Avoid unnecessary jargon.
- Formatting: Use standard Markdown. Include code examples for technical sections.
- Visuals: Add screenshots for UI changes when possible.
- Completeness: Ensure all new features are documented in both the User Guide and Technical Docs.
- Types: Include TypeScript types and interface definitions in API references.
Found an error or want to improve the documentation?
- Identify: Find the relevant
.mdfile in thedocs/directory. - Edit: Make your changes, ensuring they follow the standards above.
- Verify: Check that all links are working and formatting is correct.
- PR: Submit a pull request with a description of the documentation improvements.
For major documentation changes, please open an issue first to discuss the structure.
- Bug Reports: Use GitHub Issues with reproduction steps
- Feature Requests: Propose in GitHub Discussions first
- Questions: Check existing documentation before asking
Built with TypeScript, Astro, and authentic CDE design principles.