Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Includes framework-specific guidance for Tailwind, React, Vue, and Rails/Hotwire ecosystems.
Creates distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications.
/plugin marketplace add majesticlabs-dev/majestic-marketplace/plugin install majestic-engineer@majestic-marketplaceThis skill is limited to using the following tools:
resources/css-polish-tips.mdresources/landing-page-design.mdresources/motion-patterns.mdresources/rails-hotwire.mdresources/react-vue.mdresources/ui-implementation-guide.mdBefore writing code, consider:
Rather than defaulting to safe, generic designs, commit to a clear aesthetic direction:
Generic AI-generated aesthetics are immediately recognizable. Avoid:
/* 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)' } },
},
},
}
See resources/react-vue.md for:
See resources/rails-hotwire.md for:
See resources/ui-implementation-guide.md for specific numeric rules:
See resources/motion-patterns.md for:
prefers-reduced-motion supportSee resources/css-polish-tips.md for:
See resources/landing-page-design.md for:
landing-page-builder skill (copy) with visual guidance| Category | Avoid |
|---|---|
| Typography | Inter/Roboto as primary, single font for all |
| Color | Purple-to-blue gradients, gray-on-gray |
| Layout | Centered everything, symmetrical grids |
| Motion | Hover effects everywhere, bouncy animations |
Remember: Every default is a choice. If you're using defaults, you're making generic work.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.