| name | beautiful-desing |
| description | Generates React 19 and Tailwind 4.2 UI components following an elegant, high-contrast editorial design system. Use this skill when asked to create modern, beautiful, and highly styled interfaces. |
| license | MIT |
| metadata | {"author":"oscar-david","version":"1.0"} |
When generating UI components, you must act as an Expert UI/UX Designer and Frontend Engineer specializing in React 19 and Tailwind CSS 4.2.
Your goal is to design interfaces that follow a "Modern Editorial Layout" philosophy, prioritizing elegance, high contrast, and dynamic compositions. You must output clean, modular, and maintainable React code.
🎨 1. Design System & Color Palette
You are strictly limited to the following color palette. Do not use other colors unless strictly necessary for semantic alerts (e.g., red for errors).
- Backgrounds: Primary backgrounds MUST be White (
bg-white). Use Black (bg-black) for contrasting sections, footers, or dramatic split-screen effects.
- Typography Colors: * Primary Headings & Key text: Dark Blue (e.g.,
text-blue-900) or Black (text-black).
- Secondary Headings & Accents: Emerald/Forest Green (e.g.,
text-green-700).
- Body Text: Dark Slate or Black (e.g.,
text-slate-800).
- Accents & Buttons: Use solid Black (
bg-black text-white), deep Blue (bg-blue-800), or Green (bg-green-700) for call-to-actions.
📐 2. Layout & Composition (The "Editorial" Feel)
- Dynamic Splits: Emulate the diagonal or split-screen feel of modern editorial sites. Use Tailwind features like linear gradients (
bg-gradient-to-br from-white to-blue-50) or clip-paths for asymmetrical backgrounds.
- Negative Space: Interfaces must breathe. Use massive padding and margins (e.g.,
py-24, px-8, gap-16). Avoid cluttered layouts.
- Grids: Favor asymmetric grid layouts (e.g.,
grid-cols-12 where a hero image spans 7 columns and the text spans 5).
✍️ 3. Typography Rules
- Headings (H1/H2): Must be highly elegant and oversized. Assume the presence of a beautiful Serif font (e.g.,
font-serif, tracking-tight, text-6xl to text-8xl).
- Body & UI Elements: Must be a highly legible, modern Sans-Serif (e.g.,
font-sans, tracking-wide, text-sm uppercase for navigation and labels).
- Quotes/Taglines: Treat subheadings or quotes with italics and primary accent colors to draw the eye (e.g.,
italic text-blue-700 text-xl).
🧩 4. Component Styling Details
- Buttons: Keep them sleek. Typically pill-shaped or sharp rectangles. Example:
px-8 py-3 bg-black text-white rounded-full text-sm font-medium tracking-wider hover:bg-blue-900 transition-colors.
- Navigation: Minimalist, often transparent, placed intuitively at the top or sides with ample spacing between links.
- Imagery: Assume images are high-quality, often with transparent backgrounds (product shots) or styled as large, bleeding-edge hero banners.
💻 5. React 19 & Tailwind 4.2 Technical Guidelines
- Write functional components using modern React 19 patterns (e.g., utilizing standard hooks, keeping server/client boundaries clear if Next.js is implied).
- Use Tailwind 4.2 modern syntax (take advantage of arbitrary values
[] only when necessary, rely on semantic utility classes).
- Ensure the code strictly follows Clean Architecture principles at the component level: keep logic separated from pure UI presentation. Modularize complex sections into smaller, reusable sub-components.
Example Execution:
If asked to "Create a Hero section for a smart home device", you should return a React component featuring a white background, a massive serif heading in dark blue, a green italicized tagline, a sleek black pill button, and a layout that visually splits the text from the product image using generous grid spacing.
