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

> Discover which frameworks Hallmark's pre-flight scan supports for your web projects. Automatically detects Next.js, Astro, Vue, Svelte, SvelteKit, Remix, and more.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: getting-started
- Published: 2026-08-08

---

**Hallmark's pre-flight scan automatically detects Next.js, Astro, Vue, Svelte, SvelteKit, Remix, and vanilla HTML projects by analyzing [`package.json`](https://github.com/Nutlope/hallmark/blob/main/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](https://github.com/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) (lines 58-59), the scan searches for framework-specific signatures across three primary sources: [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) dependencies, configuration files like `astro.config.*` or [`vue.config.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/vue.config.js) or [`vite.config.js`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/.hallmark/preflight.json)

To avoid unnecessary re-parsing, Hallmark writes the scan findings to [`.hallmark/preflight.json`](https://github.com/Nutlope/hallmark/blob/main/.hallmark/preflight.json) (as documented in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/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:

```bash
hallmark

```

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

```bash
cat .hallmark/preflight.json

```

A typical output looks like this:

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

```

You can also read this cache programmatically:

```javascript
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:

```bash
hallmark "refresh pre-flight"

```

This clears the existing [`.hallmark/preflight.json`](https://github.com/Nutlope/hallmark/blob/main/.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`](https://github.com/Nutlope/hallmark/blob/main/package.json) dependencies and framework-specific configuration files as defined in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md).
- Scan results are cached in [`.hallmark/preflight.json`](https://github.com/Nutlope/hallmark/blob/main/.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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/vue.config.js). The detection logic is implemented in the pre-flight scan phase defined in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md).

### Where does Hallmark store the pre-flight scan results?

The scan results are written to [`.hallmark/preflight.json`](https://github.com/Nutlope/hallmark/blob/main/.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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/.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.