skills.rest
yashs33244
yashs33244COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create production-grade frontend interfaces with cohesive typography, color, and motion.

1|Updated May 5, 2026
Search Tags:#typography#frontend#react#css#ui design#web components#motion design
One-click install
npx skills add https://github.com/yashs33244/my-mac-claude --skill frontend-design-yashs33244
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yashs33244/my-mac-claude/tree/main/skills/anthropic/frontend-design
Command: npx skills add https://github.com/yashs33244/my-mac-claude --skill frontend-design-yashs33244

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you create distinctive, production-grade frontend interfaces without falling into generic “AI slop” aesthetics, ensuring the result is visually cohesive, functional, and thoughtfully designed.

Core Features & Use Cases

  • Bold design direction & execution: Converts requirements into a clear aesthetic concept (e.g., luxury, brutalist, editorial, retro-futuristic) and implements it with intentionality.
  • Production-ready frontend code: Generates working HTML/CSS/JS or framework components (React/Vue/etc.) with refined typography, color systems, motion, and layout composition.
  • Anti-generic aesthetic guardrails: Avoids common pitfalls like predictable layouts, overused font choices, and cliche gradient styles to keep designs memorable.

Use cases: landing pages, dashboards, posters, web components, React/Vue UI, HTML/CSS layouts, and other web artifacts where styling quality matters as much as functionality.

Quick Start

Ask the skill to build a polished React landing page for a fictional “Aurora Analytics” product with a luxury editorial aesthetic, including a hero section, pricing cards, feature grid, and responsive styles, using distinctive typography and subtle motion.

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 React landing page that avoids generic AI design patterns?▼

To create a React landing page that avoids generic AI design patterns, establish an intentional aesthetic direction like luxury or brutalist, then apply cohesive typography, color systems, and motion design to ensure the UI feels distinctly crafted.

What makes frontend UI design look generic and how can I fix it?▼

Frontend UI design looks generic when it relies on predictable layouts, overused fonts, and cliché gradients. Fix this by enforcing an intentional aesthetic direction with cohesive typography, refined color systems, and distinct motion design.

Can I generate production-ready HTML and CSS with a specific aesthetic like brutalist or editorial?▼

Yes, you can generate production-ready HTML and CSS with a specific aesthetic like brutalist or editorial. The process converts requirements into a clear aesthetic concept and implements it with intentional typography, color, and layout composition.

Does this approach work for building web components and dashboards, or just full pages?▼

This approach works for building web components, dashboards, and full pages. It generates visually refined and functionally working frontend interfaces across HTML, CSS, JS, and common frameworks for any web artifact where styling quality matters.

How do I add motion design to web components without making them feel cliché?▼

Add motion design to web components by applying subtle, intentional animations that align with a cohesive aesthetic direction. Avoiding overused animation patterns ensures the motion enhances the UI rather than making it feel cliché.

What's the best way to establish a cohesive typography and color system for a new web UI?▼

The best way to establish a cohesive typography and color system for a new web UI is to select an intentional aesthetic direction first, then apply distinctive font choices and refined color palettes that avoid generic, overused design patterns.

Related Skills

Explore More Design & Creative Skills→
h4v1dh4v1d

frontend-design

Generate component-based UI with design systems for React, Vue, or vanilla HTML/CSS/JS.

Community
Intermediate
Nero-kkNero-kk

frontend-design

Create production-ready HTML/CSS/JS or framework components with refined typography and CSS variables.

Community
Advanced
shalevaminshalevamin

fullstack-guardian

Implement secure full-stack web applications with layered authentication and input validation.

Community
Advanced
shades-of-webshades-of-web

frontend-design

Create React components and HTML/CSS layouts with a bold aesthetic.

Official
Advanced