darling-martech-ui

Name: darling-martech-ui
Availability: InStock
Author: darlingmarketingandtech

Create Next.js front-end components with Darling MarTech design tokens and Framer Motion.

Updated Mar 18, 2026

Search Tags:#frontend #design-system #framer-motion #css-modules #darlingmartech #cabinet-grotesk #phosphor-icons

Ready to run

npx skills add https://github.com/DarlingMarketingandTech/darling-martech --skill darling-martech-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: darling-martech-ui
Source: https://github.com/DarlingMarketingandTech/darling-martech/tree/main/skills/darling-martech-ui
Command: npx skills add https://github.com/DarlingMarketingandTech/darling-martech --skill darling-martech-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the creation of high-fidelity, brand-consistent frontend UI for Darling MarTech by codifying the DM design DNA into reusable components and motion patterns.

Core Features & Use Cases

Design system enforcement: Cabinet Grotesk display, Inter body, Instrument Serif italic accents, and the brand color system are applied across pages and components.
Component-driven development: leverage a curated library of DM-aligned UI primitives and 3D ambient touches via Framer Motion for engaging experiences.
Quick experimentation: rapidly prototype pages, sections, or UI variants that stay true to the agency's aesthetic while delivering production-ready code.

Quick Start

Create a new Next.js component that uses Cabinet Grotesk for headlines, Inter for body text, and Phosphor icons, while applying the brand colors and motion rules.

Frequently Asked Questions about darling-martech-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build Next.js components with Framer Motion and a custom brand design system?▼

To build Next.js components with Framer Motion and a custom brand design system, use CSS Modules for styling and apply curated UI primitives to deliver agency-grade, production-ready frontend code with polished interactions.

What's the best way to enforce custom typography like Cabinet Grotesk and Inter in a frontend design system?▼

Enforcing custom typography like Cabinet Grotesk and Inter in a frontend design system requires codifying the fonts into reusable components, applying Cabinet Grotesk for display text, Inter for body copy, and Instrument Serif for italic accents.

Can I use CSS Modules instead of utility-first frameworks for Next.js component styling?▼

Yes, you can use CSS Modules instead of utility-first frameworks for Next.js component styling. CSS Modules ensure design-system compliance by applying the brand color palette and Phosphor icons without relying on utility-first frameworks.

How do I add 3D ambient touches and motion interactions to React UI components?▼

You add 3D ambient touches and motion interactions to React UI components by applying Framer Motion-driven interactions. This approach creates engaging, agency-grade UI experiences while maintaining strict design-system compliance.

Does this frontend component approach work for rapid prototyping and production-ready code?▼

Yes, this frontend component approach works for rapid prototyping and production-ready code. It allows you to rapidly prototype pages, sections, or UI variants that stay true to the agency's aesthetic while delivering production-ready Next.js code.