skills.rest
web3br1
web3br1COMMUNITY
Explore all skills by this author →
GitHub

frontend-widget-generator

Generate React widgets for Luminaris dashboard grids.

Updated Jun 18, 2026
Search Tags:#react#dashboard#react-grid-layout#widget generation#luminaris
One-click install
npx skills add https://github.com/web3br1/luminaristest --skill frontend-widget-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-widget-generator
Source: https://github.com/web3br1/luminaristest/tree/main/.claude/skills/frontend-widget-generator
Command: npx skills add https://github.com/web3br1/luminaristest --skill frontend-widget-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of React widgets for dashboard grids in Luminaris projects, reducing the time and effort required to develop custom dashboard components.

Core Features & Use Cases

  • Widget Generation: Generates React widgets compatible with react-grid-layout.
  • Custom Widget Creation: Supports KPI cards, chart widgets, table widgets, and calendar widgets.
  • Use Case: When you need a new tile/card/chart/tabela for the dashboard grid, you can use this skill to generate a new widget that adheres to the Luminaris theme and architecture.

Quick Start

Generate a new widget for the dashboard grid named 'AnalyticsWidget' using the command: generate widget AnalyticsWidget kpi.

Frequently Asked Questions about frontend-widget-generator

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

FAQPage Schema
How do I generate React widgets for dashboard grids in a Luminaris project?▼

Generate React dashboard widgets by running the command `generate widget [Name] [type]`, specifying types like kpi, chart, table, or calendar. This creates React components compatible with react-grid-layout and Luminaris architecture.

What types of dashboard widgets can I create for react-grid-layout?▼

You can create four types of dashboard widgets for react-grid-layout: KPI cards, chart widgets, table widgets, and calendar widgets. Each generated widget adheres to the Luminaris theme and integrates with the DashboardDataContext.

Do I need a specific monorepo setup to generate React dashboard components?▼

Yes, generating React dashboard components requires a Luminaris monorepo setup with React and Next.js. The Skill integrates directly with the DashboardDataContext within this specific architecture to function correctly.

Can I use this widget generator if my dashboard does not use DashboardDataContext?▼

No, this widget generator is designed specifically for Luminaris projects using DashboardDataContext. If your React dashboard does not use this data context, the generated widgets will not integrate properly with your existing data flow.

What is the best way to add a KPI card to a Luminaris dashboard?▼

The best way to add a KPI card is to use the widget generator with the kpi type argument. This automatically creates a styled React component configured for the dashboard grid layout without manual setup.

Related Skills

Explore More Software Engineering Skills→
web3br1web3br1

structured-data-generator

Generate structured data pipelines from XLSX sheets for the Luminaris platform.

Community
Advanced
sero-labssero-labs
19

sero-dashboard-ui

Builds Sero dashboard widgets with shared React components and semantic design tokens.

Official
Intermediate
ryantsairyantsai
434

dashboard-widget-builder

Create, repair, and redesign KKTerm Dashboard widgets with script widgets and live data.

Community
Advanced
AmplifyAutomationAmplifyAutomation
1

webapp-dev:react-components

Generate React components with TypeScript typings and consistent structure patterns.

Official
Advanced