skills.rest
Odonno
OdonnoCOMMUNITY
Explore all skills by this author →
Website𝕏@dbottiauGitHub

frontend-design

Generates production-grade frontend interfaces with distinctive typography, color, motion, and layout design.

1|2|Updated Mar 14, 2026
Search Tags:#typography#landing page#frontend#react#css#web design#ui design
One-click install
npx skills add https://github.com/Odonno/cleanmail --skill frontend-design-odonno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Odonno/cleanmail/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/Odonno/cleanmail --skill frontend-design-odonno

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, using overused fonts, cliched purple gradients, and predictable layouts. This Skill guides the creation of distinctive, production-grade frontend code with a committed aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction Framework: Commits to a bold design concept (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design Guidelines: Covers typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and textured backgrounds. - Anti-Generic Rules: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched color schemes, and predictable component patterns. - Use Case: Ask for a landing page for a coffee brand, and receive a complete HTML/CSS or React implementation with a distinctive editorial layout, characterful font pairing, and orchestrated scroll animations rather than a generic template. ## Quick Start Ask the assistant to build a landing page, dashboard, or React component and mention that it should have a distinctive, non-generic visual design.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make AI-generated websites look less generic?▼

Commit to a specific aesthetic direction before coding, such as brutalist, editorial, or retro-futuristic. Pair a distinctive display font with a refined body font, use dominant colors with sharp accents, and avoid default fonts like Inter or Arial and purple-gradient clichés.

How to create a landing page with React and custom design?▼

Define the purpose, audience, and tone first, then implement the page with production-grade React code. Use CSS variables for a cohesive theme, the Motion library for animations, and staggered reveal effects on page load for high-impact moments.

What fonts should I avoid in web design?▼

Avoid overused generic fonts like Inter, Roboto, Arial, and default system fonts, which signal template-like design. Choose characterful, unexpected typefaces and pair a distinctive display font with a refined body font instead.

Does this design approach work with frameworks like Vue or plain HTML?▼

Yes, the guidelines apply to HTML/CSS/JS, React, Vue, and other frameworks. For plain HTML, prioritize CSS-only animations; for React, use the Motion library when available for orchestrated transitions and scroll-triggered effects.

When should I use minimalism versus maximalism in UI design?▼

Both work when executed with intentionality. Maximalist designs need elaborate code with extensive animations and effects, while minimalist designs need restraint, precise spacing, refined typography, and subtle detail work.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
sao-codingsao-coding

expo-deployment

Deploy Expo apps to iOS, Android, web, and API routes using EAS.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate