frontend-design

Define creative direction for frontend aesthetics before writing code.

Updated Apr 10, 2026
One-click install
npx skills add https://github.com/LuizEduPP/skills --skill frontend-design-luizedupp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/LuizEduPP/skills/tree/main/frontend-design
Command: npx skills add https://github.com/LuizEduPP/skills --skill frontend-design-luizedupp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Transforms bland, generic AI interface drafts into distinctive, production-grade frontend experiences by enforcing creative direction before any code is written.

Core Features & Use Cases

  • Design Direction: Forces upfront definition of purpose, tone, and differentiation to ensure interfaces are unforgettable.
  • Aesthetic Guidelines: Covers typography choices, color palettes, motion cues, spatial composition, and visual details that break the cookie-cutter mold.
  • Anti-Patterns & Implementation: Lists forbidden clichés and reminds builders to match implementation complexity to the chosen vision for both maximalist and minimalist briefs.
  • Use Case: Brief a marketing site with premium typography, layered motion, and asymmetrical layouts so the team delivers an expressive brand narrative instead of a templated page.

Quick Start

Ask for a creative dashboard with layered gradients, expressive typography, and motion reveals to define the direction before coding.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I make my web UI design stand out and avoid generic AI generated layouts?

To make your web UI design stand out, define a clear creative direction upfront by establishing distinct typography, layered motion cues, and asymmetrical spatial composition before writing any code, ensuring the interface avoids generic AI outputs.

What is the best way to plan typography and color palettes for a bold frontend?

The best way to plan typography and color palettes for a bold frontend is to enforce upfront aesthetic guidelines that align with your brand narrative, ensuring premium visual details and expressive choices are defined before implementation begins.

Can I use this approach for both minimalist and maximalist web components?

Yes, you can use this approach for both minimalist and maximalist web components by matching the implementation complexity to your chosen visual vision, while actively avoiding listed forbidden clichés and anti-patterns to maintain high quality.

How do I style a React component with distinctive motion reveals?

To style a React component with distinctive motion reveals, define the visual direction and motion cues first, applying spatial composition and aesthetic guidelines before coding to ensure the final component delivers a memorable experience.

Why does my AI generated dashboard look so templated and bland?

Your AI generated dashboard looks templated and bland because it lacks upfront creative direction, which is needed to enforce distinctive typography, color palettes, and spatial composition that break the generic cookie-cutter mold.

What anti-patterns should I avoid when building modern web UIs?

When building modern web UIs, avoid forbidden clichés and generic visual templates by establishing clear aesthetic guidelines upfront, ensuring your implementation complexity matches the chosen design direction without falling into common traps.