# What Are the Dependencies for Hallmark AI? Complete Guide to Motion Libraries and Framework Detection

> Discover Hallmark AI dependencies. Learn how it detects frameworks and motion libraries by scanning your package.json for seamless integration.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: complete-guide
- Published: 2026-07-25

---

**Hallmark AI does not ship with its own runtime dependencies; instead, it scans the host project's [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) to detect installed frameworks, animation libraries, and styling tools, adapting its output to match the existing technology stack.**

Hallmark AI is a design skill in the [Nutlope/hallmark](https://github.com/Nutlope/hallmark) repository that generates UI components by analyzing the context of your web project. Rather than bundling its own dependencies, Hallmark relies entirely on the packages already present in your codebase to determine how to emit code. Understanding these dependencies for Hallmark AI is essential for controlling whether the skill generates animated or static components.

## How Hallmark AI Handles Dependencies

Hallmark operates as a peer to your project, not a package you install. As documented in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), the skill performs a pre-flight scan of your repository to discover which libraries are available. It uses this information to set its **micro-interaction stance** and framework conventions, ensuring generated code matches your existing architecture.

## Micro-Interaction Dependencies: Motion-On vs Motion-Cut

The most critical dependency detection in Hallmark concerns animation libraries. The skill checks [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) for specific packages to decide whether the project is **motion-on** (animated) or **motion-cut** (static).

### Animation Libraries That Enable Motion-On Mode

According to [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) lines 156-158, Hallmark treats the project as motion-on if it detects any of the following packages:

- `framer-motion`
- `gsap`
- `motion` (the Motion library)
- `lenis`
- `lottie-react`
- Any `@react-spring/*` package
- `auto-animate`

If **none** of these are present, Hallmark defaults to motion-cut mode and generates static HTML elements instead of animated wrappers.

### Practical Impact on Generated Code

When motion-on is detected, Hallmark emits components using the detected library's primitives, such as `<motion.div>` for Framer Motion or animated wrappers for GSAP. In motion-cut mode, the skill outputs plain `<div>` elements and strips animation-related CSS to ensure compatibility with static environments.

## Framework and Styling Dependencies

Beyond animation, Hallmark detects frameworks and styling tools to match your project's conventions.

### Framework Detection

As noted in [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) lines 158-159, Hallmark identifies the host framework by checking for:

- `next` (Next.js)
- `astro` (Astro)
- `vue` or `nuxt`
- `svelte` or `@sveltejs/kit`
- `@remix-run/*` (Remix)

This detection influences file naming conventions, routing patterns, and component structure in the generated output.

### Styling and Design Tokens

Hallmark scans for styling infrastructure documented in [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) lines 155-156:

- `tailwindcss` (along with peers like `postcss` and `autoprefixer`)
- [`tokens.json`](https://github.com/Nutlope/hallmark/blob/main/tokens.json) or `design-tokens.{json,yaml}` files
- CSS custom properties defined in `:root`

The skill reads these to preserve your existing color palettes, spacing scales, and typography settings when generating new components.

### Font Handling

According to [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) lines 154-155, Hallmark detects font provisioning through:

- `next/font` (Next.js font optimization)
- `@fontsource/*` packages
- `expo-google-fonts`
- `geist`

The skill respects whichever mechanism is present to ensure generated components use your established font stack.

## Theme-Specific Asset Dependencies

Individual visual themes within Hallmark declare their own required external assets. For example, the **Lumen** theme documented in [`skills/hallmark/references/themes/lumen.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md) lines 301-307 requires specific Google Font families: **Instrument Serif**, **Geist**, and **JetBrains Mono**. These must be linked in the HTML head, as the generated CSS references these font families directly.

Other themes like [`hum.md`](https://github.com/Nutlope/hallmark/blob/main/hum.md) and [`cobalt.md`](https://github.com/Nutlope/hallmark/blob/main/cobalt.md) specify similar font dependencies and optional lightweight motion libraries tailored to their visual aesthetic.

## Configuration Examples

Here are two minimal [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) configurations demonstrating how dependencies control Hallmark's behavior.

**Motion-on configuration** with Framer Motion:

```json
{
  "name": "my-hallmark-ui",
  "version": "0.1.0",
  "dependencies": {
    "react": "^18.2.0",
    "framer-motion": "^11.0.0",
    "tailwindcss": "^3.4.0"
  }
}

```

**Motion-cut configuration** without animation libraries:

```json
{
  "name": "my-hallmark-ui",
  "version": "0.1.0",
  "dependencies": {
    "react": "^18.2.0",
    "tailwindcss": "^3.4.0"
  }
}

```

## Key Source Files

The dependency logic is implemented across these files in the Nutlope/hallmark repository:

| File | Purpose | Key Lines |
|------|---------|-----------|
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Canonical skill description and dependency detection logic | L154-L159 |
| [`skills/hallmark/references/themes/lumen.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md) | Lumen theme font requirements | L301-L307 |
| [`skills/hallmark/references/themes/hum.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/hum.md) | Hum theme asset specifications | Various |
| [`skills/hallmark/references/themes/cobalt.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/cobalt.md) | Cobalt theme minimal dependency set | Various |

## Summary

- Hallmark AI ships with **zero runtime dependencies** and relies entirely on the host project's [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json).
- **Motion libraries** (`framer-motion`, `gsap`, `motion`, `lenis`, `lottie-react`, `@react-spring/*`, `auto-animate`) trigger motion-on mode; their absence forces motion-cut mode.
- **Framework detection** (Next.js, Astro, Vue, Svelte, Remix) determines code generation patterns.
- **Styling tools** (Tailwind CSS, design tokens, CSS custom properties) inform the visual output.
- **Font packages** (`next/font`, `@fontsource/*`, Google Fonts) are detected and respected.
- **Theme-specific assets** (Google Font links, external stylesheets) are declared in individual theme files like [`lumen.md`](https://github.com/Nutlope/hallmark/blob/main/lumen.md).

## Frequently Asked Questions

### Does Hallmark AI require installing any specific npm packages to work?

No. Hallmark AI does not require you to install any packages for the skill itself to function. However, to get animated components, you must install one of the supported motion libraries like `framer-motion` or `gsap` in your host project. Without these, Hallmark defaults to static output.

### How does Hallmark AI detect which animation library to use?

Hallmark scans your [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) for the presence of specific packages listed in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) lines 156-158. If multiple animation libraries are present, Hallmark selects the most appropriate one based on the project context and the specific theme being applied.

### Can I use Hallmark AI with a project that doesn't use React?

Yes. Hallmark detects multiple frameworks including Vue, Svelte, Astro, and Remix as documented in [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) lines 158-159. The skill adapts its component generation to match the detected framework's conventions and syntax.

### What happens if my project uses Tailwind CSS but no animation libraries?

Hallmark will operate in motion-cut mode, generating static components that use your Tailwind configuration for styling but omitting any animation-related code. The skill still respects your [`tailwind.config.js`](https://github.com/Nutlope/hallmark/blob/main/tailwind.config.js) and design tokens to ensure visual consistency.