skills.rest
pplmx
pplmxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Design distinctive desktop interfaces for Ethereal's transparent overlay window in React and Tauri.

2|1|Updated Jan 17, 2026
Search Tags:#frontend#react#glassmorphism#ui-design#tauri#desktop-app#sprite-animation
One-click install
npx skills add https://github.com/pplmx/ethereal --skill frontend-design-pplmx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/pplmx/ethereal/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/pplmx/ethereal --skill frontend-design-pplmx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps create distinctive, production-ready frontend interfaces for Ethereal's desktop companion experience, avoiding generic visuals while keeping the UI practical inside a small transparent overlay window.

Core Features & Use Cases

  • Distinctive Visual Direction: Shapes a clear aesthetic concept such as retro-futuristic, luxury, brutalist, or organic, then executes it with precision.
  • Desktop-First Constraints: Designs for transparent windows, tight 300x300 style footprints, overlay legibility, and lightweight interaction patterns.
  • Sprite and Motion Design: Supports polished state changes, looping sprite animations, and high-impact micro-interactions that fit Ethereal's spirit-like behavior.
  • Use Case: Build a memorable companion panel, onboarding flow, settings surface, or mood-driven status card that feels native to the desktop and visually unforgettable.

Quick Start

Create a compact Ethereal desktop companion interface with a bold aesthetic, transparent-window legibility, and production-ready React implementation.

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 transparent overlay window UI for a Tauri desktop app?▼

Designing a transparent overlay window UI for a Tauri desktop app requires creating compact 300x300 footprint panels with overlay legibility and lightweight interaction patterns. This Skill shapes distinctive visual directions like glassmorphism while ensuring production-ready React implementation for Windows desktop use.

Can I build sprite animations and stateful overlays in React for desktop applications?▼

Yes, building sprite animations and stateful overlays in React for desktop applications is supported. This Skill enables polished state changes, looping sprite animations, and high-impact micro-interactions that fit Ethereal's spirit-like behavior within a small transparent companion window.

What's the best way to create a compact companion panel with glassmorphism in a desktop application?▼

Creating a compact companion panel with glassmorphism in a desktop application involves applying a clear aesthetic concept with precise execution. This Skill handles tight footprint composition, transparent-window readability, and motion choreography for production-grade UI implementation.

Does this frontend design approach work for onboarding flows and settings surfaces in Windows desktop applications?▼

Yes, this frontend design approach works for onboarding flows and settings surfaces in Windows desktop applications. It applies production-grade UI implementation to compact companion panels, onboarding flows, settings surfaces, and mood-driven status cards using React and Tauri.

Why does my transparent window UI lack legibility in a small desktop overlay?▼

Transparent window UI lacks legibility in small desktop overlays when layout systems fail to account for background variability. This Skill solves transparent-window readability through polished layout systems and small-footprint composition tailored for Ethereal's overlay window.

Related Skills

Explore More Design & Creative Skills→
rdjakovicrdjakovic

customizing-tauri-windows

Guide Tauri window customization with custom titlebars, transparency, and menus.

Community
Intermediate
bughqbughq
2

stacks-desktop

Configure desktop windows and system trays via Tauri integration in Stacks.

Official
Intermediate
calesthiocalesthio
46.2k

framer-motion

Implement Disney's 12 animation principles on React components with Framer Motion.

Community
Intermediate
Row0902Row0902

Create GUI Component

Standardize wxPython Panels and Dialogs with event-driven architecture.

Community
Intermediate