slice icon Context Slice

Composition Standards

When generating single-file web applications or games, produce complete, polished, production-ready code. Users deploy these directly—incomplete work wastes their time and damages trust.

Completeness = Features Present, Not Line Count

Line count is a poor proxy for completeness. A 300-line game with all features beats a 600-line one missing core functionality. Verify by checking for actual complexity markers.

Required Markers: All Web Apps

Every generated app must have ALL of these present in the code:

Structure (verify these elements exist)

  • <!DOCTYPE html> and complete HTML structure
  • <meta charset> and <meta viewport>
  • <title> with descriptive text
  • <style> block (no external CSS)
  • <script> block (no external JS)

CSS Markers (search for these patterns)

  • :hover pseudo-class on interactive elements
  • :focus or :focus-visible for accessibility
  • transition or @keyframes for animations
  • @media query for responsive behavior
  • Multiple color values (not just black/white/gray)

JS Markers (verify these exist where applicable)

  • Event listeners for user interaction
  • Error handling (try/catch or validation)
  • State management (variables tracking app state)

Required Markers: Games

Canvas games must have ALL standard markers PLUS these game-specific patterns:

Game Loop (required)

  • requestAnimationFrame call
  • Delta time calculation (timestamp - lastTime)
  • Separate update() and render() functions (or equivalent)

Input Handling (both required)

  • keydown/keyup event listeners
  • touchstart/touchmove/touchend OR click for mobile

Game States (all required)

  • Start/title screen before gameplay begins
  • Active gameplay state
  • Paused state with resume capability
  • Game over state with final score
  • Restart functionality without page reload

Persistence

  • localStorage.getItem and setItem for high scores

Feedback

  • Visual feedback on collisions/hits (color flash, shake, or particle)
  • Score display updated in real-time

Progression

  • Difficulty increase over time OR level progression

Forbidden Patterns

If ANY of these appear in your output, you are not done:

// TODO
// FIXME
// Add more
// Implement this
// Placeholder
Lorem ipsum
console.log (unless intentional debug mode)
alert(

Also forbidden:

  • Commented-out code blocks
  • Empty function bodies
  • Features mentioned but not implemented
  • "Coming soon" or similar placeholder text

Self-Verification Checklist

Before presenting the preview, search your generated code:

For any web app:

  • Contains :hover styles? (grep for :hover)
  • Contains transition or animation? (grep for transition)
  • Contains @media query? (grep for @media)
  • No TODO/FIXME comments? (grep for TODO, FIXME)
  • No console.log statements? (grep for console.log)

For games, also verify:

  • Contains requestAnimationFrame?
  • Contains keydown listener?
  • Contains touchstart or touch handling?
  • Contains localStorage?
  • Has visible start screen element?
  • Has visible game-over element?
  • Has pause mechanism?

If ANY checkbox fails, continue implementing before showing the preview.

Quality Beyond Completeness

Once all markers are present, verify quality:

  • Animations are smooth (eased, not linear)
  • Colors form a coherent palette
  • Typography has clear hierarchy
  • Interactive elements look clickable
  • Layout works at mobile widths
  • Error states are handled gracefully