skills.rest
openyida
openyidaOFFICIAL
Explore all skills by this author →
GitHub

yida-density

Manage Yida page density with DENSITY_CONFIG and mobile detection.

201|43|Updated Mar 5, 2026
Search Tags:#responsive#ui-design#compact#density#yida#comfortable#spacious
One-click install
npx skills add https://github.com/openyida/openyida --skill yida-density
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: yida-density
Source: https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-density
Command: npx skills add https://github.com/openyida/openyida --skill yida-density

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures consistent information density across Yida custom pages by providing a standardized set of spacing, typography, and component sizing rules so that generated pages look coherent, readable, and responsive across devices. It prevents hard-coded pixel values that break density switching and enforces automatic mobile downgrades and appropriate defaults for different page types.

Core Features & Use Cases

  • Three density modes: compact, comfortable, and spacious with complete DENSITY_CONFIG mappings for paddings, font sizes, row heights, and icon sizes.
  • Automatic and explicit control: default automatic selection based on page type and device, plus optional desktop density switching UI for list/table pages.
  • Safety and publishing guardrails: requires page-type confirmation, shows code preview, obtains explicit user confirmation before publishing, and provides post-publish verification links.
  • Use Case: Generate an operations dashboard list that defaults to compact on desktop, downgrades to spacious on mobile, and exposes a density toggle for power users.

Quick Start

Generate a Yida list page that implements DENSITY_CONFIG-based styles, includes a desktop density switch, auto-detects mobile to downgrade to spacious, and requires code preview plus user confirmation before publishing.

Frequently Asked Questions about yida-density

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

FAQPage Schema
How do I manage information density for Yida custom pages?▼

Manage information density for Yida custom pages by applying standardized spacing, typography, and component sizing rules via DENSITY_CONFIG. This ensures consistent layout variables across lists and table-like pages.

How do I make Yida list pages responsive on mobile devices?▼

Make Yida list pages responsive on mobile by implementing didMount mobile detection to automatically downgrade density to spacious mode, preventing hard-coded pixel values that break responsive behavior on smaller screens.

What are the available density modes for Yida page design?▼

The available density modes for Yida page design are compact, comfortable, and spacious. Each mode provides complete mappings for paddings, font sizes, row heights, and icon sizes within the DENSITY_CONFIG.

Can I add a density toggle to desktop Yida pages?▼

Yes, you can add explicit desktop density switching UI to Yida list and table pages. This allows power users to manually switch between compact, comfortable, and spacious modes on desktop.

What Yida page types are excluded from density switching?▼

Single-card, form submit, and native report pages are excluded from density switching. The density presets specifically apply only to lists and table-like custom pages in Yida.

How do I safely publish Yida pages with custom density settings?▼

Safely publish Yida pages with custom density settings by showing a code preview, requiring page-type confirmation, and obtaining explicit user confirmation before publishing, followed by post-publish verification links.

Related Skills

Explore More Design & Creative Skills→
nicolaiprodromovnicolaiprodromov
20

normalize

Normalizes Puree UI designs to match SCSS variables and component conventions.

Community
Advanced
ythmythm
1

yida-density

Generate Yida list and table page layouts with compact, comfortable, or spacious density modes.

Community
Intermediate
DojoGenesisDojoGenesis
2

pdf-typography

Configure Pretext typography settings for consistent PDF layouts.

Community
Intermediate
ZainEldeen-Ashraf-Ibrahim-Ibrahim-SamakZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak

layout

Analyze UI layouts and prescribe spacing scales, hierarchy, and grid recommendations.

Community
Intermediate