skills.rest
AdityaBorkar
AdityaBorkarCOMMUNITY
Explore all skills by this author →
Website𝕏@adityab_techGitHub

frontend-design

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

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

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 point of view instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction: Commits to a bold, intentional design 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 atmospheric backgrounds. - Working Code Output: Produces functional HTML/CSS/JS, React, or Vue implementations matched in complexity to the chosen aesthetic vision. - Use Case: Ask for a landing page for a coffee brand, and receive a polished page with a distinctive display font, warm editorial 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 React component and request a distinctive, non-generic visual design.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make AI-generated websites look less generic?▼

Commit to a bold aesthetic direction before coding, then execute it with distinctive font pairings, a cohesive color theme using CSS variables, and intentional layouts. Avoid default fonts like Inter or Arial and cliched purple-gradient palettes.

How to build a landing page with React and custom design?▼

Define the purpose, audience, and tone first, then implement working React code with a clear visual point of view. Use the Motion library for animations and prioritize one well-orchestrated page load with staggered reveals over scattered micro-interactions.

What fonts should I avoid in web design?▼

Avoid overused generic fonts such as Inter, Roboto, Arial, and default system fonts, which signal template-like design. Instead pair a distinctive display font with a refined body font chosen for the specific context.

Does this approach work with plain HTML and CSS?▼

Yes, the guidelines apply to plain HTML/CSS/JS as well as React and Vue. For static HTML, prioritize CSS-only animations and effects, reserving JavaScript or Motion-based animation for React projects.

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 aesthetic vision.

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
seo-jinseokseo-jinseok

moai-platform-deployment

Deploy applications on Vercel, Railway, and Convex with CI/CD.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
theofernandezztheofernandezz

ui-engineering

Define reusable UI patterns with design tokens, glassmorphism, and Tailwind v4.

Community
Advanced