skills.rest
creatifcoding
creatifcodingCOMMUNITY
Explore all skills by this author →
GitHub

ag-grid-patterns

Standardize AG-Grid v34 integration patterns with themeQuartz theming and TMNL_TOKENS styling.

2|Updated Oct 29, 2025
Search Tags:#React#frontend#TypeScript#patterns#UI development#data grid#AG-Grid
One-click install
npx skills add https://github.com/creatifcoding/gbg --skill ag-grid-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ag-grid-patterns
Source: https://github.com/creatifcoding/gbg/tree/main/packages/tmnl/.claude/skills/ag-grid-patterns
Command: npx skills add https://github.com/creatifcoding/gbg --skill ag-grid-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill solves the complexity of implementing AG-Grid v34 by providing battle-tested patterns and canonical examples. It ensures consistent, performant, and correctly themed data grids, eliminating common integration headaches and development guesswork.

Core Features & Use Cases

  • Canonical Patterns: Provides proven examples for themes, custom cell renderers, column definitions, and integrations.
  • Performance Optimization: Includes patterns for optimizing AG-Grid with large datasets, especially in canvas environments like tldraw.
  • TMNL Integration: Shows how to integrate AG-Grid with tldraw custom shapes and effect-atom for robust state management.
  • Use Case: When building a new data table in your application, invoke this Skill to get the exact code for a custom cell renderer, a TMNL_TOKENS-based theme, and best practices for integrating with your state management system, saving hours of research and debugging.

Quick Start

Help me implement an AG-Grid data table with a custom cell renderer for status and a theme based on TMNL_TOKENS.

Frequently Asked Questions about ag-grid-patterns

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

FAQPage Schema
How do I build a data grid in React with AG-Grid v34 and custom styling?▼

AG-Grid v34 requires module registration and theme configuration. This Skill provides canonical patterns for themeQuartz-based theming with TMNL_TOKENS, custom cell renderers, and type-safe column definitions, eliminating integration guesswork and ensuring consistent, performant grids.

What's the best way to create custom cell renderers for AG-Grid in TypeScript?▼

Custom cell renderers need type-safe ColDef and ICellRendererParams usage to prevent runtime errors. This Skill includes battle-tested patterns for status renderers, theming integration, and TMNL state management, saving hours of debugging.

Can I integrate AG-Grid with tldraw and effect-atom state management?▼

Yes. This Skill shows proven patterns for integrating AG-Grid with tldraw custom shapes and effect-atom, including performance optimization for large datasets in canvas environments and canonical file structure precedents.

How do I optimize AG-Grid performance with large datasets?▼

AG-Grid performance in large-scale or canvas-based applications requires specific patterns. This Skill provides optimization techniques for data grids in tldraw environments and TMNL projects with proper state management integration.

Does AG-Grid support TMNL_TOKENS-driven theming?▼

AG-Grid theming can be token-driven through themeQuartz configuration. This Skill standardizes TMNL_TOKENS integration patterns to ensure consistent design tokens across your application's data grids.

Related Skills

Explore More Software Engineering Skills→
GDSDNGDSDN
3

setup-design-system

Initialize Atomic Design and Tailwind CSS v4 project scaffolding with design tokens.

Community
Advanced
syncfusionsyncfusion

syncfusion-angular-grid

Implement Syncfusion Angular Grid components with data binding, sorting, filtering, grouping, editing, and exporting.

Official
Intermediate
Kirankumar2604Kirankumar2604

canvas

Manage iframe-based UI previews and align shapes on an infinite canvas.

Community
Advanced
elwa2elwa2

high-performance-ag-grid-fastapi

Integrate Python FastAPI backends with React AG Grid frontends using the Server-Side Row Model.

Community
Advanced