github-pages-architecture

What problem does it solve?

GitHub Pages static UIs often suffer from ad-hoc architectures that mix presentation, application logic, and infrastructure. This skill provides a clear, repeatable 3-tier design (Presentation/Application/Infrastructure) and guidance on docs/ directory structure, module separation, lazy loading, and data-flow definitions to improve maintainability and scalability.

Core Features & Use Cases

• Define a consistent docs/ directory structure for GitHub Pages projects.
• Add new tabs/pages, split JavaScript modules, and manage lazy loading.
• Establish data flow and orchestration patterns between UI and data sources while keeping components decoupled.
• Use cases include refactoring an existing static UI, designing new modules with clear responsibilities, and planning scalable tab-based interfaces.

Quick Start

Use this skill when designing docs/ directory structure, adding tabs, splitting modules, implementing lazy loading, managing chart instances, or defining data flow in a GitHub Pages static web UI.