Project Standards

Blueprint-driven development — describe your entire application as YAML declarations, then generate code via AI. No hand-written boilerplate. The blueprints are the source of truth; generated code is a build artifact.

The Standards Pipeline

Every Weblisk project is governed by three configuration blueprints that form a generation pipeline:

File	Purpose
global.yaml	Project identity, metadata, navigation, SEO defaults, social cards
code.yaml	Code conventions — file naming, formatting, import style, linting rules
theme.yaml	Design tokens — colors, typography, spacing, breakpoints, component variants

The CLI reads these three files and passes them as context to the configured LLM alongside page/component/island declarations. The result is a complete, buildable project — no manual coding required.

global.yaml

Defines project-wide settings that apply to every generated page:

global.yaml

name: My Project
domain: example.com
description: A blueprint-driven web application

navigation:
  - label: Home
    path: /
  - label: Features
    path: /features
  - label: Docs
    path: /docs

seo:
  title_suffix: " — My Project"
  og_image: /images/og-default.png
  twitter_site: @myproject

footer:
  copyright: "© 2026 My Organization"
  links:
    - label: GitHub
      url: https://github.com/my-org

code.yaml

Defines code generation conventions — how files are named, formatted, and structured:

code.yaml

language: html
style: vanilla       # No framework — pure HTML/CSS/JS

formatting:
  indent: 2
  quotes: double
  semicolons: true

naming:
  files: kebab-case
  classes: kebab-case
  variables: camelCase

constraints:
  no_frameworks: true
  no_build_step: true
  accessibility: wcag-aa
  performance_budget: 100kb

theme.yaml

Design tokens consumed by the generator — ensures visual consistency across all generated pages:

theme.yaml

colors:
  primary: "#6366f1"
  secondary: "#06b6d4"
  surface: "#1a1f36"
  text: "#e2e8f0"

typography:
  font_family: "Inter, system-ui, sans-serif"
  font_mono: "JetBrains Mono, monospace"
  base_size: 16px
  scale: 1.25

spacing:
  unit: 8px
  section: 80px

breakpoints:
  mobile: 640px
  tablet: 768px
  desktop: 1024px

modes:
  dark: true
  light: true

Page Declarations

Each page is declared as a YAML file in a pages/ directory. The declaration describes the page's purpose, sections, and data — not its implementation:

pages/features.yaml

title: Features
path: /features
description: Platform capabilities overview

sections:
  - type: hero
    headline: Everything you need
    subheadline: Zero dependencies. Full control.
  - type: feature-grid
    columns: 3
    items:
      - title: Signals
        description: Fine-grained reactivity
        icon: signal
      - title: Islands
        description: Partial hydration
        icon: island

Component & Island Declarations

Reusable UI elements are declared as components. Interactive components use the island pattern for selective hydration:

components/pricing-card.yaml

name: pricing-card
type: island          # Hydrated on interaction
hydrate: visible

props:
  plan: string
  price: number
  features: string[]
  cta: string

interactions:
  - toggle annual/monthly pricing
  - highlight on hover
  - CTA click → checkout

Three Project Modes

Standards blueprints support three project architectures:

Mode	Description	Template
Client-Only	Static HTML/CSS/JS — no server, no build step. Deployed to any CDN.	`client/default`
Client + Islands	Static pages with selectively hydrated interactive components. Partial hydration via `data-island`.	`client/dashboard`
Full Stack	Client + server. Domain controllers, agents, gateway, and application logic — all blueprint-driven.	`server/starter`

The Starter Template

The starter template is the flagship demonstration of standards-driven development. An entire multi-page website described entirely as YAML — zero hand-written HTML, CSS, or JavaScript:

Terminal

# Create a blueprint-driven site
weblisk new --template starter my-site
cd my-site

# Project structure:
├── global.yaml          # Project identity + navigation
├── code.yaml            # Code conventions
├── theme.yaml           # Design tokens
├── pages/               # Page declarations
│   ├── index.yaml
│   ├── features.yaml
│   └── docs.yaml
├── components/          # Component declarations
│   ├── hero.yaml
│   └── pricing-card.yaml
└── dist/                # Generated output (build artifact)

# Generate the site
weblisk generate

Generation Pipeline

When you run weblisk generate, the CLI:

Reads global.yaml, code.yaml, and theme.yaml as context
Resolves all page and component declarations
Passes the full context to the configured LLM (local Ollama or remote)
Generates HTML, CSS, and JS files into dist/
Validates the output against code conventions and accessibility requirements

The generated code is deterministic given the same declarations + model. Regeneration is safe — your YAML declarations are the source of truth, not the generated output.

Get started with weblisk new --template starter. See Templates for all available project starters, or CLI Reference for the full command set.