skills.rest
Yvesdefaria
YvesdefariaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

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

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 output. ## 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, asymmetric spatial composition, and atmospheric backgrounds. - Use Case: Ask for a landing page for a coffee brand and receive a complete HTML/CSS or React implementation with a distinctive display font, staggered load animations, and a cohesive visual identity rather than a generic template. ## 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 create a landing page with distinctive design using AI?▼

Describe the purpose, audience, and constraints of your page, then request a specific aesthetic direction such as brutalist, editorial, or retro-futuristic. The skill commits to that direction and produces working HTML/CSS or React code with intentional typography, color, and motion choices.

What makes AI-generated web design look generic?▼

Generic output typically uses overused fonts like Inter or Roboto, purple-gradient color schemes, and predictable component layouts. Avoiding this requires deliberate font pairing, dominant accent colors, asymmetric composition, and context-specific visual details.

Does this skill work with React components or only plain HTML?▼

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

How should animations be used in frontend design?▼

Prioritize one well-orchestrated page load with staggered reveals using animation-delay over scattered micro-interactions. Add scroll-triggered effects and surprising hover states, matching animation complexity to the overall aesthetic vision.

When should I choose minimalism over maximalism in web design?▼

Both work when executed with intentionality. Minimalist designs need restraint, precise spacing, and refined typography, while maximalist designs need elaborate code with extensive animations and effects. Choose based on the product's purpose and audience.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
UnicornUnicorn

e2e-test-agent

Generate end-to-end test suites for web and full-stack applications.

Official
Advanced
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
theofernandezztheofernandezz

UI Engineering - Distinctive Design

Define design contracts and token-based systems for distinctive UI components.

Community
Advanced