skills.rest
alecanche04-cyber
alecanche04-cyberCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

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

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 clear aesthetic direction instead of cookie-cutter results. ## Core Features & Use Cases - Aesthetic Direction: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design Guidelines: Applies concrete rules for typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and textured backgrounds. - Use Case: Ask for a landing page for a coffee brand, and receive a complete HTML/CSS/JS or React page with a distinctive display font, dramatic shadows, staggered load animations, and a layout that breaks the grid intentionally. ## Quick Start Ask the assistant to build a landing page, dashboard, or React component for your product with a distinctive visual style.

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 staggered load animations and textured backgrounds instead of default solid colors.

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 visual 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 plain 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 heavy JavaScript.

When should I use 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. Match implementation complexity to the aesthetic vision.

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
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