Skills
.Work. You
Rest

dense-no-scroll-layout

Community

Optimize mobile layout density without excessive scrolling.

Design & Creative#mobile design#information architecture#density#layout optimization#viewport design
Authorjpoindexter
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps designers avoid over-scrolling in mobile UIs by optimizing content density within a single viewport, reducing the need for vertical scrolling.

Core Features & Use Cases

  • Viewport Budgeting: Provides guidance on allocating space within a viewport for different content elements.
  • Layout Strategies: Offers strategies to reduce scrolling, such as combining cards, using grids, and implementing disclosure controls.
  • Component Recommendations: Suggests specific UI components that enhance density and readability.
  • Use Case: When designing a feature-heavy mobile screen, use this Skill to determine the optimal layout that minimizes vertical scrolling while keeping essential content above the fold.

Quick Start

To design a dense, no-scroll layout for your mobile app, first identify the primary content area. Then, apply the strategies from this Skill to organize secondary content, considering component recommendations like stat grids and segmented pickers.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: dense-no-scroll-layout
Download link: https://github.com/jpoindexter/design-and-ai-skills/archive/main.zip#dense-no-scroll-layout

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.