skills.rest
lazygophers
lazygophersOFFICIAL
Explore all skills by this author →
WebsiteGitHub

aidog-frontend-experience

Refine AiDog Tauri and React UI layouts with Liquid Glass theme variables.

7|1|Updated Jun 12, 2026
Search Tags:#ui#frontend#react#i18n#ux#tauri#rtl
One-click install
npx skills add https://github.com/lazygophers/aidog --skill aidog-frontend-experience
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aidog-frontend-experience
Source: https://github.com/lazygophers/aidog/tree/main/.claude/skills/aidog-frontend-experience
Command: npx skills add https://github.com/lazygophers/aidog --skill aidog-frontend-experience

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps improve AiDog’s frontend experience when a page feels cluttered, inconsistent, hard to use, or visually off-brand, while preserving the app’s existing Tauri, React, i18n, and theme conventions.

Core Features & Use Cases

  • UI and layout refinement: Rework spacing, alignment, hierarchy, and card composition for clearer dashboards, settings pages, and dialogs.
  • Interaction and navigation consistency: Keep local-state navigation, navGuard leave-page protection, and shared formatter/component reuse aligned across the app.
  • Internationalization and RTL support: Ensure new or updated UI works across seven languages, including Arabic RTL, without hardcoded text or direction bugs.
  • Theme-safe visual work: Apply Liquid Glass styling and light/dark theme variables correctly for a consistent look across themes.
  • Use case: A settings page feels crowded and inconsistent; use this Skill to reorganize the layout, reuse shared components, fix RTL spacing, and make the experience easier to scan and act on.

Quick Start

Improve the selected AiDog page or component by reviewing the existing theme, shared components, i18n keys, and navigation patterns, then propose or apply UI changes that stay consistent with the project’s Liquid Glass style and accessibility rules.

Frequently Asked Questions about aidog-frontend-experience

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

FAQPage Schema
How do I fix a cluttered React settings page and improve visual hierarchy in a Tauri desktop app?▼

To fix a cluttered React settings page in a Tauri app, rework the card composition, spacing, and alignment. This frontend refinement clarifies the visual hierarchy and makes dashboards easier to scan and act on.

What is the best way to support RTL layout and multilingual i18n in a React frontend?▼

Supporting RTL layout and multilingual i18n in React requires removing hardcoded text and applying direction-aware spacing adjustments. This ensures the interface works correctly across seven languages, including Arabic right-to-left formatting.

How do I apply Liquid Glass theme variables for consistent light and dark mode styling?▼

Apply Liquid Glass theme variables for light and dark mode styling by using predefined CSS variables within React components. This theme-safe visual work maintains a consistent appearance across both interface modes.

Does this frontend UX refinement handle navigation flow and leave-page protection?▼

Yes, frontend UX refinement handles navigation flow by keeping local-state navigation aligned and utilizing navGuard leave-page protection. This interaction consistency prevents accidental data loss when transitioning between pages.

Can I reuse shared formatters and components when reorganizing a crowded dashboard layout?▼

Yes, you can and should reuse shared formatters and components when reorganizing a crowded dashboard layout. Reusing these shared elements ensures interaction consistency and alignment across the entire desktop application.

Why does my updated UI look visually off-brand after changing card composition and spacing?▼

Your updated UI looks visually off-brand because the changes bypassed the Liquid Glass theme variables and shared components. Aligning the styling with these conventions restores theme-safe visual work and brand consistency.

Related Skills

Explore More Software Engineering Skills→
BenWork17BenWork17

i18n-localization

Audit codebases for hardcoded strings and missing locale keys.

Community
Advanced
SensLiaoSensLiao

qa-visual-regression

Compare UI screenshots against baselines to detect visual regressions.

Community
Advanced
KJ-devsKJ-devs

desktop-dev

Build Tauri desktop apps with React 18, Tailwind, and type-safe IPC.

Community
Advanced
BangDoriBangDori
11

design-system

Document Prowl's Liquid Glass design system with Tailwind CSS tokens.

Community
Basic