skills.rest
openeuler-mirror
openeuler-mirrorOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-ui-ux

Apply design principles to frontend code for cohesive user interfaces.

3|2|Updated Apr 24, 2026
Search Tags:#design#ui#web development#frontend#css#animations#ux
One-click install
npx skills add https://github.com/openeuler-mirror/witty-diagnosis-agent --skill frontend-ui-ux-openeuler-mirror
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/openeuler-mirror/witty-diagnosis-agent/tree/main/src/opencode/features/builtin-skills/frontend-ui-ux
Command: npx skills add https://github.com/openeuler-mirror/witty-diagnosis-agent --skill frontend-ui-ux-openeuler-mirror

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the common issue of generic, uninspired interface design by applying professional design principles to code, ensuring that software interfaces are not just functional but emotionally engaging and visually memorable.

Core Features & Use Cases

  • Aesthetic Directioning: Defines a clear visual tone—from brutalist to luxury—to guide the development of cohesive interfaces.
  • Design-Centric Implementation: Focuses on typography, color harmony, and high-impact motion to elevate standard components.
  • Use Case: When building a new dashboard, use this skill to move beyond default system fonts and layouts, creating a custom, branded experience with staggered animations and refined spatial composition.

Quick Start

Use the frontend-ui-ux skill to design a minimalist and high-performance landing page layout for the new diagnosis dashboard.

Frequently Asked Questions about frontend-ui-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build frontend web interfaces that look professional instead of generic?▼

To build professional frontend web interfaces, apply advanced design principles like typography, color harmony, and high-impact motion to standard components, transforming functional requirements into visually memorable experiences.

What's the best way to add UI animations and refine spatial composition in web development?▼

The best way to add UI animations and refine spatial composition is through design-centric implementation, using staggered animations and refined spatial composition to elevate standard components into cohesive visual experiences.

Can I use UX design principles to establish a specific visual tone like brutalist or luxury for my app?▼

Yes, you can establish a specific visual tone like brutalist or luxury through aesthetic directioning, which defines a clear visual tone to guide the development of cohesive and emotionally engaging user interfaces.

How to design a minimalist and high-performance landing page layout for a web dashboard?▼

To design a minimalist and high-performance landing page layout for a web dashboard, focus on typography, color harmony, and spatial composition to create a custom, branded experience with refined visual details.

Does production-grade frontend code require sacrificing aesthetic details like motion and typography?▼

No, production-grade frontend code does not require sacrificing aesthetics; it satisfies technical requirements while explicitly prioritizing aesthetic details like typography, motion, and spatial composition for pixel-perfect interfaces.

Related Skills

Explore More Design & Creative Skills→
tillysosotillysoso

refactoring-ui

Apply grayscale-first design principles to review and improve frontend UI components.

Community
Basic
HCMUTE-RTICHCMUTE-RTIC

ui-visual-validator

Validate UI modifications for design system compliance and accessibility via screenshot analysis.

Official
Advanced
zeitlinbzeitlinb

hyperframes-animation

Compose web animations using atomic motion patterns and runtime adapters.

Community
Advanced
rod97-1rod97-1
1

minimalist-ui

Generate ultra-minimalist editorial web interfaces with warm monochrome palettes and bento-grid layouts.

Community
Advanced