skills.rest
Nzettodess
NzettodessCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux

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

2|Updated Jan 26, 2026
Search Tags:#typography#frontend#react#web design#ui design#ux#css animation
One-click install
npx skills add https://github.com/Nzettodess/Awesome-Agent-Skills --skill frontend-ui-ux-nzettodess
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/Nzettodess/Awesome-Agent-Skills/tree/main/Skills/Frontend/frontend-ui-ux
Command: npx skills add https://github.com/Nzettodess/Awesome-Agent-Skills --skill frontend-ui-ux-nzettodess

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers often produce functional but visually generic interfaces, especially when no design mockups are available. This Skill guides the AI to act as a designer-turned-developer, producing cohesive, memorable UI/UX with intentional aesthetic direction instead of cookie-cutter layouts. ## Core Features & Use Cases - Aesthetic Direction Framework: Commits to a bold design direction (minimalist, brutalist, editorial, retro-futuristic, etc.) before writing any code, ensuring intentional and cohesive results. - Design Guidelines: Enforces distinctive typography pairings, cohesive CSS-variable color palettes, orchestrated motion and scroll-triggered animations, and unconventional spatial composition. - Anti-Pattern Guardrails: Explicitly avoids generic fonts (Inter, Roboto, Arial), cliched purple-gradient schemes, and predictable component patterns. - Use Case: Ask the agent to build a landing page for a coffee brand with no mockup provided; it selects an editorial/magazine aesthetic, pairs a display serif with a refined body font, and delivers production-grade HTML/CSS or React code with staggered reveal animations. ## Quick Start Build a landing page for my product with a bold editorial aesthetic, distinctive typography, and smooth scroll-triggered animations.

Frequently Asked Questions about frontend-ui-ux

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

FAQPage Schema
How do I create a good UI design without a mockup?▼

Commit to a bold aesthetic direction before coding: define the purpose, pick a tone such as brutalist, editorial, or minimalist, note technical constraints, and identify one memorable differentiator. Then implement production-grade code with cohesive typography, color, and motion.

How to make frontend design look less generic?▼

Avoid default fonts like Inter, Roboto, and Arial, and skip cliched purple-gradient palettes. Pair a characterful display font with a refined body font, use CSS variables for a committed color scheme, and add asymmetry, overlap, or grid-breaking layouts.

Which frameworks does this UI design approach support?▼

The approach works with plain HTML/CSS/JS as well as React, Vue, and Angular. For React projects, it recommends the Motion library for animations, while preferring CSS-only motion where possible.

What fonts should I avoid in web UI design?▼

Avoid generic fonts such as Arial, Inter, Roboto, system fonts, and Space Grotesk, which signal cookie-cutter design. Instead choose distinctive display fonts paired with refined body fonts to give the interface a clear point of view.

When should I use minimalist versus maximalist design?▼

Match implementation complexity to the aesthetic vision: maximalist directions call for elaborate animations and layered effects, while minimalist directions demand restraint, precise spacing, and careful typography. Intentionality matters more than intensity.

Related Skills

Explore More Design & Creative Skills→
deadhearth01deadhearth01

frontend-design

Generate production-grade frontend interfaces with structured frontmatter-driven design processes.

Community
Advanced
Skyvern-AISkyvern-AI
22.7k

testing

Tests Skyvern deployments by validating API, frontend rendering, browser sessions, and workflows.

Official
Intermediate
eboodyeboody

ui-expert

Audit UI designs for visual hierarchy, spacing, typography, and design-system consistency.

Community
Advanced
tiantangcao1980-webtiantangcao1980-web
4

bootstrap

Create responsive interfaces with Bootstrap 5 components and Sass theming.

Community
Intermediate