@vojtaholik/create-static-kit 1.0.0

package/bin/create-static-kit.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+import "../dist/cli.js";

package/dist/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,365 @@
+#!/usr/bin/env node
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+import prompts from "prompts";
+import { cyan, green, red, bold } from "kleur/colors";
+import fg from "fast-glob";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATES = {
+    minimal: {
+        name: "Minimal",
+        description: "Just the basics - perfect starting point",
+        features: ["Basic HTML/SCSS structure", "Component system", "Build pipeline"]
+    },
+    default: {
+        name: "Default",
+        description: "Starter with examples and components",
+        features: ["Multiple page examples", "Component library", "SVG sprite system", "Basic styling"]
+    },
+    styled: {
+        name: "Styled",
+        description: "Pre-styled with design system",
+        features: ["Modern CSS reset", "Design tokens", "Typography scale", "Component showcase"]
+    }
+};
+async function main() {
+    console.log();
+    console.log(`${cyan("create-static-kit")} ${green("v1.0.0")}`);
+    console.log();
+    const args = process.argv.slice(2);
+    let projectName = args[0];
+    let template = args.find(arg => arg.startsWith("--template="))?.split("=")[1];
+    const interactive = args.includes("--interactive") || !projectName || !template;
+    if (interactive) {
+        const response = await prompts([
+            {
+                type: "text",
+                name: "projectName",
+                message: "Project name:",
+                initial: projectName || "my-static-kit-site",
+                validate: (value) => {
+                    if (!value.trim())
+                        return "Project name is required";
+                    if (!/^[a-zA-Z0-9-_]+$/.test(value))
+                        return "Project name can only contain letters, numbers, hyphens, and underscores";
+                    return true;
+                }
+            },
+            {
+                type: "select",
+                name: "template",
+                message: "Choose a template:",
+                choices: Object.entries(TEMPLATES).map(([key, config]) => ({
+                    title: `${config.name} - ${config.description}`,
+                    description: config.features.join(" • "),
+                    value: key
+                })),
+                initial: 0
+            },
+            {
+                type: "confirm",
+                name: "cssReset",
+                message: "Include CSS reset?",
+                initial: true
+            },
+            {
+                type: "confirm",
+                name: "designTokens",
+                message: "Include design tokens?",
+                initial: false
+            },
+            {
+                type: "confirm",
+                name: "initGit",
+                message: "Initialize git repository?",
+                initial: true
+            }
+        ]);
+        if (!response.projectName) {
+            console.log(red("✖") + " Operation cancelled");
+            process.exit(1);
+        }
+        const options = {
+            projectName: response.projectName,
+            template: response.template,
+            cssReset: response.cssReset,
+            designTokens: response.designTokens,
+            initGit: response.initGit
+        };
+        await createProject(options);
+    }
+    else {
+        // Non-interactive mode
+        const options = {
+            projectName,
+            template: template || "default",
+            cssReset: true,
+            designTokens: false,
+            initGit: true
+        };
+        await createProject(options);
+    }
+}
+async function createProject(options) {
+    const { projectName, template, cssReset, designTokens, initGit } = options;
+    console.log();
+    console.log(`${cyan("✨")} Creating ${bold(projectName)}...`);
+    console.log();
+    // Check if directory exists
+    const projectPath = path.resolve(projectName);
+    try {
+        await fs.access(projectPath);
+        console.log(red("✖") + ` Directory ${projectName} already exists`);
+        process.exit(1);
+    }
+    catch {
+        // Directory doesn't exist, which is what we want
+    }
+    try {
+        // Create project directory
+        await fs.mkdir(projectPath, { recursive: true });
+        // Copy template files
+        await copyTemplate(template, projectPath);
+        // Generate package.json
+        await generatePackageJson(projectName, projectPath);
+        // Generate vite.config.ts
+        await generateViteConfig(projectPath);
+        // Generate static-kit.config.json
+        await generateStaticKitConfig(projectPath);
+        // Conditionally add features
+        if (cssReset) {
+            await addCssReset(projectPath);
+        }
+        if (designTokens) {
+            await addDesignTokens(projectPath);
+        }
+        // Initialize git
+        if (initGit) {
+            await initializeGit(projectPath);
+        }
+        console.log();
+        console.log(`${green("✅")} Successfully created ${bold(projectName)}`);
+        console.log();
+        console.log("Next steps:");
+        console.log(`  ${cyan("cd")} ${projectName}`);
+        console.log(`  ${cyan("npm install")} or ${cyan("pnpm install")}`);
+        console.log(`  ${cyan("npm run dev")} or ${cyan("pnpm dev")}`);
+        console.log();
+        console.log("Happy building! 🚀");
+        console.log();
+    }
+    catch (error) {
+        console.log();
+        console.log(red("✖") + " Failed to create project:");
+        console.log(red(String(error)));
+        process.exit(1);
+    }
+}
+async function copyTemplate(templateName, projectPath) {
+    const templatesDir = path.join(__dirname, "..", "templates");
+    const templatePath = path.join(templatesDir, templateName);
+    try {
+        // Check if template exists
+        await fs.access(templatePath);
+    }
+    catch {
+        console.log(red("✖") + ` Template "${templateName}" not found`);
+        process.exit(1);
+    }
+    // Copy all files from template
+    const files = await fg("**/*", {
+        cwd: templatePath,
+        onlyFiles: true,
+        dot: true
+    });
+    for (const file of files) {
+        const srcPath = path.join(templatePath, file);
+        const destPath = path.join(projectPath, file);
+        // Ensure destination directory exists
+        await fs.mkdir(path.dirname(destPath), { recursive: true });
+        await fs.copyFile(srcPath, destPath);
+    }
+}
+async function generatePackageJson(projectName, projectPath) {
+    const packageJson = {
+        name: projectName,
+        private: true,
+        version: "0.0.0",
+        type: "module",
+        scripts: {
+            dev: "vite",
+            build: "tsc && vite build",
+            preview: "vite preview"
+        },
+        devDependencies: {
+            "@vojtaholik/static-kit-core": "^1.0.0",
+            "@types/node": "^24.2.1",
+            autoprefixer: "^10.4.21",
+            postcss: "^8.5.6",
+            "sass-embedded": "^1.90.0",
+            typescript: "~5.9.2",
+            vite: "^7.1.1"
+        }
+    };
+    await fs.writeFile(path.join(projectPath, "package.json"), JSON.stringify(packageJson, null, 2));
+}
+async function generateViteConfig(projectPath) {
+    const viteConfig = `import { defineConfig } from "vite";
+import { createStaticKitConfig } from "@vojtaholik/static-kit-core/vite";
+
+export default defineConfig(async (env) => {
+  const staticKitConfig = await createStaticKitConfig();
+  return staticKitConfig;
+});`;
+    await fs.writeFile(path.join(projectPath, "vite.config.ts"), viteConfig);
+}
+async function generateStaticKitConfig(projectPath) {
+    const config = {
+        build: {
+            base: "public/",
+            output: "dist"
+        },
+        templates: {
+            language: "en"
+        }
+    };
+    await fs.writeFile(path.join(projectPath, "static-kit.config.json"), JSON.stringify(config, null, 2));
+}
+async function addCssReset(projectPath) {
+    const resetCss = `/* Modern CSS Reset */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+#root, #__next {
+  isolation: isolate;
+}`;
+    await fs.writeFile(path.join(projectPath, "src", "styles", "_reset.scss"), resetCss);
+    // Add import to main.scss
+    const mainScssPath = path.join(projectPath, "src", "styles", "main.scss");
+    try {
+        const mainScss = await fs.readFile(mainScssPath, "utf-8");
+        const updatedScss = `@import "reset";\n\n${mainScss}`;
+        await fs.writeFile(mainScssPath, updatedScss);
+    }
+    catch {
+        // main.scss doesn't exist or can't be read
+    }
+}
+async function addDesignTokens(projectPath) {
+    const tokensScss = `:root {
+  /* Colors */
+  --color-primary: #0066cc;
+  --color-primary-dark: #0052a3;
+  --color-secondary: #6b7280;
+  --color-accent: #f59e0b;
+  
+  --color-text: #1f2937;
+  --color-text-muted: #6b7280;
+  --color-background: #ffffff;
+  --color-surface: #f9fafb;
+  --color-border: #e5e7eb;
+  
+  /* Typography */
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+  
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: 4rem;
+  
+  /* Borders */
+  --border-radius-sm: 0.25rem;
+  --border-radius-md: 0.375rem;
+  --border-radius-lg: 0.5rem;
+  --border-radius-xl: 0.75rem;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}`;
+    await fs.writeFile(path.join(projectPath, "src", "styles", "_tokens.scss"), tokensScss);
+    // Add import to main.scss
+    const mainScssPath = path.join(projectPath, "src", "styles", "main.scss");
+    try {
+        const mainScss = await fs.readFile(mainScssPath, "utf-8");
+        const updatedScss = `@import "tokens";\n\n${mainScss}`;
+        await fs.writeFile(mainScssPath, updatedScss);
+    }
+    catch {
+        // main.scss doesn't exist or can't be read
+    }
+}
+async function initializeGit(projectPath) {
+    const gitignore = `# Dependencies
+node_modules/
+.pnpm-debug.log*
+
+# Build output
+dist/
+
+# Local config
+static-kit.local.json
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*`;
+    await fs.writeFile(path.join(projectPath, ".gitignore"), gitignore);
+}
+main().catch(console.error);

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@vojtaholik/create-static-kit",
+  "version": "1.0.0",
+  "description": "CLI tool to create new Static Kit projects",
+  "type": "module",
+  "bin": {
+    "create-static-kit": "./bin/create-static-kit.js"
+  },
+  "files": [
+    "bin/",
+    "dist/",
+    "templates/"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@vojtaholik/static-kit-core": "^1.0.0",
+    "prompts": "^2.4.2",
+    "kleur": "^4.1.5",
+    "fast-glob": "^3.3.3"
+  },
+  "devDependencies": {
+    "@types/node": "^24.2.1",
+    "@types/prompts": "^2.4.9",
+    "typescript": "~5.9.2"
+  },
+  "keywords": [
+    "create",
+    "static-kit",
+    "cli",
+    "scaffold",
+    "template"
+  ],
+  "author": "Vojta Holik <vojta@hey.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vojtaholik/static-kit.git",
+    "directory": "packages/create-static-kit"
+  },
+  "homepage": "https://github.com/vojtaholik/static-kit#readme",
+  "bugs": {
+    "url": "https://github.com/vojtaholik/static-kit/issues"
+  }
+}

package/templates/default/public/favicon.ico

@@ -0,0 +1 @@
+# Empty favicon placeholder

package/templates/default/src/components/button.html

@@ -0,0 +1 @@
+<a href="/about" class="button button--primary">Get Started</a>

package/templates/default/src/components/feature-card.html

@@ -0,0 +1,8 @@
+<div class="feature-card">
+  <div class="feature-card__icon">
+    <!-- SVG icon would go here -->
+    <div class="feature-placeholder">🚀</div>
+  </div>
+  <h3>Fast & Modern</h3>
+  <p>Built with Vite for lightning-fast development and optimized production builds.</p>
+</div>

package/templates/default/src/components/footer.html

@@ -0,0 +1,5 @@
+<footer class="footer">
+  <div class="container">
+    <p>&copy; 2024 Your Site. Built with Static Kit.</p>
+  </div>
+</footer>

package/templates/default/src/components/navigation.html

@@ -0,0 +1,11 @@
+<header class="header">
+  <nav class="nav">
+    <div class="nav-brand">
+      <a href="/">Static Kit</a>
+    </div>
+    <div class="nav-links">
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+    </div>
+  </nav>
+</header>

package/templates/default/src/icons/ui/star.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/templates/default/src/js/index.ts

@@ -0,0 +1,28 @@
+// Main JavaScript entry point
+console.log("Static Kit is ready! 🚀");
+
+// Example: Add smooth scrolling for anchor links
+document.addEventListener("DOMContentLoaded", () => {
+  // Add click handlers for navigation links
+  const navLinks = document.querySelectorAll('.nav-links a');
+  
+  navLinks.forEach(link => {
+    link.addEventListener('click', () => {
+      console.log(`Navigating to: ${link.getAttribute('href')}`);
+    });
+  });
+  
+  // Example: Add some interactivity to feature cards
+  const featureCards = document.querySelectorAll('.feature-card');
+  
+  featureCards.forEach(card => {
+    const htmlCard = card as HTMLElement;
+    htmlCard.addEventListener('mouseenter', () => {
+      htmlCard.style.transform = 'translateY(-4px)';
+    });
+    
+    htmlCard.addEventListener('mouseleave', () => {
+      htmlCard.style.transform = 'translateY(0)';
+    });
+  });
+});

package/templates/default/src/pages/about.html

@@ -0,0 +1,24 @@
+<!-- @import: @components/navigation.html -->
+
+<main class="container">
+  <h1>About Static Kit</h1>
+  
+  <section>
+    <p>Static Kit is a modern static site generator that combines the simplicity of HTML with the power of modern build tools.</p>
+    
+    <h2>Why Static Kit?</h2>
+    <ul>
+      <li>Zero configuration - just start building</li>
+      <li>Component-driven development</li>
+      <li>Modern developer experience</li>
+      <li>Deployable anywhere</li>
+    </ul>
+  </section>
+  
+  <section>
+    <h2>Built With</h2>
+    <p>Static Kit uses Vite, TypeScript, and SCSS under the hood to provide a fast and modern development experience.</p>
+  </section>
+</main>
+
+<!-- @import: @components/footer.html -->

package/templates/default/src/pages/index.html

@@ -0,0 +1,23 @@
+<!-- @import: @components/navigation.html -->
+
+<section class="hero">
+  <div class="hero-content">
+    <h1>Welcome to Static Kit</h1>
+    <p>A simple, no-bullshit static site framework with TypeScript, SCSS, and HTML imports.</p>
+    
+    <!-- @import: @components/button.html -->
+  </div>
+</section>
+
+<section class="features">
+  <div class="container">
+    <h2>Features</h2>
+    <div class="feature-grid">
+      <!-- @import: @components/feature-card.html -->
+      <!-- @import: @components/feature-card.html -->
+      <!-- @import: @components/feature-card.html -->
+    </div>
+  </div>
+</section>
+
+<!-- @import: @components/footer.html -->

package/templates/default/src/styles/main.scss

@@ -0,0 +1,210 @@
+// Modern CSS Reset
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  font-family: system-ui, sans-serif;
+  color: #1f2937;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+// Utilities
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+// Header & Navigation
+.header {
+  background: #ffffff;
+  border-bottom: 1px solid #e5e7eb;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.nav-brand a {
+  font-weight: 700;
+  font-size: 1.25rem;
+  text-decoration: none;
+  color: #0066cc;
+}
+
+.nav-links {
+  display: flex;
+  gap: 2rem;
+  
+  a {
+    text-decoration: none;
+    color: #6b7280;
+    font-weight: 500;
+    transition: color 0.2s;
+    
+    &:hover {
+      color: #0066cc;
+    }
+  }
+}
+
+// Hero Section
+.hero {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 4rem 1rem;
+  text-align: center;
+}
+
+.hero-content {
+  max-width: 600px;
+  margin: 0 auto;
+  
+  h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    line-height: 1.2;
+  }
+  
+  p {
+    font-size: 1.25rem;
+    margin-bottom: 2rem;
+    opacity: 0.9;
+  }
+}
+
+// Button Component
+.button {
+  display: inline-block;
+  padding: 0.75rem 2rem;
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: 0.5rem;
+  transition: all 0.2s;
+  cursor: pointer;
+  border: none;
+  
+  &--primary {
+    background: #ffffff;
+    color: #0066cc;
+    
+    &:hover {
+      background: #f8f9fa;
+      transform: translateY(-1px);
+    }
+  }
+}
+
+// Features Section
+.features {
+  padding: 4rem 1rem;
+  background: #f9fafb;
+  
+  h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    margin-bottom: 3rem;
+    color: #1f2937;
+  }
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.feature-card {
+  background: white;
+  padding: 2rem;
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  text-align: center;
+  
+  &__icon {
+    margin-bottom: 1rem;
+  }
+  
+  .feature-placeholder {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+  }
+  
+  h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: #1f2937;
+  }
+  
+  p {
+    color: #6b7280;
+    line-height: 1.6;
+  }
+}
+
+// Main Content
+main {
+  padding: 3rem 1rem;
+  
+  h1 {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    color: #1f2937;
+  }
+  
+  h2 {
+    font-size: 1.875rem;
+    margin: 2rem 0 1rem;
+    color: #374151;
+  }
+  
+  section {
+    margin-bottom: 2rem;
+  }
+  
+  ul {
+    padding-left: 1.5rem;
+    
+    li {
+      margin-bottom: 0.5rem;
+      color: #4b5563;
+    }
+  }
+  
+  p {
+    margin-bottom: 1rem;
+    color: #4b5563;
+    line-height: 1.7;
+  }
+}
+
+// Footer
+.footer {
+  background: #1f2937;
+  color: #9ca3af;
+  padding: 2rem 1rem;
+  text-align: center;
+}

package/templates/default/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/templates/minimal/public/favicon.ico

@@ -0,0 +1 @@
+# Empty favicon placeholder

package/templates/minimal/src/components/footer.html

@@ -0,0 +1,3 @@
+<footer>
+  <p>&copy; 2024 Your Site. Built with Static Kit.</p>
+</footer>

package/templates/minimal/src/components/header.html

@@ -0,0 +1,6 @@
+<header>
+  <nav>
+    <a href="/">Home</a>
+    <a href="/about">About</a>
+  </nav>
+</header>

package/templates/minimal/src/js/index.ts

@@ -0,0 +1,9 @@
+// Main JavaScript entry point
+// This file is automatically included in every page
+
+console.log("Static Kit is ready! 🚀");
+
+// Example: Add some interactivity
+document.addEventListener("DOMContentLoaded", () => {
+  console.log("DOM loaded and ready");
+});

package/templates/minimal/src/pages/index.html

@@ -0,0 +1,15 @@
+<!-- @import: @components/header.html -->
+
+<main>
+  <h1>Welcome to Static Kit</h1>
+  <p>A simple, no-bullshit static site framework.</p>
+  
+  <section>
+    <h2>Getting Started</h2>
+    <p>Edit this file at <code>src/pages/index.html</code> to get started.</p>
+    <p>Create new components in <code>src/components/</code> and import them with:</p>
+    <pre><code>&lt;!-- @import: @components/your-component.html --&gt;</code></pre>
+  </section>
+</main>
+
+<!-- @import: @components/footer.html -->

package/templates/minimal/src/styles/main.scss

@@ -0,0 +1,77 @@
+body {
+  font-family: system-ui, sans-serif;
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+  color: #333;
+}
+
+header {
+  background: #f8f9fa;
+  padding: 1rem;
+  border-bottom: 1px solid #e5e7eb;
+  
+  nav {
+    display: flex;
+    gap: 1rem;
+    
+    a {
+      text-decoration: none;
+      color: #0066cc;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+main {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+  
+  h1 {
+    color: #1f2937;
+    margin-bottom: 0.5rem;
+  }
+  
+  section {
+    margin-top: 2rem;
+    
+    h2 {
+      color: #374151;
+      margin-bottom: 1rem;
+    }
+  }
+  
+  code {
+    background: #f3f4f6;
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+  }
+  
+  pre {
+    background: #1f2937;
+    color: #f9fafb;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    
+    code {
+      background: none;
+      padding: 0;
+      color: inherit;
+    }
+  }
+}
+
+footer {
+  background: #f8f9fa;
+  text-align: center;
+  padding: 2rem 1rem;
+  margin-top: 3rem;
+  border-top: 1px solid #e5e7eb;
+  color: #6b7280;
+}

package/templates/minimal/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}