skills.rest
pgoell
pgoellCOMMUNITY
Explore all skills by this author →
Website𝕏@pagoellGitHub

frontend-design

Generate distinctive, production-grade frontend interfaces with bold aesthetic direction.

Updated Mar 18, 2026
Search Tags:#typography#ui#frontend#react#css#web design#animation
One-click install
npx skills add https://github.com/pgoell/pgoell-claude-tools --skill frontend-design-pgoell
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/pgoell/pgoell-claude-tools/tree/main/plugins/frontend-design/skills/frontend-design
Command: npx skills add https://github.com/pgoell/pgoell-claude-tools --skill frontend-design-pgoell

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend code often looks generic, with overused fonts, cliched purple gradients, and cookie-cutter layouts. This Skill guides the creation of web interfaces with a committed, distinctive aesthetic direction instead of default AI styling. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a bold design concept (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design System Guidance: Covers typography pairing, color themes via CSS variables, motion and micro-interactions, spatial composition, and textured backgrounds. - Framework Flexibility: Produces working HTML/CSS/JS, React, or Vue code matched to the project's technical constraints. - Use Case: Ask for a landing page for a coffee brand, and receive a polished page with a distinctive display font, cohesive palette, staggered load animations, and scroll-triggered reveals rather than a generic template look. ## 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 make AI-generated frontend code look less generic?▼

Commit to a specific aesthetic direction before coding, such as brutalist, editorial, or retro-futuristic. Pair a distinctive display font with a refined body font, use dominant colors with sharp accents, and avoid defaults like Inter, Roboto, and purple gradients on white.

What frameworks does this frontend design skill support?▼

It produces working code in plain HTML/CSS/JS, React, or Vue depending on project constraints. 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 over scattered micro-interactions. One well-orchestrated page load with staggered reveals using animation-delay creates more delight, supplemented by scroll-triggered effects and surprising hover states.

Which fonts should I avoid in web interface design?▼

Avoid overused generic fonts like Inter, Roboto, Arial, and system defaults, as well as commonly converged choices like Space Grotesk. Choose unexpected, characterful fonts and pair a distinctive display font with a refined body font.

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, refined typography, and subtle detail work.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
PAISHU-AIPAISHU-AI

webapp-testing-pro

Test web applications with Playwright-style checks, accessibility tests, and responsive screenshots.

Community
Advanced
ExpanlyExpanly

design-systems

Automate React design system creation with Tailwind tokens in tailwind.config.js.

Official
Intermediate
MolcajeteAIMolcajeteAI
2

shadcn-ui-setup

Install and configure shadcn/ui components with Tailwind CSS and React Server Components.

Official
Intermediate