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

Hallmark AI does not ship with its own runtime dependencies; instead, it scans the host project's 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 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, 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 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 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 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 lines 155-156:

• tailwindcss (along with peers like postcss and autoprefixer)
• 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 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 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 and cobalt.md specify similar font dependencies and optional lightweight motion libraries tailored to their visual aesthetic.

Configuration Examples

Here are two minimal package.json configurations demonstrating how dependencies control Hallmark's behavior.

Motion-on configuration with Framer Motion:

{
  "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:

{
  "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	Canonical skill description and dependency detection logic	L154-L159
skills/hallmark/references/themes/lumen.md	Lumen theme font requirements	L301-L307
skills/hallmark/references/themes/hum.md	Hum theme asset specifications	Various
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.
• 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.

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 for the presence of specific packages listed in 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 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 and design tokens to ensure visual consistency.

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