eisaal-theming

Standardize color, typography, spacing, and UI motifs with design tokens for Eisaal applications.

1|Updated Jan 13, 2026
One-click install
npx skills add https://github.com/abbas133/my-claude --skill eisaal-theming
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: eisaal-theming
Source: https://github.com/abbas133/my-claude/tree/main/eisaal-app/.claude/skills/eisaal-theming
Command: npx skills add https://github.com/abbas133/my-claude --skill eisaal-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a centralized, reusable design system for Eisaal applications, aligning color, typography, spacing, and UI patterns to ensure visual consistency and faster product delivery.

Core Features & Use Cases

  • Color usage framework and a shrine-inspired palette mapped to semantic roles (primary, secondary, surface, background) to avoid hard-coded values.
  • Typography and spacing tokens to maintain typographic scale, rhythm, and responsive behavior across screens.
  • Glassmorphic effects, border radii, and animation patterns to create a cohesive visual language used by designers and developers.
  • Usage guidance for color contrasts, component naming, and accessibility to improve usability and inclusivity.

Quick Start

Apply the Sanctuary design tokens to your UI components and refer to the color, typography, and spacing guidelines to implement a cohesive theme.

Frequently Asked Questions about eisaal-theming

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

FAQPage Schema
How do I standardize color palettes and typography scales across a UI design system?

Standardize color palettes and typography scales by applying centralized design tokens mapped to semantic roles, preventing hard-coded values and ensuring consistent visual rhythm across all application screens.

What are semantic design tokens and how do they work for theming?

Semantic design tokens are variables representing color, spacing, and typography values mapped to roles like primary or surface, enabling consistent theming and easier UI updates without altering hard-coded component values.

How do I implement glassmorphism effects using a UI design system?

Implement glassmorphism effects by applying the predefined visual language tokens for border radii, shadows, and translucent surface patterns provided within the design system to ensure cohesive component styling.

Can I use these design tokens to enforce accessibility and color contrast guidelines?

Yes, the design tokens include usage guidance for color contrasts and accessibility constraints, allowing you to enforce inclusive visual standards and improve usability across all Eisaal applications.

Does the Eisaal theming skill provide spacing tokens for responsive UI design?

Yes, the Eisaal theming skill provides typography and spacing tokens that maintain typographic scale, structural rhythm, and responsive behavior across different screen sizes for consistent UI implementation.

When do I need a unified design system for application theming?

You need a unified design system when managing multiple application screens requiring consistent visual language, aiming to align UI motifs and accelerate product delivery through reusable constraints and tokens.