darling-martech-redesign

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

Audit the darlingmartech site and migrate Tailwind styling to CSS Modules with Framer Motion.

Updated Mar 18, 2026

Search Tags:#audit #brand #design-system #framer-motion #css-modules #tailwind-migration #darlingmartech

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits and upgrades the darlingmartech codebase to enforce brand fidelity and premium UI standards, replacing AI-generic patterns with brand-specific design system.

Core Features & Use Cases

Brand fidelity audit: ensures Obsidian base (#0A0A0A), Electric Orange (#FF4D00), warm off-white text (#F5F0E8), and Cabinet Grotesk typography across pages.
Tailwind to CSS Modules migration: replaces utility-driven styling with CSS custom properties and modular CSS while preserving layout.
Motion integration: introduces Framer Motion with curated variants for sections and components, improving perceived quality.
Phase 2 readiness: outputs a migration plan, component upgrade checklist, and design audit report for ongoing redesigns.

Quick Start

Start the upgrade by auditing the current homepage and applying the brand-upgrade protocol to identified components.

Frequently Asked Questions about darling-martech-redesign

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

FAQPage Schema

How do I migrate a design system from Tailwind to CSS Modules?▼

Migrating from Tailwind to CSS Modules involves replacing utility-driven styling with CSS custom properties and modular files. This Skill audits your codebase and outputs a migration-ready plan that preserves layout while enforcing brand-specific component structures.

How do I add Framer Motion animations to a React design system?▼

Adding Framer Motion to a React design system introduces curated variants for sections and components. This Skill integrates Framer Motion to replace AI-generic patterns, improving perceived UI quality and applying consistent motion rules across pages.

What is a brand fidelity audit for a website redesign?▼

A brand fidelity audit evaluates your site against premium UI standards by checking exact brand colors, typography, and components. This process identifies AI-generic patterns and enforces specific design rules like Obsidian base, Electric Orange, and Cabinet Grotesk typography.

Can I use CSS Modules and Framer Motion together in a Tailwind migration?▼

Yes, you can use CSS Modules and Framer Motion together during a Tailwind migration. This Skill replaces utility classes with modular CSS custom properties while simultaneously integrating curated Framer Motion variants to enhance component animation and visual quality.

What deliverables do I get from a brand design audit and migration plan?▼

A brand design audit and migration plan delivers updated CSS, component structures, and a comprehensive audit report. You also receive a Phase 2 readiness checklist to guide ongoing redesigns and ensure continuous enforcement of your brand design system.

When should I replace utility-driven Tailwind styling with CSS custom properties?▼

You should replace utility-driven Tailwind styling with CSS custom properties when enforcing strict brand fidelity and premium UI standards. Migrating to CSS Modules allows you to eliminate AI-generic patterns and apply exact brand rules for typography and colors.