Which Frameworks Does Hallmark's Pre-Flight Scan Support?

Hallmark's pre-flight scan automatically detects Next.js, Astro, Vue, Svelte, SvelteKit, Remix, and vanilla HTML projects by analyzing package.json dependencies and framework-specific configuration files.

The pre-flight scan is the first step Hallmark takes when analyzing an existing codebase. According to the Nutlope/hallmark repository, this scan inspects your project structure to identify which front-end framework you're using before generating any design output. This ensures Hallmark preserves your existing architecture rather than overwriting it.

How Hallmark Detects Your Framework

According to skills/hallmark/SKILL.md (lines 58-59), the scan searches for framework-specific signatures across three primary sources: package.json dependencies, configuration files like astro.config.* or vue.config.js, and import patterns in source files. When Hallmark identifies a match, it records the framework type to ensure all subsequent design decisions respect your existing build scripts, routing conventions, and component structures.

Complete List of Supported Frameworks

The pre-flight scan recognizes six distinct project types. Here is how each framework is identified:

Next.js

Hallmark flags a project as Next.js when it detects the next package in dependencies or discovers Next.js-specific scripts in package.json.

Astro

Astro projects are recognized by the presence of the astro package in dependencies or an astro.config.* file in the project root.

Vue

The scan identifies Vue applications via the vue package in dependencies, or by finding a vue.config.js or vite.config.js that imports Vue modules.

Svelte and SvelteKit

Svelte and SvelteKit are detected when svelte or @sveltejs/kit appears in the dependencies section of package.json.

Remix

Hallmark flags Remix projects by searching for any @remix-run/* scoped packages within dependencies.

Vanilla HTML

If none of the above framework packages are present, Hallmark treats the project as vanilla HTML, inferring this from static .html, .css, or minimal JavaScript files without framework imports.

Caching Scan Results in .hallmark/preflight.json

To avoid unnecessary re-parsing, Hallmark writes the scan findings to .hallmark/preflight.json (as documented in skills/hallmark/SKILL.md, lines 77-79). This cache stores the detected framework along with design tokens like font stacks and spacing scales.

When you run Hallmark in a project directory, it automatically performs the pre-flight scan:

hallmark

After the scan completes, you can inspect the cached result:

cat .hallmark/preflight.json

A typical output looks like this:

{
  "framework": "next",
  "fontStack": "Geist",
  "palette": "custom",
  "motion": "motion-cut",
  "spacing": "tailwind"
}

You can also read this cache programmatically:

import fs from "fs";

const preflight = JSON.parse(fs.readFileSync(".hallmark/preflight.json", "utf8"));
console.log(`Detected framework: ${preflight.framework}`);

Refreshing the Pre-Flight Scan

If you add a new framework dependency after the initial scan, you must force a refresh. According to the source code, you can trigger a fresh scan with:

hallmark "refresh pre-flight"

This clears the existing .hallmark/preflight.json cache and re-analyzes the project structure, ensuring Hallmark recognizes your updated stack.

Summary

• Hallmark's pre-flight scan supports Next.js, Astro, Vue, Svelte, SvelteKit, Remix, and vanilla HTML projects.
• Detection relies on analyzing package.json dependencies and framework-specific configuration files as defined in skills/hallmark/SKILL.md.
• Scan results are cached in .hallmark/preflight.json to maintain consistent design decisions across iterations.
• Use the refresh pre-flight command to force a rescan after modifying your project's framework dependencies.

Frequently Asked Questions

How does Hallmark determine which framework my project uses?

Hallmark analyzes package.json for specific package names like next, astro, vue, svelte, or @remix-run/*, and checks for configuration files such as astro.config.* or vue.config.js. The detection logic is implemented in the pre-flight scan phase defined in skills/hallmark/SKILL.md.

Where does Hallmark store the pre-flight scan results?

The scan results are written to .hallmark/preflight.json in your project root. This JSON file caches the detected framework, font stack, color palette, and spacing system so subsequent Hallmark runs can reuse the data without re-parsing the entire codebase.

Can I run Hallmark on a project without a JavaScript framework?

Yes. If the scan finds no framework-specific packages in package.json, Hallmark treats the project as vanilla HTML. In this mode, it introduces its own token system and macrostructure while preserving your existing static .html and .css files.

How do I force Hallmark to rescan my project after adding a new framework?

Run hallmark "refresh pre-flight" from your project directory. This command invalidates the .hallmark/preflight.json cache and triggers a new scan, allowing Hallmark to detect recently added frameworks like Next.js or Astro that weren't present during the initial analysis.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}