Workflow

Nift with AI coding assistants.

Nift is useful with coding assistants for the same reason it is useful to humans: the Nift-specific layer is small, while most of the project remains ordinary HTML, CSS, JavaScript, TypeScript and whatever other technologies you choose.

Start an AI-ready project

You can initialise the same barebones structure yourself, or download the ready-made project and hand it straight to an AI coding assistant.

Or create the same starting point from the CLI:

mkdir my-site
cd my-site
nift init .html
touch ai-context.txt

Put a short description of Nift's project model in ai-context.txt. Then point Copilot, ChatGPT or another coding assistant at the project and ask it to read that file before making changes.

A useful ai-context.txt

This is a Nift v4 project.

Keep the existing project structure and ordinary HTML/CSS/JS conventions. Nift is the
templating/build layer; do not replace the project with another framework unless asked.

Core Nift template syntax:
- @content inserts the current tracked page's content into its template.
- @input('templates/partials/header.html') parses and inserts a reusable file. Use @input
  for shared markup such as headers, navigation, footers, cards and other partials.
- @pathto(...) produces a path relative to the current output page. Use tracked names for
  links between tracked pages, for example:
    <a href="@pathto('docs')">Docs</a>
- Also use @pathto(...) for concrete local CSS, JavaScript and image assets, for example:
    <link rel="stylesheet" href="@pathto('public/assets/css/style.css')">
    <script src="@pathto('public/assets/js/app.js')"></script>
    <img src="@pathto('public/assets/images/logo.svg')" alt="Logo">
  Using @pathto for a concrete local path also lets Nift report an error during the build
  when that path does not exist, instead of silently generating a broken asset reference.
- @getenv('NAME') inserts the value of an environment variable. If NAME is not set, it
  produces an empty string. Use it when build-time environment configuration belongs in
  generated output; do not put secrets into client-visible HTML or JavaScript.
- $[...] accesses Nift page/build metadata. Use only metadata names documented by this
  project's v4 documentation.
- @dep(...) is only for an external file that affects an output but is not already made a
  dependency through @content, @input or another direct Nift relationship.

Prefer @input and @pathto over duplicating markup or hard-coding fragile relative paths.
Keep Nift-specific machinery small. Use the project's existing npm/Bun/Vite/TypeScript/
React/Vue/Svelte/Tailwind/backend tooling normally rather than trying to recreate it in Nift.

Before editing, inspect the existing templates, content files and project conventions.
Prefer the smallest change that preserves the existing architecture.

Then ask for the website you actually want

Once the context file is present, the interesting prompt can stay focused on the result rather than teaching the assistant Nift every time.

Read ai-context.txt and inspect this project.

Turn the barebones Nift project into a polished website for an independent architecture
studio. Create the pages, shared template/partials, CSS and JavaScript you think are
appropriate. Keep the site responsive and accessible, and use Nift's existing project
model rather than replacing it.

The same pattern works for a portfolio, documentation site, product landing page, blog, dashboard shell or frontend for a larger application.

Why the small context works