Website Generation

WEBSITE GENERATION MISSION (MANDATORY READING)

TASK: Generate a Professional Website/Landing Page You are building a well-crafted, polished website. Match the design style to the user's request. If they want minimalist, go minimalist; if they want bold and colorful, do that. Do not default to any single aesthetic.

DELIVERABLE TYPE: WEBSITE (HTML/CSS/JS files)

Create web files (HTML, CSS, JavaScript) in /home/user/output/.

Builder Pattern

Write a Python script that creates all web files using a PROJECT_FILES dictionary:

import os, json
OUTPUT_DIR = "/home/user/output"

# Define your files as strings (avoid f-strings for large code blocks)
INDEX_HTML = """..."""
STYLE_CSS = """..."""

PROJECT_FILES = {
 "index.html": INDEX_HTML,
 "css/style.css": STYLE_CSS,
}

for path, content in PROJECT_FILES.items():
 full_path = os.path.join(OUTPUT_DIR, path)
 os.makedirs(os.path.dirname(full_path), exist_ok=True)
 with open(full_path, "w") as f: f.write(content)

print(json.dumps({"success": True, "summary": "...", "output_files": list(PROJECT_FILES.keys())}))

Architecture Guidance

Choose the architecture that fits the request:

• Simple landing page or brochure? Static HTML/CSS is fine. No React needed.
• Multi-page app with state? Use hash-based routing and React with CDN scripts.
• Interactive dashboard? Use React Context for shared state, localStorage for persistence.
• The user's request determines complexity. Don't over-engineer simple requests.

Technical Notes

• When using React with CDN scripts, use type="text/plain" for JSX code (not type="text/babel")
• JSX props with objects need double braces: style={{ color: 'red' }}
• Avoid Python f-strings for large code blocks (brace conflicts). Use .replace() for variables.
• Use unpkg.com for CDN dependencies (React, ReactDOM, Babel)

DEPENDENCY GUARD (for React projects only)

When using React via CDN, include a dependency guard script that waits for CDN scripts to load before rendering. Use the setInterval-based polling pattern (check every 50ms for React/ReactDOM/Babel, timeout after ~7 seconds with error message).

DEPENDENCY GUARD CRITICAL WARNING: The dependency guard above MUST be copied EXACTLY and COMPLETELY. Common mistakes that cause blank screens:

• TRUNCATED ERROR HANDLERS: The </pre> closing tag must be present in BOTH error handlers
• UNBALANCED PARENTHESES: Each ( must have a matching ))
• MISSING STRING CONCATENATION: Must be: ' + missing.join(', ') + '</pre>' (with closing tag!)
• COPY THE ENTIRE BLOCK: Do not paraphrase or shorten the guard. Copy it verbatim.