G
GTM Vault
Browse
  • Dashboard
    • Automations
    • Skills
    • Prompts
    • Makers
  • Sign in
All Skills

project-conventions

Coding conventions for static HTML dashboards — OOP JavaScript classes, dark shadcn theme, Geist font, single-file architecture

skillInfrastructureClaude Code SkillsInternal Ops
Original
by Roheel Jain
Skill Content

JavaScript

All JavaScript must use OOP classes — no loose functions or procedural code. Every feature gets its own class with constructor, init, and methods.

Common error: Writing standalone functions or inline handlers instead of encapsulating in a class.

Correct: Define a class, cache DOM elements in constructor, bind events in init/bindEvents.

Dark Theme (shadcn/ui)

  • CSS custom properties with HSL format: 240, 10%, 3.9% → hsl(var(--background))
  • Core variables: --background, --foreground, --muted, --muted-foreground, --accent, --border, --destructive
  • Geist font family (CDN: https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-Variable.woff2)

Single-File HTML Architecture

  • All HTML, CSS, and JS in one file (no build system, no framework)
  • Static hosting (no server-side rendering)
  • All classes defined in <script> tags within the HTML file
  • External libraries loaded via CDN script tags
Tech Stack
JavaScript
JavaScript