Copilot Instructions for Vixvvo Website 2.0

Code Organization Standards

✅ ALWAYS follow this structure:

Separate CSS files - Never put
```
<style>
```
blocks in HTML pages
- Page-specific CSS →
```
/css/[pagename].css
```
- Shared CSS →
```
/css/shared-styles.css
```
- Component CSS →
```
/css/components.css
```
Separate JS files - Never put
```
<script>
```
blocks (except external CDNs) in HTML pages
- Page-specific JS →
```
/js/[pagename].js
```
- Shared JS →
```
/js/[functionality].js
```

Always use

defer

attribute on local script tags for performance:

<script src="../js/myfile.js" defer></script>

File paths from

/pages/

folder:

CSS:
```
../css/filename.css
```
JS:
```
../js/filename.js
```
Images:
```
../images/...
```

🚫 NEVER do this:

❌ Inline
```
<style>
```
blocks in HTML
❌ Inline
```
<script>
```
blocks in HTML (except for required callbacks like Google Maps)
❌ Mix page logic with HTML structure
❌ Duplicate CSS across multiple files

When creating or modifying HTML pages:

Extract all CSS to separate file:
```
/css/[pagename].css
```
Extract all JS to separate file:
```
/js/[pagename].js
```
Link them in the
```
<head>
```
(CSS) and before
```
</body>
```
(JS with defer)
Keep HTML clean - only structure and content

Example structure for new page:

<head>
  <!-- Shared styles first -->
  <link rel="stylesheet" href="../css/shared-styles.css">
  <!-- Page-specific styles after -->
  <link rel="stylesheet" href="../css/newpage.css">
  
  <!-- Local scripts with defer -->
  <script src="../js/shared-script.js" defer></script>
</head>
<body>
  <!-- HTML content only -->
  
  <!-- Page-specific script before closing body -->
  <script src="../js/newpage.js" defer></script>
</body>

Why This Matters:

✅ Better caching and performance
✅ Easier maintenance and debugging
✅ Reusable code across pages
✅ Cleaner separation of concerns
✅ Better code review and version control

Copilot Instructions for Vixvvo Website 2.0

Code Organization Standards

✅ ALWAYS follow this structure:

Separate CSS files - Never put
```
<style>
```
blocks in HTML pages
- Page-specific CSS →
```
/css/[pagename].css
```
- Shared CSS →
```
/css/shared-styles.css
```
- Component CSS →
```
/css/components.css
```
Separate JS files - Never put
```
<script>
```
blocks (except external CDNs) in HTML pages
- Page-specific JS →
```
/js/[pagename].js
```
- Shared JS →
```
/js/[functionality].js
```

Always use

defer

attribute on local script tags for performance:

<script src="../js/myfile.js" defer></script>

File paths from

/pages/

folder:

CSS:
```
../css/filename.css
```
JS:
```
../js/filename.js
```
Images:
```
../images/...
```

🚫 NEVER do this:

❌ Inline
```
<style>
```
blocks in HTML
❌ Inline
```
<script>
```
blocks in HTML (except for required callbacks like Google Maps)
❌ Mix page logic with HTML structure
❌ Duplicate CSS across multiple files

When creating or modifying HTML pages:

Extract all CSS to separate file:
```
/css/[pagename].css
```
Extract all JS to separate file:
```
/js/[pagename].js
```
Link them in the
```
<head>
```
(CSS) and before
```
</body>
```
(JS with defer)
Keep HTML clean - only structure and content

Example structure for new page:

<head>
  <!-- Shared styles first -->
  <link rel="stylesheet" href="../css/shared-styles.css">
  <!-- Page-specific styles after -->
  <link rel="stylesheet" href="../css/newpage.css">
  
  <!-- Local scripts with defer -->
  <script src="../js/shared-script.js" defer></script>
</head>
<body>
  <!-- HTML content only -->
  
  <!-- Page-specific script before closing body -->
  <script src="../js/newpage.js" defer></script>
</body>

Why This Matters:

✅ Better caching and performance
✅ Easier maintenance and debugging
✅ Reusable code across pages
✅ Cleaner separation of concerns
✅ Better code review and version control

Copilot Instructions for Vixvvo Website 2.0

Copilot Instructions for Vixvvo Website 2.0

Code Organization Standards

✅ ALWAYS follow this structure:

🚫 NEVER do this:

When creating or modifying HTML pages:

Example structure for new page:

Why This Matters:

Related Skills

Nano Banana Pro

Markdown Converter

1password

Copilot Instructions for Vixvvo Website 2.0

Code Organization Standards

✅ ALWAYS follow this structure:

🚫 NEVER do this:

When creating or modifying HTML pages:

Example structure for new page:

Why This Matters: