frontend-design

Design and implement distinctive frontend interfaces in HTML/CSS/JS, React, or Vue.

72|8|Updated Apr 30, 2022

Search Tags:#typography #design #ui #frontend #react #vue #aesthetics

Ready to run

npx skills add https://github.com/Kurarion/Genshin-Calc --skill frontend-design-kurarion

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Kurarion/Genshin-Calc/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/Kurarion/Genshin-Calc --skill frontend-design-kurarion

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams avoid bland, generic AI aesthetics by guiding the creation of distinctive, production-grade frontend interfaces with intentional aesthetics. It ensures designers and developers can align on a bold aesthetic direction and translate it into working code.

Core Features & Use Cases

Design Thinking framework to establish purpose, tone, constraints, and differentiation for any frontend project.
Frontend Aesthetics Guidelines covering typography, color systems, motion, spatial composition, and visual depth.
End-to-end implementation guidance for HTML/CSS/JS, React, or Vue, including accessibility considerations and production-grade patterns.
Real-world Use Case: when starting a new admin dashboard, apply this skill to define the visual direction and deliver a cohesive, polished UI kit.

Quick Start

Create a production-grade frontend component in React that demonstrates the chosen 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 design a distinctive frontend that avoids generic AI aesthetics?▼

To design a distinctive frontend, apply a design thinking framework to establish purpose, tone, and constraints. This guides the creation of production-grade interfaces with an intentional aesthetic direction, ensuring your UI avoids bland, generic visuals.

Can I implement production-grade UI components in both React and Vue?▼

Yes, you can implement production-grade UI components in React and Vue. The skill provides end-to-end implementation guidance for both frameworks, alongside HTML/CSS/JS, ensuring consistent visuals and high-quality UI across your chosen stack.

What's the best way to establish a cohesive visual direction for an admin dashboard?▼

The best way to establish a cohesive visual direction for an admin dashboard is applying frontend aesthetics guidelines. This covers typography, color systems, motion, and spatial composition to deliver a polished, production-grade UI kit.

Does this frontend design approach include accessibility considerations?▼

Yes, this frontend design approach includes accessibility considerations. It integrates end-to-end implementation guidance for HTML/CSS/JS, React, or Vue, ensuring your distinctive interfaces maintain production-grade accessibility standards.

How do I translate a design thinking framework into executable frontend code?▼

To translate design thinking into executable frontend code, use end-to-end implementation guidance that maps visual depth and motion directly into HTML/CSS/JS, React, or Vue. This ensures the final UI matches the established aesthetic direction.

Do I need specific UI libraries to define typography and color systems?▼

No, you do not need specific UI libraries to define typography and color systems. The skill is framework-agnostic where possible, providing frontend aesthetics guidelines that establish visual depth and spatial composition independently.