Frontend Css Patterns

This gives Claude opinionated CSS patterns that push beyond generic defaults. It'll pull from your DESIGN.md tokens if they exist, then generate distinctive typography pairings (Clash Display over Inter), committed color schemes with sharp accents, and spatial layouts that break the grid with intentional asymmetry and overlaps. The motion guidance focuses on high-impact moments like page load sequences rather than scattered micro-interactions. Works with vanilla CSS or Tailwind, and it's particularly useful when you're tired of every site looking like the same Bootstrap template. The brutalist and luxury font suggestions alone make it worth keeping around.

skills.sh installs: 182
GitHub stars: 50
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add majesticlabs-dev/majestic-marketplace --skill frontend-css-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend CSS Patterns

Implementation patterns for distinctive visual design.

Design Token Integration

If the project contains a DESIGN.md file, use its tokens as the source of truth:

/* Map DESIGN.md tokens to CSS custom properties */
:root {
  --color-primary: /* from {colors.primary} */;
  --color-accent: /* from {colors.accent} */;
  --font-display: /* from {typography.display.fontFamily} */;
  --spacing-md: /* from {spacing.md} */;
}

Do not invent colors, fonts, or spacing values when tokens are defined. Resolve {token.ref} references from YAML frontmatter before generating CSS.

Typography

/* AVOID: Generic defaults */
font-family: Inter, system-ui, sans-serif;

/* PREFER: Distinctive pairings */
--font-display: 'Clash Display', 'Space Grotesk', sans-serif;
--font-body: 'Satoshi', 'General Sans', sans-serif;

/* Specific moods */
--font-luxury: 'Cormorant Garamond', serif;
--font-brutalist: 'JetBrains Mono', monospace;
--font-playful: 'Fredoka', 'Quicksand', sans-serif;

Typography scale:

SKILL.md on GitHub