skills.rest
rstagi
rstagiCOMMUNITY
Explore all skills by this author →
Website𝕏@rstagi_GitHub

frontend-design

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

1|Updated Nov 25, 2021
Search Tags:#typography#ui#frontend#react#css#web design#animation
One-click install
npx skills add https://github.com/rstagi/dotfile --skill frontend-design-rstagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/rstagi/dotfile/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/rstagi/dotfile --skill frontend-design-rstagi

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 components, pages, and applications that have a deliberate, memorable aesthetic direction instead of default AI styling. ## Core Features & Use Cases - Aesthetic Direction Planning: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, minimal, maximalist) 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. - Framework-Agnostic Implementation: Produces working code in HTML/CSS/JS, React, or Vue matched to the complexity of the design vision. - Use Case: Ask for a landing page for a coffee brand, and receive a complete page with a distinctive display font, warm editorial palette, staggered load animations, and an asymmetric layout rather than a generic template. ## Quick Start Ask the assistant to build a landing page, dashboard, or component and specify the mood or audience you want the design to target.

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 designs 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 your requirements. For React projects it recommends the Motion library for animations, while plain HTML favors CSS-only animation solutions.

Which fonts should I avoid in web design?▼

Avoid overused generic fonts like Arial, Inter, and Roboto, and do not converge on commonly repeated choices like Space Grotesk. Instead select unexpected, characterful fonts and pair a distinctive display font with a refined body font.

How should animations be used in frontend interfaces?▼

Prioritize one well-orchestrated page load with staggered reveals using animation-delay over scattered micro-interactions. Add scroll-triggered effects and surprising hover states, preferring CSS-only solutions for plain HTML.

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, precise spacing, refined typography, and subtle details.

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
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate