skills.rest
abhay-rana
abhay-ranaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Create production-grade frontend interfaces with cohesive visual identity and UI tokens.

2|Updated Sep 28, 2025
Search Tags:#typography#design#accessibility#frontend#UI#aesthetics#motion
One-click install
npx skills add https://github.com/abhay-rana/create-modern-react --skill frontend-design-abhay-rana
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/abhay-rana/create-modern-react/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/abhay-rana/create-modern-react --skill frontend-design-abhay-rana

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides architects and developers to craft distinctive, production-grade frontend interfaces with a strong design direction, reducing generic AI aesthetics and visual inconsistency across projects.

Core Features & Use Cases

  • Establish a clear aesthetic direction and cohesive UI system for components, pages, or entire applications.
  • Provide practical implementation guidance focusing on typography, color, motion, spacing, and accessibility to ensure high-quality results.
  • Use Case: Design a marketing site or product dashboard that feels unique, polished, and cohesive, with reusable design tokens and components.

Quick Start

Provide a design brief for a frontend component or page, specify framework constraints (e.g., React/Tailwind), accessibility targets, and deliver a ready-to-implement UI component with CSS/JSX examples.

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 frontend interface with a cohesive visual identity?▼

Generate a cohesive frontend interface by establishing a clear aesthetic direction, delivering ready-to-use UI tokens, CSS snippets, and implementation notes for typography, color, motion, spacing, and accessibility.

Can I use this to design a React or Vue component dashboard?▼

Yes, you can design a React or Vue component dashboard. It applies to web components, pages, or full applications across framework stacks, delivering reusable design tokens and a cohesive visual identity.

What is the best way to avoid generic AI aesthetics in UI design?▼

Avoid generic AI aesthetics by enforcing a bold, distinctive design direction with cohesive visual identity, reducing visual inconsistency and generic automated outputs across frontend projects.

How do I generate reusable UI tokens and CSS snippets for a web page?▼

Generate reusable UI tokens and CSS snippets by providing a design brief with framework constraints and accessibility targets, yielding ready-to-implement JSX and CSS code examples.

Does this frontend design process include accessibility and motion guidance?▼

Yes, the frontend design process includes accessibility and motion guidance, providing practical implementation rules for typography, color, motion, spacing, and accessibility to ensure high-quality results.

Related Skills

Explore More Design & Creative Skills→
dotrurudotruru

frontend-design

Translate design briefs into frontend interfaces and components.

Community
Advanced
vieitesssvieitesss
7

frontend-design

Generate production-ready HTML/CSS/JS components with cohesive design direction.

Community
Advanced
wukangcheng2944wukangcheng2944

frontend-design

Design frontend interfaces with consistent aesthetics for React, Vue, or HTML/CSS.

Community
Advanced
act70255act70255

frontend-design

Design distinctive frontend interfaces with intentional design systems and functional code.

Community
Advanced