skills.rest
Kurarion
KurarionCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Kurarion/Genshin-Calc --skill frontend-design-kurarion
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ahmed3elshaerahmed3elshaer
61

mobile-memory

Persist mobile project context across sessions with /memory- commands.

Community
Intermediate
coco-researchcoco-research
264

frontend-design

Design distinctive frontend interfaces with HTML, CSS, JavaScript, React, or Vue.

Community
Advanced
dylantarredylantarre
38

compound-components

Build accessible React UI primitives with compound component patterns.

Community
Advanced
Codcyber101Codcyber101

frontend-design

Design distinctive frontend interfaces with scalable typography and accessible color systems.

Community
Intermediate