Create distinctive, production-grade React/TypeScript frontends with exceptional design quality
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
Create distinctive, production-grade React frontends with TypeScript and exceptional design quality. This skill integrates the 5-dimension design framework with React-specific patterns, Framer Motion animations, and accessibility best practices.
This is the core 5-dimension framework for creating intentional, non-generic design that avoids the homogenized aesthetic of default AI outputs. Each dimension works together to create designs with personality and deliberation.
Purpose: Typography is the primary carrier of voice and personality in digital design.
Core Principles:
Implementation:
Example Pattern:
Purpose: Color sets mood and creates visual coherence while avoiding cliché palettes.
Core Principles:
Anti-Patterns to Avoid:
Implementation:
Example Approach:
Purpose: Motion reveals personality and guides user attention with intentionality.
Core Principles:
Implementation:
Anti-Patterns:
Purpose: Space and layout create rhythm and guide the eye through intentional composition.
Core Principles:
Implementation:
Anti-Patterns:
Purpose: The foundation layer that can transform a generic design into something memorable.
Core Principles:
Implementation:
Anti-Patterns:
These fonts are ubiquitous in default AI outputs and should be rejected as your primary choice:
If you use any of these, pair them with something unexpected and deliberately break the generic pattern.
These faces bring personality and intention to design:
Display & Decorative:
Body & Copy:
Monospace (Technical, Quotes, Code):
High-Contrast Pairings (Recommended):
Pattern 1: Display + Mono
Headline: Playfair Display (elegant serif)
Body: JetBrains Mono (technical monospace)
Result: Sophisticated + Modern
Pattern 2: Serif + Geometric Sans
Headline: Crimson Pro (high-contrast serif)
Body: Space Grotesk (geometric sans)
Result: Elegant + Contemporary
Pattern 3: Decorative + Humanist
Headline: Bricolage Grotesque (handcrafted sans)
Body: IBM Plex Sans (warm humanist sans)
Result: Crafted + Approachable
Don't use two similar typefaces:
Use weight extremes to create contrast, not mid-range weights:
Good:
Avoid:
Use 3x+ jumps between hierarchy levels, not incremental 1.5x steps:
Generic (Linear Scaling):
H1: 48px
H2: 36px (75% of H1)
H3: 28px (78% of H2)
Body: 16px
Small: 14px
Result: Feels predictable, every size feels similar distance apart.
Intentional (3x+ Jumps):
Display: 96px (3x body)
Headline: 48px (3x body)
Sub-headline: 28px (1.75x body)
Body: 16px
Caption: 12px (0.75x body)
Result: Creates clear visual hierarchy, extreme sizes make smaller sizes feel intentional.
Implementation Rules:
Example: 16px Base:
Line Height Strategy:
Letter Spacing Strategy:
import styled from 'styled-components';
export const TypographyTokens = {
display: {
fontSize: '88px',
fontFamily: "'Playfair Display', serif",
fontWeight: 700,
lineHeight: 1.1,
letterSpacing: '-0.5px',
},
h1: {
fontSize: '48px',
fontFamily: "'Playfair Display', serif",
fontWeight: 700,
lineHeight: 1.2,
letterSpacing: '-0.25px',
},
body: {
fontSize: '16px',
fontFamily: "'IBM Plex Sans', sans-serif",
fontWeight: 400,
lineHeight: 1.6,
letterSpacing: 0,
},
mono: {
fontSize: '14px',
fontFamily: "'JetBrains Mono', monospace",
fontWeight: 400,
lineHeight: 1.5,
letterSpacing: '0.5px',
},
caption: {
fontSize: '12px',
fontFamily: "'IBM Plex Sans', sans-serif",
fontWeight: 400,
lineHeight: 1.7,
letterSpacing: 0,
},
};
export const Display = styled.h1`
${Object.entries(TypographyTokens.display)
.map(([key, value]) => `${key}: ${value};`)
.join('\n')}
`;
export const Heading = styled.h2`
${Object.entries(TypographyTokens.h1)
.map(([key, value]) => `${key}: ${value};`)
.join('\n')}
`;
export const Body = styled.p`
${Object.entries(TypographyTokens.body)
.map(([key, value]) => `${key}: ${value};`)
.join('\n')}
`;
// In your main App.tsx or _document.tsx
import { useEffect } from 'react';
export function FontLoader() {
useEffect(() => {
const link = document.createElement('link');
link.href = 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;700&family=IBM+Plex+Sans:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap';
link.rel = 'stylesheet';
document.head.appendChild(link);
}, []);
return null;
}
Motion reveals personality and guides user attention with intentionality. Deliberate animation transforms passive interfaces into experiences that feel alive and considered.
Use Framer Motion for state-driven animations and complex sequences:
Basic Animation:
import { motion } from 'framer-motion';
export function AnimatedCard() {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{
duration: 0.6,
ease: "easeOut"
}}
>
Card content
</motion.div>
);
}
Staggered Children Animation:
import { motion } from 'framer-motion';
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
},
},
};
const childVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.6, ease: "easeOut" },
},
};
export function AnimatedList({ items }: { items: Array<any> }) {
return (
<motion.div
variants={containerVariants}
initial="hidden"
animate="visible"
>
{items.map((item) => (
<motion.div key={item.id} variants={childVariants}>
{item.content}
</motion.div>
))}
</motion.div>
);
}
Orchestrated Reveal:
Don't animate everything at once. Create a sequence that guides the user's eye:
import { motion } from 'framer-motion';
export function PageLoad() {
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { staggerChildren: 0.1, delayChildren: 0.2 },
},
};
return (
<>
<motion.div
className="hero"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8 }}
/>
<motion.h1
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
>
Headline
</motion.h1>
<motion.div
className="content"
variants={containerVariants}
initial="hidden"
animate="visible"
>
{/* Content items */}
</motion.div>
</>
);
}
Timing Sequence:
0ms - Background/Hero fades in
200ms - Headline slides in from top
400ms - Sub-headline fades in
600ms - Primary CTA appears
800ms - Supporting content staggered reveal
Using Framer Motion with scroll events:
import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
export function ScrollReveal({ children }: { children: React.ReactNode }) {
const { ref, inView } = useInView({ threshold: 0.1 });
return (
<motion.div
ref={ref}
initial={{ opacity: 0, y: 40 }}
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 40 }}
transition={{ duration: 0.8, ease: "easeOut" }}
>
{children}
</motion.div>
);
}
Hover interactions should be delightful, not just functional:
export function HoverCard() {
return (
<motion.div
whileHover={{
y: -8,
boxShadow: '0 24px 48px rgba(0,0,0,0.2)',
}}
transition={{ duration: 0.3, ease: "easeOut" }}
>
<motion.span
whileHover={{ rotate: 45, scale: 1.1 }}
transition={{ duration: 0.2 }}
>
🎯
</motion.span>
</motion.div>
);
}
Recommended Easing Values:
Generic Font Choices - Avoid Inter, Roboto, Open Sans, Lato, system fonts. Result: Immediately reads as "default AI design," no personality.
Incremental Size Jumps - Avoid H1: 48px, H2: 40px, H3: 32px. Better: Display: 88px, Headline: 48px, Sub: 28px, Body: 16px.
Mid-Range Font Weights Only - Avoid using only weights 400, 500, 600. Better: Display: 300 or 700, Body: 400, Emphasis: 800/900.
Cliché Color Schemes - Avoid Material Design Trinity (Blue, Red, Green), default SaaS blues, rainbow palettes, pure grays.
Monochrome Everything - Avoid: Background: #f5f5f5, Text: #333333, Accent: #0099ff. Result: Feels corporate and soulless.
Oversaturated Accent Colors - Avoid neon colors at 100% saturation that don't exist in real life.
Cookie-Cutter Centered Layout - Avoid: Everything centered, symmetrical, predictable grid alignment. Reads as: "Default SaaS dashboard"
Uniform Padding Everywhere - Avoid: Same padding on all elements, no variation in spacing, everything feels equally distant.
Linear Timing on Everything - Avoid: transition: all 0.3s linear; - Feels robotic.
No Animation at All - Avoid: Instant page loads, no hover feedback, transitions that snap instantly.
Animation-Heavy Design - Avoid: Animating every element, multiple simultaneous animations, animation that distracts from content.
Slow, Sluggish Motion - Avoid: transition: all 2s linear; - Feels like the app is struggling to load.
Don't design until you answer these four questions:
Questions to Answer:
Based on your purpose, what emotional response should the design evoke?
Emotional Directions:
Before designing, know your boundaries:
Categories:
Every intentional design has one element that makes it memorable and distinctly yours.
Types of Differentiation:
What NOT to do:
"Let's make an app. Use modern design. Blue accent color.
Put a card here, buttons there. Done."
What TO do instead:
"This app is for busy professionals who are skeptical of new tools.
We want them to feel calm confidence. We'll differentiate with
warm serif typography and burnt orange accents. Motion will be
snappy and encouraging. The unforgettable element is the delight
of task completion with orchestrated motion."
Complete the pre-design checklist. Answer: Purpose, Tone, Constraints, Differentiation. No code yet.
interface CardProps {
title: string;
description: string;
onInteract?: () => void;
variant?: 'primary' | 'secondary';
}
export const Card: React.FC<CardProps> = React.memo(({
title,
description,
onInteract,
variant = 'primary'
}) => {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
whileHover={{ y: -4 }}
className={`card card--${variant}`}
>
<h3>{title}</h3>
<p>{description}</p>
</motion.div>
);
});
Card.displayName = 'Card';
export const InteractiveButton: React.FC<{
label: string;
onClick: () => void;
disabled?: boolean;
ariaLabel?: string;
}> = ({ label, onClick, disabled, ariaLabel }) => {
return (
<motion.button
onClick={onClick}
disabled={disabled}
aria-label={ariaLabel || label}
role="button"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
{label}
</motion.button>
);
};
// Use React.memo to prevent unnecessary re-renders
export const OptimizedComponent = React.memo(({ data }: Props) => {
return <div>{data}</div>;
});
// Use useCallback for stable function references
const handleClick = useCallback(() => {
// Handle click
}, []);
// Use useMemo for expensive computations
const processedData = useMemo(() => {
return expensiveOperation(data);
}, [data]);
import styled from 'styled-components';
export const ResponsiveContainer = styled.div`
/* Mobile-first */
padding: 16px;
font-size: 14px;
/* Tablet */
@media (min-width: 768px) {
padding: 24px;
font-size: 16px;
}
/* Desktop */
@media (min-width: 1024px) {
padding: 32px;
font-size: 18px;
}
`;
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Validate WCAG 2.1 Level AA compliance and accessibility best practices. Use when performing accessibility audits and WCAG certification.
The English summary is being prepared. Showing the original description.
Analyze feature requirements, dependencies, and security considerations. Use when starting feature implementation from GitHub issues to understand scope, technical feasibility, and risks.
The English summary is being prepared. Showing the original description.
Run SQL queries against psql, BigQuery, or MySQL from the terminal, including natural-language-to-SQL and schema exploration. Use when analyzing data, inspecting DB state, or debugging tables. Trigger on "query the database", "SQL", "show me data from", "explore table".
The English summary is being prepared. Showing the original description.
Design REST APIs or function contracts with clear request/response specifications, error handling patterns, authentication strategies, and comprehensive documentation.
The English summary is being prepared. Showing the original description.
Generate comprehensive API endpoint tests for REST and GraphQL APIs. Creates tests for all HTTP methods, status codes, authentication, and validation.
The English summary is being prepared. Showing the original description.
Design component architecture and module structure using established architectural patterns for clean, maintainable, and scalable systems.
The English summary is being prepared. Showing the original description.