skills.rest
QT-7274
QT-7274COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

Updated Apr 6, 2026
Search Tags:#typography#ui#React#landing page#frontend#css#web design
One-click install
npx skills add https://github.com/QT-7274/dotfiles --skill frontend-design-qt-7274
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/QT-7274/dotfiles/tree/main/frontend-design-2
Command: npx skills add https://github.com/QT-7274/dotfiles --skill frontend-design-qt-7274

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 Planning: Commits to a bold conceptual tone (brutalist, editorial, retro-futuristic, luxury, etc.) before writing any code. - Design System Guidance: Provides concrete rules for typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Use Case: Ask for a landing page for a coffee brand, and receive a complete HTML/CSS/JS page with a distinctive display font, warm editorial palette, staggered load animations, and grain texture overlays rather than a generic template. ## Quick Start Build a landing page for a boutique 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 create 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. Avoid generic fonts like Inter and Arial, purple gradients, and predictable component patterns.

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

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

Which frameworks does this frontend design skill support?▼

It supports HTML/CSS/JS, React, Vue, and similar frameworks. 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?▼

Focus on high-impact moments rather than scattered micro-interactions. One well-orchestrated page load with staggered reveals using animation-delay creates more delight, supplemented by scroll-triggering and surprising hover states.

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→
WeWake1WeWake1

frontend-design

Generate distinctive production-grade frontend interfaces with typography, color, motion, and interaction guidelines.

Community
Advanced
thkim2015thkim2015

moai-platform-deployment

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

Community
Advanced
redpanda-dataredpanda-data
34

visual-review

Automate visual and accessibility reviews of frontend UI changes with Playwright.

Official
Advanced
ayesha-aziz123ayesha-aziz123
2

shadcn

Provide shadcn/ui components with theming and accessibility for React apps.

Community
Intermediate