skills.rest
abhinaaaavvv
abhinaaaavvvCOMMUNITY
Explore all skills by this author →
Website𝕏@abhinaaaavvvGitHub

frontend-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, using overused fonts, cliched color schemes, and predictable layouts. This Skill guides the creation of distinctive, production-grade frontend code with a clear aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction: Commits to a bold, intentional design concept (brutalist, editorial, retro-futuristic, minimal, maximalist, etc.) before writing any code. - Design Guidelines: Applies concrete rules for typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Working Code Output: Produces functional HTML/CSS/JS, React, or Vue implementations matched in complexity to the design vision. - Use Case: Ask for a landing page for a coffee brand, and receive a polished page with a distinctive display font, warm palette, staggered load animations, and a memorable layout rather than a generic template. ## Quick Start Build a landing page for a specialty coffee brand with a bold editorial aesthetic using the frontend-design skill.

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, then execute it with distinctive font pairings, a cohesive color theme using CSS variables, and intentional layout choices like asymmetry or generous negative space. Avoid default fonts like Inter and cliched purple gradients.

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

Generic output comes from overused font families (Inter, Roboto, Arial), cliched color schemes like purple gradients on white, predictable component patterns, and layouts lacking context-specific character. Intentional, differentiated choices fix this.

Which frameworks does this frontend design approach support?▼

It supports plain HTML/CSS/JS as well as React and Vue. For React projects, the Motion library is recommended for animations, while CSS-only solutions are preferred for plain HTML.

How should animations be used in web UI design?▼

Prioritize high-impact moments like one well-orchestrated page load with staggered reveals using animation-delay, plus scroll-triggered effects and surprising hover states. Prefer CSS-only solutions for HTML and Motion for React.

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, precision, and careful attention to spacing, typography, and subtle details.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
thkim2015thkim2015

moai-platform-deployment

Deploy and host applications on Vercel, Railway, and Convex platforms.

Community
Advanced
MediaAskeyDOJOMediaAskeyDOJO

ui-visual-validator

Detects unintended UI visual differences and validates WCAG accessibility standards.

Community
Advanced
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate