skills.rest
All-Out-Games
All-Out-GamesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-scroll-grid

Create grid-based UI layouts with scroll views using Grid_Layout and next() iteration.

Updated Feb 7, 2026
Search Tags:#ui#layout#inventory#grid#scroll#grid-layout#card-grid
One-click install
npx skills add https://github.com/All-Out-Games/reusable-weapons-csl --skill ui-scroll-grid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-scroll-grid
Source: https://github.com/All-Out-Games/reusable-weapons-csl/tree/main/.claude/skills/ui-scroll-grid
Command: npx skills add https://github.com/All-Out-Games/reusable-weapons-csl --skill ui-scroll-grid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a compact toolkit to create and manage grid-based UI layouts and scrolling regions, reducing boilerplate and ensuring consistent placement of items.

Core Features & Use Cases

  • Grid_Layout: create grids from element counts with padding, and iterate using next() to place items.
  • Scroll Views: automatically expand scrollable regions for content overflow.
  • Use Case: implement inventory grids, dashboards, or card galleries that adapt to content size.

Quick Start

Create a 4x6 grid using UI.make_grid_layout(rect, 4, 6, .ELEMENT_COUNT, 8) and render items with grid->next().

Frequently Asked Questions about ui-scroll-grid

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

FAQPage Schema
How do I create a scrollable inventory grid layout that handles content overflow?▼

Create a scrollable inventory grid layout by defining a grid with element counts and padding, then iterate using next() to place items while the scroll view automatically expands for overflowing content.

What is the best way to build a card grid UI for a dashboard?▼

The best way to build a card grid UI is using a grid layout toolkit that sizes elements based on counts and padding, iterating through slots to place dashboard cards consistently without boilerplate.

How do I implement grid-based UI sizing and item placement for interactive applications?▼

Implement grid-based UI sizing by generating a layout from specified element counts and padding values, then use the next() iterator to sequentially place items into their designated grid slots.

Can I use grid layout tools for menus that need to adapt to dynamic content size?▼

Yes, grid layout tools support interactive applications like inventory menus and dashboards by automatically expanding scrollable regions to adapt the UI grid to dynamic content sizes.

Does this grid layout approach require external dependencies to manage scrolling regions?▼

No external dependencies are required; this grid layout approach integrates scrolling regions automatically within its own toolkit to handle content overflow without additional libraries.

Why does my UI grid layout not handle overflowing content properly?▼

Your UI grid layout may not handle overflowing content if it lacks an integrated scroll view, which is necessary to automatically expand regions when items exceed the designated screen space.

Related Skills

Explore More Software Engineering Skills→
alexeygrigorevalexeygrigorev
164

counter

Count list items and generate numbered lists starting at 1.

Community
Basic
XeldarAlzXeldarAlz
3

inventory-system

Create Unity inventory, equipment, and crafting systems with ScriptableObjects.

Community
Advanced
carrotwaxrcarrotwaxr
37

visual-style

Enforce consistent visual styling for Peek UI components with CSS custom properties and Tailwind patterns.

Community
Intermediate
KRISHNA0RKRISHNA0R
25

gpt-taste

Generate GSAP-driven frontend layouts with dense gapless grids and scroll-based animations.

Community
Advanced