skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amvcp-layout-kpi

Generate KPI rows and 12-column dashboard layouts with CSS Grid auto-fit and data-span placement.

Updated May 8, 2026
Search Tags:#responsive design#css grid#kpi layout#dashboard grid#metric strip#data-span#visual communicator
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-layout-kpi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amvcp-layout-kpi
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-layout-kpi
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-layout-kpi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of creating consistent, metric-focused dashboard layouts that remain readable and reflow correctly across screen sizes without manual grid-tuning.

Core Features & Use Cases

  • KPI strip layouts: builds an auto-fit metric strip using small KPI tiles that reflow cleanly from desktop to phone.
  • 12-column dashboard grid placement: positions dashboard widgets using a repeat(12, 1fr) rhythm with data-span values for predictable halves, thirds, quarters, and mixed splits.
  • Interactive selection compatibility: ensures KPI tiles and dashboard cells participate in the selection/feedback contract (including data-ve-id / data-ve-type and per-element decision mini UI expectations).

Quick Start

Use the amvcp-layout-kpi skill to lay out a metrics page by placing a .la-kpi-row inside a .la-dashboard grid and assigning data-span values to each dashboard tile as requested.

Frequently Asked Questions about amvcp-layout-kpi

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

FAQPage Schema
How do I create a responsive KPI strip layout that reflows across breakpoints?▼

Create responsive KPI strips using CSS Grid auto-fit, letting metric tiles reflow cleanly from desktop to phone without manual grid-tuning. The layout applies consistent tokens so stat bands stay readable at every screen size.

How do I place dashboard widgets in a 12-column grid using data-span values?▼

Place dashboard widgets in a 12-column grid using `repeat(12, 1fr)` rhythm with `data-span` values. This enables predictable halves, thirds, quarters, and mixed splits for metric cell placement across the dashboard layout.

What's the best way to build a metric dashboard without nested scrollbars?▼

Avoid nested scrollbars in metric dashboards by applying `min-width: 0` on grid children and using CSS Grid auto-fit for KPI tiles. This ensures dashboard cells reflow correctly without causing scroll overflow.

Does this dashboard grid layout support interactive element selection?▼

Yes, the dashboard grid layout supports interactive selection by stamping `data-ve-id` and `data-ve-type` attributes on KPI tiles and dashboard cells, enabling per-element decision mini UI expectations and selection feedback.

Can I use data-span values for mixed column splits in a dashboard header?▼

Yes, you can use `data-span` values for mixed column splits in dashboard headers and card panels. The 12-column grid supports halves, thirds, quarters, and mixed splits for flexible widget placement across responsive breakpoints.

Why does my CSS Grid dashboard layout break on mobile screen sizes?▼

CSS Grid dashboard layouts break on mobile when grid children lack `min-width: 0` or when auto-fit isn't applied to KPI tiles. The layout uses auto-fit reflowing and `data-span`-driven placement to maintain consistent rendering across breakpoints.

Related Skills

Explore More Design & Creative Skills→
UnlimitedxIQUnlimitedxIQ

product-analytics

Define and track product metrics using AARRR, North Star, and HEART frameworks.

Community
Intermediate
EmasoftEmasoft

amvcp-tables-matrix-compare

Generate accessible HTML matrix and comparison tables with data-ve-* attributes.

Community
Intermediate
EmasoftEmasoft

amvcp-visual-communication

Route visual-content requests to the correct category skill for interactive HTML scaffolding.

Community
Advanced
ArnavPuriArnavPuri
3

layout-composition

Generate CSS code for Grid, Flexbox, and Bento grid layouts.

Community
Intermediate