skills.rest
syarifryan
syarifryanCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, using overused fonts, cliched purple gradients, 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 Framework: Commits to a bold design tone (brutalist, editorial, retro-futuristic, maximalist, refined minimal) before writing any code. - Design Quality Guidelines: Enforces distinctive typography pairing, cohesive CSS-variable color themes, orchestrated animations, asymmetric layouts, and atmospheric backgrounds like grain overlays and gradient meshes. - Anti-Generic Rules: Explicitly bans overused fonts (Inter, Roboto, Arial), cliched color schemes, and predictable component patterns. - Use Case: Ask for a landing page for a coffee brand, and receive a complete HTML/CSS or React implementation with a unique editorial layout, custom cursor effects, and staggered scroll-reveal animations rather than a template-looking page. ## Quick Start Build a landing page for a jazz festival with a bold editorial aesthetic, distinctive typography, and scroll-triggered animations.

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. Use distinctive font pairings instead of Inter or Roboto, dominant colors with sharp accents, and asymmetric layouts with atmospheric details like grain textures or gradient meshes.

What makes frontend design look generic or like AI slop?▼

Generic output comes from overused fonts like Inter and Arial, cliched purple-gradient color schemes, predictable card layouts, and cookie-cutter components. Avoiding these requires intentional typography choices, cohesive themes via CSS variables, and unexpected spatial composition.

How to add animations to React components?▼

Use the Motion library for React to create physics-based animations and micro-interactions. For plain HTML, prefer CSS-only solutions with animation-delay for staggered reveals, scroll-triggering, and hover states that create high-impact moments.

Does this approach work with frameworks like React and Vue?▼

Yes, the design guidelines apply to any implementation stack including HTML/CSS/JS, React, and Vue. The aesthetic direction, typography, color, and motion principles are framework-agnostic and adapt to the technical constraints provided.

When should I choose minimalism over 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
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
serkan-ozalserkan-ozal
7

visual-testing

Detect visual discrepancies between live pages and Figma design references.

Community
Intermediate
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate