skills.rest
DNepovim
DNepovimCOMMUNITY
Explore all skills by this author →
Website𝕏@DNepovimGitHub

frontend-design

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

Updated Dec 19, 2024
Search Tags:#typography#ui#frontend#react#css#web design#animation
One-click install
npx skills add https://github.com/DNepovim/yadm --skill frontend-design-dnepovim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/DNepovim/yadm/tree/main/.claude/plugins/cache/claude-plugins-official/frontend-design/61c0597779bd/skills/frontend-design
Command: npx skills add https://github.com/DNepovim/yadm --skill frontend-design-dnepovim

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces 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 committed aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction Planning: Commits to a bold design concept (brutalist, editorial, retro-futuristic, etc.) before writing any code. - Design System Guidance: Provides concrete rules for typography pairing, CSS variable color themes, motion and micro-interactions, spatial composition, and textured backgrounds. - Framework-Agnostic Implementation: Produces working HTML/CSS/JS, React, or Vue code 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, cohesive 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, for example: create a brutalist portfolio page for a photographer.

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 web page that doesn't look AI-generated?▼

Commit to a specific aesthetic direction before coding, then execute it with distinctive font pairings, a dominant color palette with sharp accents, and intentional layout choices like asymmetry or overlap. Avoid default fonts such as Inter or Arial and cliched purple-gradient schemes.

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 pages should prioritize CSS-only animation solutions.

How should I add animations to a frontend page?▼

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

Which fonts should I avoid in web design?▼

Avoid overused generic families like Inter, Roboto, Arial, and system fonts, as well as commonly converged choices like Space Grotesk. Instead pair a distinctive display font with a refined body font that fits the chosen aesthetic direction.

When should I use a minimalist versus maximalist design?▼

Match implementation 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 rather than defaulting to a middle ground.

Related Skills

Explore More Design & Creative Skills→
WeWake1WeWake1

frontend-design

Generate distinctive production-grade frontend interfaces with typography, color, motion, and interaction guidelines.

Community
Advanced
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
ctrlShiftBryanctrlShiftBryan

tailwind-design-system

Scaffold Tailwind CSS design systems with tokens, components, and responsive patterns.

Community
Advanced