skills.rest
pchemguy
pchemguyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

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

Updated Feb 4, 2026
Search Tags:#typography#landing page#frontend#react#css#web design#ui design
One-click install
npx skills add https://github.com/pchemguy/AISandbox --skill frontend-design-pchemguy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/pchemguy/AISandbox/tree/main/docs/AgentSkills/anthropics/skills/skills/frontend-design
Command: npx skills add https://github.com/pchemguy/AISandbox --skill frontend-design-pchemguy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces built by AI 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 conceptual direction (minimalist, brutalist, retro-futuristic, editorial, 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 an asymmetric 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 clear aesthetic direction before coding, then execute it with distinctive font pairings, a cohesive color theme using CSS variables, and intentional layouts. Avoid generic fonts like Inter or Arial and cliched purple-gradient palettes.

What frameworks does this frontend design skill support?▼

It produces working code in HTML/CSS/JS, React, or Vue depending on your requirements. For React projects it recommends the Motion library for animations, while plain HTML favors CSS-only animation solutions.

How should I handle animations in frontend design?▼

Prioritize high-impact moments like one well-orchestrated page load with staggered reveals using animation-delay. Add scroll-triggered effects and surprising hover states rather than scattering many small micro-interactions.

Which fonts should I avoid in web UI design?▼

Avoid overused generic families like Inter, Roboto, Arial, and system fonts, as well as commonly converged choices like Space Grotesk. Pair a distinctive display font with a refined body font for character.

When should I use minimalism versus maximalism in interface design?▼

Both work when executed with intentionality. Maximalist designs need elaborate code with extensive animations and effects, while minimalist designs need restraint, precise spacing, and refined typography. Match implementation complexity to the aesthetic vision.

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
redpanda-dataredpanda-data
34

visual-review

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

Official
Advanced
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate