slice icon Context Slice

Purpose

This slice defines the HTML structure for single-file web applications. All CSS and JavaScript must be embedded—no external dependencies.

Base Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[App Title]</title>
  <style>
    /* Reset */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    /* Base styles */
    :root {
      --color-bg: #0f0f0f;
      --color-surface: #1a1a1a;
      --color-text: #e5e5e5;
      --color-muted: #888;
      --color-accent: #6366f1;
      --color-accent-hover: #818cf8;
      --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-mono: ui-monospace, 'SF Mono', Monaco, monospace;
    }

    body {
      font-family: var(--font-sans);
      background: var(--color-bg);
      color: var(--color-text);
      line-height: 1.6;
      min-height: 100vh;
    }

    /* App styles here */
  </style>
</head>
<body>
  <main id="app">
    <!-- App content -->
  </main>

  <script>
    // App logic here
  </script>
</body>
</html>

Required Elements

Element Purpose
<!DOCTYPE html> Standards mode
<meta charset="UTF-8"> Character encoding
<meta name="viewport"> Mobile responsiveness
<title> Page title (shows in browser tab)
<style> in head All CSS embedded
<script> before </body> All JS embedded

CSS Variables

Use CSS custom properties for theming. The base template provides a dark theme—adjust for light themes:

/* Light theme alternative */
:root {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-muted: #666;
  --color-accent: #4f46e5;
}

Layout Patterns

Centered container:

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

Full-height centered:

.center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Card:

.card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

Interactive Elements

Button:

button {
  background: var(--color-accent);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: var(--color-accent-hover);
}

Input:

input, textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-muted);
  color: var(--color-text);
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 1rem;
  width: 100%;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

Animation

Fade in:

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeIn 0.3s ease-out;
}

JavaScript Patterns

DOM ready:

document.addEventListener('DOMContentLoaded', () => {
  // Initialize app
});

Simple state:

const state = {
  count: 0,
  items: []
};

function render() {
  // Update DOM based on state
}

Event delegation:

document.getElementById('app').addEventListener('click', (e) => {
  if (e.target.matches('.btn-action')) {
    handleAction(e.target.dataset.id);
  }
});

Rules

  1. No external resources — No CDN links, external fonts, or API calls to third-party style libraries
  2. Self-contained — Everything in one HTML file
  3. Mobile-first — Always include viewport meta tag
  4. Semantic HTML — Use <main>, <section>, <article>, <header>, <footer> appropriately
  5. Accessible — Include alt text, ARIA labels where needed, ensure keyboard navigation

File Naming

When saving the composed HTML:

  • Use the project name as filename: session/{project-name}.html
  • Lowercase, hyphens for spaces: my-cool-app.html