skills.rest
Kyonax
KyonaxCOMMUNITY
Explore all skills by this author →
Website𝕏@kyonax_on_techGitHub

madisonreed-dev

Enforce Madison Reed's design system standards across Vue, Pug, and Dynamic Yield templates.

Updated May 3, 2024
Search Tags:#design system#frontend development#e-commerce#vue.js#pug#utility css#dynamic yield
One-click install
npx skills add https://github.com/Kyonax/dot-files --skill madisonreed-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: madisonreed-dev
Source: https://github.com/Kyonax/dot-files/tree/main/.config/doom-mac/gptel-directives/backup-madisonreed-dev
Command: npx skills add https://github.com/Kyonax/dot-files --skill madisonreed-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of inconsistent, non-compliant frontend code that undermines Madison Reed's e-commerce platform brand integrity, increases technical debt, and creates fragmented user experiences across web and mobile interfaces.

Core Features & Use Cases

  • Utility-First CSS Enforcement: Mandates use of predefined spacing, typography, flexbox layout, and general utility classes to eliminate custom CSS, ensuring consistent visual rhythm, brand-aligned text styling, and maintainable responsive layouts.
  • Dynamic Yield Integration Standards: Provides strict guidelines for building personalization and A/B testing templates, integrating with the Dynamic Yield Experience API, and tracking behavioral events to protect campaign performance and data integrity.
  • Use Case: Frontend developers at Madison Reed use this Skill when building new Vue/Pug/Stylus components, refactoring legacy code, or conducting pull request reviews to ensure all output adheres to the company's shared design system and technical requirements.

Quick Start

Request a review of your Vue component's Pug template to confirm it uses only approved Madison Reed utility classes for spacing, typography, and layout instead of custom CSS.

Frequently Asked Questions about madisonreed-dev

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

FAQPage Schema
How do I enforce a utility-first CSS design system in Vue.js components?▼

Enforce utility-first CSS in Vue.js components by mandating predefined spacing, typography, and flexbox layout classes instead of custom CSS. This ensures consistent visual rhythm, brand-aligned text styling, and maintainable responsive layouts across the e-commerce platform.

What is the standard for integrating Dynamic Yield API in frontend personalization campaigns?▼

The standard for Dynamic Yield API integration involves strict guidelines for building personalization and A/B testing templates, integrating with the Experience API, and tracking behavioral events to protect campaign performance and data integrity.

Can I use custom CSS for layout and styling in Pug templates?▼

You cannot use custom CSS in Pug templates if it violates the shared design system. You must use approved utility-first CSS systems for spacing, typography, and general styling to eliminate fragmented user experiences and technical debt.

Why does inconsistent frontend code undermine e-commerce platform brand consistency?▼

Inconsistent frontend code undermines e-commerce platform brand consistency by increasing technical debt and creating fragmented user experiences across web and mobile interfaces. Governing frontend workflows eliminates non-compliant code and maintains shared design system integrity.

How do I conduct a pull request review for Vue component code compliance?▼

Conduct a Vue component pull request review by checking Pug template authoring and Dynamic Yield personalization templates against strict technical standards. Confirm adherence to utility-first CSS systems and event tracking rules to ensure code maintainability.

Related Skills

Explore More Software Engineering Skills→
KyonaxKyonax

dotcom-dev

Enforce Vue 3, Pug, Stylus, Vuex 4, Express, and Vitest standards for Madison Reed's website.

Community
Advanced
ClawLink-HQClawLink-HQ
117

amplitude-analytics

Automate event analytics, cohort management, and release tracking via the Amplitude Analytics API.

Official
Intermediate
Dev-Dennis-040Dev-Dennis-040
10

marketing-china-ecommerce-operator

Optimizes cross-platform China e-commerce operations for Taobao, Tmall, Pinduoduo, JD, and Douyin Shop.

Community
Advanced
AgentiveCityAgentiveCity
2

shadcn-vite-integration

Configure shadcn/ui in Vite React TypeScript projects with Tailwind CSS.

Official
Intermediate