VANILLA.md

# VANILLA.md

## STACK

REQUIRED

- HTML5
- CSS3
- JavaScript ES2024

USE_DECLARED_STACK_ONLY

DO_NOT_INTRODUCE_FRAMEWORKS

DO_NOT_INTRODUCE_BUILD_TOOLS

DO_NOT_INTRODUCE_PACKAGE_MANAGERS

---

## PROJECT_STRUCTURE

```text
/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── main.js
├── images/
└── assets/
```

THIS_STRUCTURE_IS_AUTHORITATIVE

DO_NOT_CREATE_ADDITIONAL_TOP_LEVEL_DIRECTORIES

PREFER_EXISTING_DIRECTORIES_OVER_NEW_ONES

---

## FILE_PLACEMENT

html_pages -> repository_root

stylesheets -> css

javascript -> js

images -> images

static_assets -> assets

DO_NOT_CREATE_SRC_DIRECTORY

DO_NOT_CREATE_COMPONENT_DIRECTORIES

DO_NOT_CREATE_BUILD_DIRECTORIES

---

## HTML_RULES

USE_SEMANTIC_HTML

PREFER_NATIVE_HTML_ELEMENTS

USE_PROPER_HEADING_HIERARCHY

REQUIRE_ALT_TEXT_FOR_IMAGES

AVOID_UNNECESSARY_DIV_ELEMENTS

---

## CSS_RULES

USE_PLAIN_CSS

STORE_GLOBAL_STYLES_IN_CSS_STYLES_CSS

DO_NOT_USE_SCSS

DO_NOT_USE_SASS

DO_NOT_USE_LESS

DO_NOT_USE_CSS_MODULES

DO_NOT_USE_CSS_IN_JS

DO_NOT_INTRODUCE_STYLING_FRAMEWORKS

---

## JAVASCRIPT_RULES

USE_VANILLA_JAVASCRIPT

USE_ES_MODULES_WHEN_NEEDED

PREFER_MODERN_BROWSER_APIS

DO_NOT_USE_JQUERY

DO_NOT_USE_REACT

DO_NOT_USE_VUE

DO_NOT_USE_ANGULAR

DO_NOT_USE_SVELTE

DO_NOT_USE_ALPINE

DO_NOT_USE_HTMX

---

## ASSET_RULES

IMAGES_BELONG_IN_IMAGES

FONTS_BELONG_IN_ASSETS

ICONS_BELONG_IN_ASSETS

DOWNLOADABLE_FILES_BELONG_IN_ASSETS

DO_NOT_STORE_ASSETS_IN_CSS_OR_JS_DIRECTORIES

---

## RESPONSIVE_RULES

MOBILE_FIRST

RESPONSIVENESS_IS_REQUIRED

REQUIRE_RESPONSIVE_LAYOUTS

REQUIRE_RESPONSIVE_TYPOGRAPHY

REQUIRE_RESPONSIVE_IMAGES

REQUIRE_FLEXIBLE_LAYOUTS

AVOID_FIXED_WIDTH_LAYOUTS

AVOID_HORIZONTAL_SCROLLING

TEST_COMMON_VIEWPORT_SIZES

RESPONSIVE_BEHAVIOR_OVERRIDES_DESKTOP_PREFERENCES

---

## ACCESSIBILITY_RULES

ACCESSIBILITY_IS_REQUIRED

REQUIRE_PROPER_HEADING_HIERARCHY

REQUIRE_ALT_TEXT

REQUIRE_KEYBOARD_ACCESSIBILITY

REQUIRE_SUFFICIENT_COLOR_CONTRAST

ACCESSIBILITY_OVERRIDES_VISUAL_PREFERENCES

---

## PERFORMANCE_RULES

MINIMIZE_JAVASCRIPT

MINIMIZE_DEPENDENCIES

OPTIMIZE_IMAGES

PREFER_NATIVE_BROWSER_FEATURES

AVOID_UNNECESSARY_ABSTRACTIONS

---

## FORBIDDEN_TOOLS

- React
- Vue
- Angular
- Svelte
- Next.js
- Nuxt
- Astro
- Vite
- Webpack
- Parcel
- Rollup
- jQuery

DO_NOT_INTRODUCE_FORBIDDEN_TOOLS

UNLESS_EXPLICITLY_REQUESTED

---

## ROOT_DIRECTORY_POLICY

ROOT_HTML_FILES_ARE_ALLOWED

DO_NOT_CREATE_CONFIGURATION_FILES

DO_NOT_CREATE_PACKAGE_JSON

DO_NOT_CREATE_NODE_MODULES

DO_NOT_CREATE_BUILD_CONFIGURATIONS

---

## GENERATION_POLICY

BEFORE_CREATING_ANY_FILE

1. CHECK_EXISTING_STRUCTURE
2. CHECK_EXISTING_PATTERNS
3. REUSE_BEFORE_CREATING

PREFER_MODIFICATION_OVER_CREATION

DO_NOT_INVENT_ARCHITECTURE

DO_NOT_INTRODUCE_FRAMEWORKS

WHEN_UNCERTAIN

FOLLOW_EXISTING_CODEBASE

---

## VANILLA_PRINCIPLES

HTML_FIRST

CSS_SECOND

JAVASCRIPT_WHEN_NEEDED

USE_NATIVE_BROWSER_FEATURES

MOBILE_FIRST

RESPONSIVE_BY_DEFAULT

KEEP_IT_SIMPLE

AVOID_DEPENDENCIES

DO_NOT_INTRODUCE_FRAMEWORKS