skills.rest
fairchild
fairchildCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

1|Updated Nov 11, 2012
Search Tags:#typography#landing page#frontend#react#css#web design#ui design
One-click install
npx skills add https://github.com/fairchild/dotfiles --skill frontend-design-fairchild
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/fairchild/dotfiles/tree/main/agents/shared/first-party-skills/frontend-design
Command: npx skills add https://github.com/fairchild/dotfiles --skill frontend-design-fairchild

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, relying on overused fonts, cliched color schemes, and predictable layouts. This Skill guides the creation of frontend code with a deliberate, distinctive aesthetic direction so the output feels intentionally designed rather than templated. ## Core Features & Use Cases - Aesthetic Direction Setting: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design System Guidance: Covers typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Guardrails: Explicitly avoids overused fonts (Inter, Roboto, Arial), purple-gradient cliches, and cookie-cutter component patterns. - Use Case: Ask for a landing page for a coffee brand, and receive a complete HTML/CSS page with a distinctive display font, staggered load animations, textured backgrounds, and an asymmetric layout tailored to the brand's tone. ## Quick Start Ask the agent to build a landing page, dashboard, or React component for your product and specify the mood or audience you want the design to convey.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I make AI-generated websites look less generic?▼

Commit to a clear aesthetic direction before coding: pick distinctive font pairings, a dominant color palette with sharp accents, and intentional layout choices like asymmetry or overlap. Avoid default fonts such as Inter or Roboto and cliched purple-gradient schemes.

How to build a landing page with React or HTML and CSS?▼

Define the purpose, audience, and tone first, then implement working code in HTML/CSS/JS or React. Use CSS variables for theming, CSS-only animations for static pages, and the Motion library for React when available.

What fonts should I use for web design instead of Inter?▼

Pair a distinctive display font with a refined body font chosen for the project's character. The key is selecting unexpected, characterful typefaces that fit the aesthetic direction rather than defaulting to Inter, Roboto, Arial, or system fonts.

Does this approach work for both minimalist and maximalist designs?▼

Yes, both directions work when executed with intentionality. Maximalist designs need elaborate animations and effects, while minimalist designs need restraint, precise spacing, and refined typography. The key is matching implementation complexity to the vision.

When should I use CSS animations versus a JavaScript animation library?▼

Prioritize CSS-only solutions for plain HTML pages, using animation-delay for staggered reveals and hover or scroll triggers. Use the Motion library for React projects when it is available and the interaction complexity justifies it.

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
Asymmetric-alAsymmetric-al
417

use-dom

Execute web-only React components in Expo webview contexts.

Official
Intermediate
jason23452jason23452

frontend-design-review

Review frontend UI for design system compliance, accessibility, and visual quality.

Community
Advanced
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced