skills.rest
OthmanAdi
OthmanAdiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gmira-catalog

Design non-uniform data-driven catalog interfaces with URL-based state management.

Updated Jul 25, 2026
Search Tags:#catalog#ui-design#seo#inventory#data-visualization#web-performance
One-click install
npx skills add https://github.com/OthmanAdi/gmira --skill gmira-catalog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gmira-catalog
Source: https://github.com/OthmanAdi/gmira/tree/main/skills/gmira-catalog
Command: npx skills add https://github.com/OthmanAdi/gmira --skill gmira-catalog

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the problem of generic, uninformative card grids that hide data hierarchy and fail to guide user decision-making in inventory or product listings.

Core Features & Use Cases

  • Structure Selection: Provides a framework to choose between seven distinct layout structures based on data spread and user intent.
  • Data-Driven Design: Replaces arbitrary styling with logic-based weight, sorting, and filtering that reflects the actual value of items.
  • Use Case: Use this when building a vehicle inventory, product listing page, or project archive to ensure the layout highlights key differentiators rather than forcing all items into identical, misleading rectangles.

Quick Start

Use the gmira-catalog skill to audit the current product listing page and implement a density-varying grid based on the provided inventory data.

Frequently Asked Questions about gmira-catalog

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

FAQPage Schema
How do I design a data-driven catalog interface that reflects inventory hierarchy?▼

A data-driven catalog interface replaces uniform card grids with density-varying layouts, applying visual hierarchy and logic-based sorting to reflect underlying inventory attributes and guide user decisions.

What's the best way to build SEO-friendly product listings with crawlable HTML?▼

SEO-friendly product listings require crawlable semantic HTML and URL-based state management to ensure non-uniform catalog interfaces remain indexable while handling complex filtering and sorting states.

How do I choose a layout structure for complex inventory or archival sets?▼

Choosing an inventory layout structure involves evaluating data spread and user intent against seven distinct frameworks, ensuring the selected grid highlights key differentiators rather than forcing identical rectangles.

Does implementing non-uniform catalog grids affect web performance?▼

Non-uniform catalog grids optimize web performance by utilizing performance-optimized loading patterns, ensuring that data-driven visual hierarchy does not degrade the loading speed of complex product listings.

When should I avoid uniform card grids for product listing pages?▼

You should avoid uniform card grids for product listing pages when managing complex inventory, as generic rectangles hide data hierarchy, obscure key item differentiators, and fail to guide user decision-making.

Can I use this catalog framework for vehicle inventory and project archives?▼

This catalog framework applies to vehicle inventory, project archives, and product listings, providing a systematic structure to ensure layout highlights key differentiators based on underlying data attributes.

Related Skills

Explore More Design & Creative Skills→
maxnormmaxnorm
26

magento-catalog-specialist

Analyze Magento 2 catalog data quality, structure, and health.

Community
Advanced
omosb1-sysomosb1-sys

premium-ux-standards

Enforce premium UX guidelines for Vercel web interfaces with semantic HTML and ARIA labeling.

Community
Advanced
kdinevkdinev

igniteui-angular-grids

Architect Angular grid interfaces with Ignite UI Grid, Tree Grid, Hierarchical Grid, and Pivot Grid.

Community
Advanced
Elliot-TangSElliot-TangS
1

arrange

Analyze UI layouts and propose spacing, rhythm, and hierarchy improvements.

Community
Advanced