skills.rest
scoots31
scoots31COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, with overused fonts, cliched purple gradients, and cookie-cutter layouts. This Skill guides the creation of frontend code with a committed aesthetic direction so every interface feels intentionally designed rather than templated. ## Core Features & Use Cases - Aesthetic Direction First: 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 Rules: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched color schemes, and predictable 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, warm editorial palette, staggered load animations, and asymmetric layout instead of a default-looking 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 make AI-generated websites look less generic?▼

Commit to a clear aesthetic direction before coding, pair a distinctive display font with a refined body font, and use dominant colors with sharp accents. Avoid default fonts like Inter and Roboto and cliched purple-gradient palettes.

How to add animations to a frontend page?▼

Prioritize CSS-only animations for plain HTML, and use the Motion library for React projects. Focus on high-impact moments like a staggered page-load reveal using animation-delay rather than scattered micro-interactions.

What frameworks does this frontend design approach support?▼

It works with plain HTML/CSS/JS as well as component frameworks like React and Vue. The design guidance on typography, color, and layout applies regardless of the underlying implementation stack.

Which fonts should I avoid in web UI design?▼

Avoid overused generic families such as Inter, Roboto, Arial, and default system fonts, which signal templated AI output. Choose characterful display fonts paired with refined body fonts matched to the project's tone.

When should I choose minimalism over maximalism in web design?▼

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

Related Skills

Explore More Design & Creative Skills→
gil-kapelgil-kapel
2

tech-lead-architecture-agent

Convert product specifications into architectural blueprints and decision records.

Community
Advanced
freamwork97freamwork97

stock-feature-dev

Orchestrate end-to-end Stock-Info feature development across backend, frontend, and QA teams.

Community
Advanced
tak-brotak-bro

design-review

Audit live-site design quality against visual systems and accessibility standards.

Community
Advanced
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate