Pure Static Frontend Enterprise Project Generator

Problem Solved

This skill targets pure static frontend delivery without a build chain: it generates single pages, components, or enterprise-style multi-page projects using native HTML, CSS, and JS (ES5), with a focus on IE8+ compatibility, design-token extraction, responsive layout, and code review. It fits low-maintenance scenarios such as internal enterprise networks and legacy browsers, especially when the deliverable is directly openable modular static files rather than a complete React, Vue, or Angular SPA architecture.

How It Works

• Task breakdown: plan directories and tasks first, usually organized into global layout, page modules, and reusable modules, before coding.
• Design restoration: pull deterministic values such as colors, font sizes, line heights, and spacing from Figma, and use screenshots to validate hierarchy and grid. Values are written to docs/design-tokens.md before CSS is generated. Complex visuals are graded: L1 items are fully implemented, L2 items are approximated, and L3 items are left as placeholders and recorded in PENDING_ASSETS.md, avoiding guessed icons, gradients, or bitmaps.
• Compatibility and review: the IE8 baseline checks risks such as const, arrow functions, and event binding, then provides ES5, attachEvent, or polyfill options; code review covers standards, performance, security, accessibility, and severity grading.

Boundaries and Notes

It does not handle Node.js backends, databases, SSR/SSG, framework scaffolds, or unrelated general questions. If the user requests modern browsers only, it can switch to the modern baseline, but still outputs static files rather than upgrading to a framework project. Without design assets, it delivers structure and interaction only, without promising 1:1 visual fidelity; login, browser automation, or external tools require explicit authorization, and failures must explain the cause and next options.