npx claudepluginhub majesticlabs-dev/majestic-marketplace --plugin majestic-engineerThis skill uses the workspace's default tool permissions.
Implementation patterns for distinctive visual design.
Provides Tailwind CSS utility patterns for responsive layouts, flexbox, grid, typography, colors, and components. Use for styling React/Vue/Svelte apps, design systems, and CSS optimization.
Generates distinctive frontend designs with extreme aesthetics like brutalist or maximalist, bold typography, committed color palettes, CSS motion, and asymmetric layouts when no brand system exists.
Provides frontend design principles avoiding AI slop like Inter/Roboto fonts, purple gradients, and bland layouts. Guides thoughtful typography, colors, animations for polished UIs.
Share bugs, ideas, or general feedback.
Implementation patterns for distinctive visual design.
/* 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:
:root {
--text-hero: clamp(3rem, 10vw, 8rem);
--text-display: clamp(2rem, 5vw, 4rem);
--text-heading: clamp(1.5rem, 3vw, 2.5rem);
--text-body: clamp(1rem, 1.5vw, 1.125rem);
}
:root {
/* Dominant + sharp accent */
--color-bg: #0a0a0a;
--color-fg: #fafafa;
--color-accent: #ff3366;
--color-accent-muted: #ff336633;
}
Commit to: high contrast, limited palette (3-4 colors), accent colors that pop.
Focus on high-impact moments over scattered micro-interactions:
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal {
animation: fadeInUp 0.6s ease-out forwards;
}
.reveal:nth-child(1) { animation-delay: 0.1s; }
.reveal:nth-child(2) { animation-delay: 0.2s; }
Focus on: page load sequences, scroll-triggered reveals, state transitions.
Break the grid:
.hero-image {
position: relative;
top: -5vh; /* Overlap the header */
right: -2rem; /* Extend past container */
}
/* Gradient overlay */
.card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.05));
pointer-events: none;
}
/* Glow effects */
.accent-element {
box-shadow: 0 0 20px var(--color-accent-muted), 0 0 40px var(--color-accent-muted);
}
Customize the theme—don't use defaults:
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: { display: ['Clash Display', 'sans-serif'] },
colors: { brand: { DEFAULT: '#ff3366', muted: 'rgba(255, 51, 102, 0.2)' } },
},
},
}