skills.rest
gabathanasiou
gabathanasiouCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Project Architecture & Maintenance

Enforce modular architecture for browser-based JavaScript projects without a bundler.

2|Updated Feb 10, 2026
Search Tags:#architecture#javascript#maintainability#bundler#modular#development-pattern#script-order
One-click install
npx skills add https://github.com/gabathanasiou/Pokemon-battle-modular --skill project-architecture-maintenance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Project Architecture & Maintenance
Source: https://github.com/gabathanasiou/Pokemon-battle-modular/tree/main/.agent/skills/architecture
Command: npx skills add https://github.com/gabathanasiou/Pokemon-battle-modular --skill project-architecture-maintenance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide documents a No-Bundler modular architecture for browser-based JavaScript projects, providing a clear pattern for defining modules as global singletons and loading them in a strict sequence.

Core Features & Use Cases

  • Global singleton module pattern: each module exposes a single interface via a named object and an init method.
  • Enforced dependency order: modules are loaded in a defined sequence to satisfy interdependencies.
  • Clear organization: recommended directory structure (systems, data, core logic, UI, assets) and documented upgrade paths to improve maintainability across large codebases.

Quick Start

Place new modules in the correct categorized directories and order them in the HTML to preserve deterministic loading.

Frequently Asked Questions about Project Architecture & Maintenance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage JavaScript modules in the browser without a bundler?▼

Manage browser-based JavaScript modules without a bundler by defining each module as a global singleton and loading scripts in a strict HTML sequence to satisfy interdependencies.

What is the global singleton pattern for modular JavaScript?▼

The global singleton pattern exposes each module via a named object and an init method, avoiding native exports and imports to maintain a clear, deterministic dependency order.

How do I organize directories for a large JavaScript codebase using script order?▼

Organize directories by separating core logic, data, UI, assets, and systems, placing modules into categorized paths and ordering them in HTML to preserve deterministic loading.

Can I use ES module imports with this no-bundler modular architecture?▼

No, this no-bundler architecture specifies requirements that exclude native exports and imports, relying entirely on explicit script order and global singletons for dependency management.

When should I use a no-bundler architecture instead of a bundler for JavaScript?▼

Use a no-bundler architecture for browser-based JavaScript projects requiring strict script order and dependency management without build steps, ideal for maintaining large codebases via categorized directories.

Why does script loading order matter for global singleton JavaScript modules?▼

Script loading order matters because global singletons lack native import resolution, so loading scripts in a defined sequence ensures all interdependencies are satisfied before initialization.

Related Skills

Explore More Software Engineering Skills→
HollowvynHollowvyn

client-side-rendering

Render React single-page application views in the browser after initial HTML loads.

Official
Basic
jshsakurajshsakura
22

architect-reviewer

Identify architectural boundaries, coupling risks, and maintainability issues in codebases.

Community
Advanced
mindcockpit-aimindcockpit-ai
11

react-patterns

Enforce modern React and TypeScript coding standards via static analysis.

Official
Intermediate
chanhee-kangchanhee-kang
2

deepsearch

Locate and analyze code references across JavaScript/TypeScript codebases.

Community
Basic