skills.rest
pandazki
pandazkiCOMMUNITY
Explore all skills by this author →
GitHub

pneuma-gridboard

Coordinate live dashboard editing with draggable tile components on GridBoard.

154|15|Updated Feb 26, 2026
Search Tags:#theming#dashboard#tile#gridboard#defineTile#board.json
One-click install
npx skills add https://github.com/pandazki/pneuma-skills --skill pneuma-gridboard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pneuma-gridboard
Source: https://github.com/pandazki/pneuma-skills/tree/main/modes/gridboard/skill
Command: npx skills add https://github.com/pandazki/pneuma-skills --skill pneuma-gridboard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GridBoard provides a live, tile-based workspace for building and iterating dashboards with a draggable grid canvas. It enables teams to design, preview, and implement dashboards in a synchronized environment by editing tiles and layouts in one place.

Core Features & Use Cases

  • DefineTile API usage to create and register tiles for live dashboard grids.
  • board.json schema conformance and a theming convention via theme.css.
  • Resize adaptation across compact, medium, and expanded tile tiers to balance craft and data.
  • Live preview with synchronous updates as tiles are edited or moved.

Quick Start

Create a new tile by adding tiles/<tile-id>/Tile.tsx with defineTile and update board.json to place it on the board.

Frequently Asked Questions about pneuma-gridboard

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

FAQPage Schema
How do I build a live dashboard with draggable grid tiles?▼

To build a live dashboard with draggable grid tiles, create a tile component using the defineTile API and register its placement in the board.json file. This enables synchronous live preview updates as you edit or move tiles on the workspace.

How does board.json schema conformance work for dashboard layouts?▼

Board.json schema conformance works by mapping tile placements and layout configurations into a structured JSON format. Updating board.json places registered tiles onto the gridboard workspace, enabling synchronous layout editing and live previewing.

How do I manage CSS variable theming for a tile-based dashboard?▼

You manage CSS variable theming for a tile-based dashboard by applying a theming convention via theme.css. This approach allows you to define consistent visual styles across the gridboard workspace while editing tiles and layouts.

How do dashboard tiles adapt their layout when resized on a grid?▼

Dashboard tiles adapt their layout when resized by switching across compact, medium, and expanded tile tiers. This resize adaptation rule balances visual craft and data density during live dashboard design sessions.

Can I use a proxy for data access when building live dashboards?▼

Yes, you can use proxy-based data access when building live dashboards. The gridboard workspace supports proxy configurations to securely fetch and synchronize live data feeds into your draggable tile components during design sessions.

What is the best way to define a custom tile for a dashboard grid?▼

The best way to define a custom tile for a dashboard grid is creating a Tile.tsx file in the tiles directory and using the defineTile API. This registers the component for live preview and integrates it into board.json.

Related Skills

Explore More Software Engineering Skills→
nedaktov-opsnedaktov-ops

init

Initialize a MemPalace workspace with a ChromaDB backend and project scaffold.

Community
Basic
syncfusionsyncfusion

syncfusion-aspnetcore-lineargauge

Build Syncfusion Linear Gauge interfaces for ASP.NET Core applications.

Official
Advanced
canyouseeuscanyouseeus

admin-ops

Maintain a live Supabase-backed admin dashboard with Noir styling.

Community
Advanced
quanngynxquanngynx

islands-architecture

Implement islands architecture to render static HTML and hydrate interactive widgets independently.

Community
Intermediate