skills.rest
Rzyfront
RzyfrontCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vendix-frontend-stats-cards

Automate responsive KPI card layouts in admin dashboards.

5|Updated Aug 23, 2025
Search Tags:#frontend#angular#dashboard#responsive#stats#kpi
One-click install
npx skills add https://github.com/Rzyfront/Vendix --skill vendix-frontend-stats-cards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vendix-frontend-stats-cards
Source: https://github.com/Rzyfront/Vendix/tree/main/skills/vendix-frontend-stats-cards
Command: npx skills add https://github.com/Rzyfront/Vendix --skill vendix-frontend-stats-cards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes the presentation of key metrics in admin dashboards by providing a mobile-friendly horizontal scroll of compact KPI cards that adapt to desktop layouts.

Core Features & Use Cases

  • Responsive stats-container with horizontal scroll on mobile and grid on desktop
  • Sticky positioning for mobile-first modules
  • Reusable StatsComponent integration with consistent styling
  • Use Case: implement stats/KPI displays in STORE_ADMIN, ORG_ADMIN, SUPER_ADMIN

Quick Start

Add a stats-container wrapper around app-stats components to enable the mobile scroll and desktop grid behavior.

Frequently Asked Questions about vendix-frontend-stats-cards

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

FAQPage Schema
How do I make responsive KPI cards for an admin dashboard?▼

Responsive KPI cards can be implemented by wrapping app-stats components in a stats-container, which enables a horizontal scroll on mobile and a grid layout on desktop. This provides a mobile-first sticky behavior for dashboard metrics.

What is the best way to display dashboard statistics across mobile and desktop layouts?▼

Displaying dashboard statistics across different layouts is handled by a reusable stats-container pattern. It adapts compact KPI cards into a mobile-scrollable row and a desktop grid, ensuring consistent styling across admin modules.

Can I use a reusable stats component for STORE_ADMIN and SUPER_ADMIN modules?▼

Yes, a reusable StatsComponent integration applies to STORE_ADMIN, ORG_ADMIN, and SUPER_ADMIN modules. It provides a consistent API to standardize key metric presentations across various admin frontend modules.

How do I implement a horizontal scroll for mobile dashboard metrics?▼

A horizontal scroll for mobile dashboard metrics is enabled by adding a stats-container wrapper around app-stats components. This mobile-first approach satisfies sticky positioning requirements for compact KPI cards.

Do I need external dependencies to build a mobile-scrollable stats grid?▼

No external dependencies are required to build a mobile-scrollable stats grid. The layout behavior is achieved by integrating the reusable StatsComponent and stats-container wrapper directly within your frontend admin modules.

Related Skills

Explore More Software Engineering Skills→
RodrigoVeraCandiaRodrigoVeraCandia

Generador de Dashboards

Generate Angular dashboards with metrics, charts, and tables using PrimeNG and Chart.js.

Community
Advanced
mberetvasmberetvas

building-streamlit-dashboards

Automate Streamlit dashboard creation with KPI cards, sparklines, and responsive layouts.

Community
Intermediate
RzyfrontRzyfront
5

vendix-frontend-standard-module

Standardize admin list UI modules with mobile-first layouts and Angular Signals.

Community
Basic
HouseGarofaloHouseGarofalo
3

dashboard-design

Design responsive dashboards with KPI cards and data tables using React and Tailwind CSS.

Official
Intermediate