skills.rest
ebecerra-developer
ebecerra-developerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate distinctive production-grade frontend interfaces with cohesive aesthetic direction.

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

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 frontend code with a deliberate, distinctive aesthetic direction so every interface feels intentionally designed rather than templated. ## Core Features & Use Cases - Aesthetic Direction Framework: Commits to a bold design concept (brutalist, editorial, retro-futuristic, maximalist, etc.) before writing any code. - Design Quality Guidelines: Covers typography pairing, color systems with CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Rules: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched purple-gradient palettes, and cookie-cutter component patterns. - Use Case: Ask for a landing page for a coffee brand, and receive a complete HTML/CSS or React implementation with a distinctive editorial layout, characterful font pairing, and scroll-triggered reveal animations. ## 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 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 atmospheric details like grain overlays or gradient meshes.

What fonts should I avoid in frontend design?▼

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

Can this skill generate React components or only HTML/CSS?▼

It supports HTML/CSS/JS, React, Vue, and other frameworks. For React projects, it recommends the Motion library for animations, while pure HTML implementations should prioritize CSS-only animation solutions.

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

Prioritize CSS-only animations for HTML pages and focus on high-impact moments like one orchestrated page load with staggered reveals using animation-delay. Scroll-triggered effects and hover states add surprise without constant repaints.

When should I use minimalist versus maximalist design?▼

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

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
sao-codingsao-coding

expo-deployment

Deploy Expo apps to iOS, Android, web, and API routes using EAS.

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