skills.rest
DarlingMarketingandTech
DarlingMarketingandTechCOMMUNITY
Explore all skills by this author →
GitHub

darling-martech-ui

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
One-click install
npx skills add https://github.com/DarlingMarketingandTech/darling-martech --skill darling-martech-ui
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
AlfxjxAlfxjx

design-taste-frontend

Enforce metric-based UI/UX rules and optimize frontend design for React or Next.js projects.

Community
Advanced
datamonsterrdatamonsterr

frontend-design

Generate HTML/CSS/JS frontend interfaces from aesthetic direction and technical constraints.

Community
Advanced
shalintripathishalintripathi
4

design-ops

Coordinate design operations with modular identity systems and templated workflows.

Community
Advanced
del-zhenwudel-zhenwu

baseline-ui

Validate React components for accessibility, layout, and Tailwind CSS style consistency.

Community
Basic