// stryxstryx-design

Design.

Glassmorphism design system, animation patterns, accessibility (WCAG 2.1 AA), React 18 components, Electron desktop conventions.

Install this skill ↓ ← Back to all skills

//01What it does

Premium UI/UX Superbrain.

What separates Apple-tier UI from another React app is detail. This skill captures: glass-card recipes (backdrop-blur with proper layering), Framer Motion patterns that do not jank on scroll, accessibility-first focus management, and Electron-specific UI patterns (titlebar drag regions, traffic lights, native menus).

//02What is inside

Four recipes.

i.

Glassmorphism recipes

backdrop-filter: blur(24px) on rgba glass. The right layering rules (background, border, shadow). Light AND dark mode variants. Performance fallback when GPU is slow.

ii.

Framer Motion patterns

AnimatePresence for route transitions. Layout animations for moving elements. Variant systems for compound motion. Spring tuning for natural feel.

iii.

Accessibility-first

Focus rings always visible. Skip links. ARIA live regions for dynamic content. Color contrast ratios. Keyboard nav. Screen reader testing.

iv.

Electron-specific UI

Titlebar drag regions. Traffic-light positioning. Native menus. Window-state persistence. macOS vs Windows visual cues.

//03Chains with

It composes.

Skills compose into workflows. Design is rarely the only skill you will use — it pairs naturally with these others in the library.

stryx-react→ stryx-architect→ stryx-test→

//04Install · just this skill

One command.

Installs only stryx-design (skip the other 19) into ~/.claude/skills/stryx-design/.

macOS · Linux

$ STRYX_SKILL=stryx-design curl -fsSL https://stryxlabs.com/install-skills.sh | bash

Windows · PowerShell

PS> $env:STRYX_SKILL="stryx-design"; irm https://stryxlabs.com/install-skills.ps1 | iex

All 20 skills (the full library)

$ curl -fsSL https://stryxlabs.com/install-skills.sh | bash

//05Reach

Free for all use.

Stryx Labs License v1.0. Use Design in personal, commercial, internal, and production work. No attribution required.

← See all 20 skills Read the license Email us