skills.rest
singhaganesh
singhaganeshCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

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

Updated Jul 7, 2026
Search Tags:#typography#landing page#frontend#react#css#web design#ui design
One-click install
npx skills add https://github.com/singhaganesh/Urban-assist --skill frontend-design-singhaganesh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/singhaganesh/Urban-assist/tree/main/.cursor/skills/frontend-design
Command: npx skills add https://github.com/singhaganesh/Urban-assist --skill frontend-design-singhaganesh

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 clear aesthetic point of view instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design Guidelines: Applies concrete rules for typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, asymmetric spatial composition, and atmospheric backgrounds. - Anti-Generic Constraints: 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 display font, staggered load animations, textured backgrounds, and a memorable layout rather than a generic template. ## Quick Start Ask the assistant to build a landing page, dashboard, or React component for your product and specify the mood or audience you want the design to target.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a landing page that doesn't look AI-generated?▼

Commit to a specific aesthetic direction before coding, pair a distinctive display font with a refined body font, and use dominant colors with sharp accents instead of timid palettes. Avoid generic fonts like Inter and Roboto and cliched purple-gradient schemes.

What makes frontend design look generic or like AI slop?▼

Generic output comes from overused font families such as Inter, Roboto, and Arial, cliched color schemes like purple gradients on white, predictable layouts, and cookie-cutter component patterns. Intentional, context-specific choices in typography, color, and composition prevent this.

Which frameworks does this frontend design approach support?▼

It supports plain HTML/CSS/JS as well as React and Vue. For React projects it recommends the Motion library for animations, while pure HTML implementations should prioritize CSS-only animation solutions.

How should animations be used in web interface design?▼

Prioritize one well-orchestrated page load with staggered reveals using animation-delay over scattered micro-interactions. Add scroll-triggered effects and surprising hover states, matching animation complexity to the overall aesthetic vision.

When should I choose minimalism versus maximalism in web 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 details. The key is committing fully to one direction.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
encoredevencoredev
26

encore-frontend

Generate a typed TypeScript client for React/Next.js frontends from Encore.ts APIs.

Official
Intermediate
coreyonecoreyone
1

a11y-debugging

Audit web pages for WCAG AA accessibility violations using Lighthouse and browser accessibility trees.

Community
Intermediate
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate