skills.rest
martinholovsky
martinholovskyCOMMUNITY
Explore all skills by this author →
𝕏@martinholovskyGitHub

ui-ux-design-expert

Design spatial glass-morphism interfaces for AI assistants using CSS and Vue.

45|4|Updated Nov 25, 2025
Search Tags:#design#ui#glassmorphism#ux#interface#hud
One-click install
npx skills add https://github.com/martinholovsky/claude-skills-generator --skill ui-ux-design-expert-martinholovsky
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design-expert
Source: https://github.com/martinholovsky/claude-skills-generator/tree/main/skills/ui-ux-design
Command: npx skills add https://github.com/martinholovsky/claude-skills-generator --skill ui-ux-design-expert-martinholovsky

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps design user interfaces that are intuitive, accessible, and visually appealing, especially for AI assistants and futuristic applications.

Core Features & Use Cases

  • Interface Design: Create spatial layouts, glass-morphism effects, and HUDs.
  • User Experience: Optimize for attention management and cognitive load.
  • Use Case: Design a heads-up display (HUD) for a complex AI assistant, ensuring critical information is easily visible and actionable without overwhelming the user.

Quick Start

Design a glass-morphism card component using the provided CSS guidelines.

Frequently Asked Questions about ui-ux-design-expert

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

FAQPage Schema
How do I design a glassmorphism interface for an AI assistant?▼

Optimize UX for cognitive load by managing attention through spatial layouts and clear information hierarchy, ensuring critical AI assistant data is visible and actionable without overwhelming the user.

How do I build a HUD for a futuristic application using Vue and TypeScript?▼

Build a HUD using Vue for component implementation and TypeScript for interaction logic, applying CSS to structure spatial layouts, glassmorphism effects, and attention management for futuristic applications.

What is the best way to structure CSS design tokens for interface accessibility?▼

Structure CSS design tokens by defining consistent typography and spacing variables that enforce a clear information hierarchy, ensuring interface accessibility and performant rendering across UI components.

Can I use this UI design approach for complex heads-up displays without impacting rendering performance?▼

Yes, this approach addresses performant rendering by optimizing attention management and cognitive load, allowing you to build complex heads-up displays that remain visually stunning without degrading performance.

Related Skills

Explore More Design & Creative Skills→
jhouserjhouser

frontend-dev-guidelines

Provide frontend development guidelines for React/TypeScript applications using Suspense, TanStack Query, and Tailwind CSS.

Community
Intermediate
accountbelongstoxaccountbelongstox
1

wordflow-design-system

Apply WordFlow AI design tokens and adaptive layouts to the poly_apps/wordflow-ai application.

Community
Advanced
stefandevostefandevo
7

Frontend UI/UX Skill

Develop and refine React and Vue user interfaces with component-based architecture.

Community
Intermediate
MinhDuyDEVMinhDuyDEV

industrial-brutalist-ui

Create industrial brutalist user interfaces with rigid grids and tactical telemetry aesthetics.

Community
Advanced