Does this skill support dark mode?

Yes, the skill includes specific foundation guides for color palettes and semantic tokens that support both light and dark modes out of the box.

Is it suitable for building developer tools?

Yes, it is specifically optimized for technical interfaces, providing patterns for terminal emulators, log viewers, and code editors using JetBrains Mono.

Can it help with accessibility (WCAG) compliance?

Absolutely. Accessibility is a core principle, ensuring keyboard navigation, screen reader support, and sufficient contrast are integrated from the start.

How does it handle streaming content?

It includes specialized implementation guides for progressive loading, streaming text, skeleton screens, and optimistic UI updates to ensure a smooth real-time experience.

Which design systems are prioritized?

It prioritizes shadcn/ui for its accessibility and customizability, followed by daisyUI for rapid prototyping and HeroUI for modern product interfaces.

Elegant UI Design

Name: Elegant UI Design
Author: rand

byrand

•

디자인 도구

Builds sophisticated, accessible, and developer-centric user interfaces with high-end interactive components like terminals and chat.

This skill empowers Claude to act as a world-class UI/UX engineer, focused on creating polished web interfaces that prioritize clarity and accessibility. It provides specialized patterns for technical UIs, including streaming chat interfaces, terminal emulators, and syntax-highlighted code displays. By integrating with popular design systems like shadcn/ui and following an OODA-loop-based design process, it ensures that applications are not only visually stunning but also performance-optimized and fully WCAG-compliant.

주요 기능

0157 GitHub stars

02Deep integration with shadcn/ui, daisyUI, and HeroUI design systems

03Sophisticated streaming and real-time interaction logic

04Performance-first workflow for Core Web Vitals optimization

05Professional technical UI patterns for terminals, code diffs, and logs

06Built-in accessibility (WCAG AA) and keyboard navigation standards

사용 사례

01Creating accessible React/Next.js interfaces with modern design systems

02Building developer-facing tools and technical dashboards

03Implementing real-time streaming chat and terminal-based applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rand/cc-polymath elegant-design

For use in Claude.ai and ChatGPT

Download Skill