skills.rest
SESELOVSKYDarian
SESELOVSKYDarianCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, using overused fonts, cliched purple gradients, and predictable layouts. This Skill guides the creation of frontend code with a deliberate, distinctive aesthetic direction instead of cookie-cutter output. ## 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, CSS variable-based color themes, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Production-Grade Output: Generates working HTML/CSS/JS, React, or Vue code for landing pages, dashboards, components, posters, and full applications. - Use Case: Ask for a landing page for a coffee brand, and receive a complete page with a distinctive display font, cohesive palette, staggered load animations, and a memorable layout rather than a generic template. ## Quick Start Ask the AI to build a landing page, dashboard, or React component for your product 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 build a landing page that doesn't look AI-generated?▼

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 add one well-orchestrated page-load animation instead of scattered effects.

What fonts should I avoid in frontend design?▼

Avoid overused generic fonts like Inter, Roboto, Arial, and default system fonts, which signal generic AI output. Choose characterful, unexpected typefaces and pair a distinctive display font with a refined body font for hierarchy.

Does this skill work with React and Vue components?▼

Yes, the skill supports HTML/CSS/JS, React, and Vue implementations. For React, it recommends the Motion library for animations, while plain HTML projects should prioritize CSS-only animation solutions.

How do I add animations to a web page without hurting performance?▼

Prioritize CSS-only animations for standard HTML pages and focus on high-impact moments like a staggered page-load reveal using animation-delay. Scroll-triggered effects and hover states add surprise without heavy JavaScript overhead.

When should I use minimalism versus maximalism in UI 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 chosen aesthetic vision.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
evolving-machines-labevolving-machines-lab
76

shadcn-webapp-design

Standardizes creation of web interfaces using shadcn/ui, Tailwind CSS and Framer Motion for Next.js apps and dashboards.

Official
Advanced