skills.rest
min-hinthar
min-hintharCOMMUNITY
Explore all skills by this author →
Website𝕏@minkkhantGitHub

frontend-design

Design and implement distinctive frontend interfaces with HTML, CSS, and JavaScript.

Updated Jan 13, 2026
Search Tags:#design#frontend#react#css#component#ui-design#aesthetics
One-click install
npx skills add https://github.com/min-hinthar/mandalay-morning-star-delivery-app --skill frontend-design-min-hinthar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/min-hinthar/mandalay-morning-star-delivery-app/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/min-hinthar/mandalay-morning-star-delivery-app --skill frontend-design-min-hinthar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

Core Features & Use Cases

  • Design thinking-driven frontend direction to produce components, pages, dashboards, or entire UI systems with a cohesive aesthetic.
  • Production-grade implementation guidance across HTML/CSS/JS or React/Vue, emphasizing typography, color, motion, accessibility, and maintainability.
  • Real-world workflow support: translating requirements into polished, ready-to-ship interfaces that stand out.

Quick Start

Use the frontend-design skill to design and implement a distinctive frontend interface that matches a bold aesthetic direction.

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 React UI that avoids generic AI-generated aesthetics?▼

To build a React UI avoiding generic AI aesthetics, apply design thinking to establish a cohesive aesthetic direction. This involves making deliberate choices for typography, color, and motion to produce distinctive, production-grade frontend interfaces.

What is the best way to create a maintainable component-based frontend architecture?▼

A maintainable component-based frontend architecture requires translating design requirements into scalable code. Focus on production-grade implementation across HTML/CSS/JS or React/Vue, ensuring accessibility and cohesive aesthetics throughout the UI system.

Can I use this approach to design an entire dashboard interface?▼

Yes, you can use this approach to design entire dashboard interfaces. It supports translating requirements into polished, ready-to-ship web pages or dashboards with a clear aesthetic direction and production-grade code.

Does this frontend design guidance support Vue components?▼

Yes, this frontend design guidance supports Vue components. It delivers implementation direction across HTML/CSS/JS or React/Vue, emphasizing maintainability, accessibility, and component-based architectures for scalable frontend code.

Why does my frontend interface lack a distinctive aesthetic direction?▼

Your frontend interface lacks a distinctive aesthetic direction if it relies on generic design patterns. Crafting a bold interface requires applying deliberate choices in typography, color, and motion to avoid generic aesthetics and ensure production-grade quality.

Related Skills

Explore More Design & Creative Skills→
ViewWayViewWay

frontend-design

Defines visual identity and generates frontend code with specified typography, color, and motion constraints.

Community
Advanced
Bizarre-IndustriesBizarre-Industries

frontend-design

Translate bold design direction into production-ready UI code.

Official
Advanced
shishiv30shishiv30

import-comp-cms

Synchronize component data between local JavaScript files and a CMS database.

Community
Intermediate
vuralserhat86vuralserhat86
43

web_artifacts_builder

Generate React web interfaces with Tailwind CSS and shadcn/ui components.

Community
Intermediate