skills.rest
loagma
loagmaCOMMUNITY
Explore all skills by this author →
GitHub

workspace-page-ui-zoom

Apply 80% UI zoom to workspace surfaces using CSS zoom containers.

Updated Feb 7, 2026
Search Tags:#frontend#css#workspace#web-design#ui-density#zoom
One-click install
npx skills add https://github.com/loagma/LoagmaPMS --skill workspace-page-ui-zoom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: workspace-page-ui-zoom
Source: https://github.com/loagma/LoagmaPMS/tree/main/.claude/skills/workspace-page-ui-zoom
Command: npx skills add https://github.com/loagma/LoagmaPMS --skill workspace-page-ui-zoom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Applies a consistent UI density by wrapping workspace content in a zoomed container to achieve the desired 80% scale without browser zoom, ensuring interactions stay aligned.

Core Features & Use Cases

  • Applies an 80% zoom density across surfaces such as reports-v3, defect tracker, and review shells for unified density.
  • Guides adding new surfaces by wrapping the page body in a zoomed container and applying existing scale classes.
  • Addresses fixed chrome and dropdown behavior to prevent misalignment when zoom is active, including handling menus and sticky headers.

Quick Start

Apply an 80% UI scale by wrapping the page body in a zoomed container and applying the scale class to the surface wrapper.

Frequently Asked Questions about workspace-page-ui-zoom

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

FAQPage Schema
How do I apply a consistent UI density scale to workspace dashboards without using browser zoom?▼

To apply consistent UI density without browser zoom, wrap the workspace page body in a zoomed container and apply scale classes. This achieves an 80% UI scale while keeping interactions aligned.

Why should I use CSS zoom instead of transform to adjust page-level density?▼

CSS zoom is required for page-level density adjustments because it maintains layout flow and interaction alignment. Unlike transform, it prevents misalignment in fixed chrome and dropdown behavior when wrapping dense dashboards.

How do I fix dropdown and sticky header misalignment when applying a CSS zoom to a web application?▼

To fix dropdown and sticky header misalignment during CSS zoom, wrap the page body in a zoomed container and apply specific guidance to manage fixed chrome. This prevents layout shifts in menus and headers.

Can I apply an 80% UI scale across multiple custom surfaces like a defect tracker and review shells?▼

Yes, you can apply an 80% UI scale across custom surfaces like a defect tracker and review shells. Wrap each new surface's page body in a zoomed container and apply existing scale classes for unified density.

What are the limitations of using CSS zoom for workspace web design?▼

A limitation of using CSS zoom for workspace web design is potential misalignment in fixed chrome and dropdown behavior. It requires careful management of sticky headers and menus to prevent layout shifts.

Related Skills

Explore More Software Engineering Skills→
aresbitaresbit
46

frontend-slides

Convert PowerPoint files into zero-dependency HTML slide decks.

Community
Advanced
syncfusionsyncfusion

syncfusion-javascript-appbar

Implement Syncfusion TypeScript AppBar navigation components with responsive positioning and sticky behavior.

Official
Intermediate
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic
hubeiqiaohubeiqiao

modal-media-viewport-overflow

Apply viewport-relative sizing and flexbox properties to fix CSS overflow in fixed modals.

Community
Intermediate