New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Building Tables

by ancoleman in ancoleman/ai-design-components

Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids.

MITAuto-check passedFrontend & Design

Install Building Tables

skills CLI
$ npx skills add ancoleman/ai-design-components --skill building-tables -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ancoleman/ai-design-components building-tables --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/building-tables .claude/skills/building-tables && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
building-tables
GitHub stars
526
Token cost
~1.8k tokens
SKILL.md length
597 words
Files
33 (incl. scripts, references, assets)
Skills in repo
75
Repo updated
First seen
Licence
MIT

At a glance

Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids.

  • Works in 4 steps: Horizontal scroll - Simple, preserves… → Card stack - Transform rows to cards on… → Priority columns - Hide less important… → …
  • Creating tables
  • SKILL.md covers Purpose, When to Use, Quick Decision Framework and Core Implementation Patterns, plus 9 more sections
  • Calls node, python and npm

What it does

Building Tables is an agent skill from ancoleman/ai-design-components. Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids. Use when creating tables, implementing sorting/filtering/pagination, handling large datasets (10-1M+ rows), building spreadsheet-like interfaces, or designing data-heavy components. Provides performance optimization strategies, accessibility patterns (WCAG/ARIA), responsive designs, and library recommendations (TanStack Table, AG Grid).

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 35 other files, including scripts, reference files and assets (for example `assets/table-config-schema.json`, `outputs.yaml` and `references/accessibility-patterns.md`).

It sits in Frontend & Design, covering Accessibility, Responsive design and Excel spreadsheets. It works with TanStack. The repository describes itself as: Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude. The licence is MIT.

When your agent uses it

  • Creating tables
  • Implementing sorting/filtering/pagination
  • Handling large datasets (10-1M+ rows)
  • Building spreadsheet-like interfaces

Example prompts

  • “Use the building-tables skill to build tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data…”
  • “/building-tables”

Requirements

  • Python 3
  • Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Horizontal scroll - Simple, preserves structure
  2. Card stack - Transform rows to cards on mobile
  3. Priority columns - Hide less important columns
  4. Truncate & expand - Compact with details on demand

What it can do on your machine

Read from SKILL.md and the folder at commit 76551b7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • python
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Building Tables loads about 1.8k tokens when it runs, and up to ~32k if it reads all its reference files. Until then it costs about 119 tokens; SKILL.md has 597 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~119
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~32k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from ancoleman/ai-design-components at commit 76551b7, republished under its MIT licence (© ancoleman). 597 words, ~1,784 tokens.

Download SKILL.mdSave it as .claude/skills/building-tables/SKILL.md (or your agent's skills folder). This skill also uses 32 other files; get the full folder from GitHub.
name
building-tables
description
Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids. Use when creating tables, implementing sorting/filtering/pagination, handling large datasets (10-1M+ rows), building spreadsheet-like interfaces, or designing data-heavy components. Provides performance optimization strategies, accessibility patterns (WCAG/ARIA), responsive designs, and library recommendations (TanStack Table, AG Grid).

Building Tables & Data Grids

Purpose

This skill enables systematic creation of tables and data grids from simple HTML tables to enterprise-scale virtualized grids handling millions of rows. It provides clear decision frameworks based on data volume and required features, ensuring optimal performance, accessibility, and responsive design across all implementations.

When to Use

Activate this skill when:

  • Creating tables, data grids, or spreadsheet-like interfaces
  • Displaying tabular or structured data
  • Implementing sorting, filtering, or pagination features
  • Handling large datasets or addressing performance concerns
  • Building inline editing or data entry interfaces
  • Requiring row selection or bulk operations
  • Implementing data export (CSV, Excel, PDF)
  • Ensuring table accessibility or responsive behavior

Quick Decision Framework

Select implementation tier based on data volume:

<100 rows        → Simple HTML table with progressive enhancement
100-1,000 rows   → Client-side features (sort, filter, paginate)
1,000-10,000     → Server-side operations with API pagination
10,000-100,000   → Virtual scrolling with windowing
>100,000 rows    → Enterprise grid with streaming and workers

For detailed selection criteria, reference references/selection-framework.md.

Core Implementation Patterns

Tier 1: Basic Tables (<100 rows)

For simple, read-only data display:

  • Use semantic HTML <table> structure
  • Add responsive behavior via CSS
  • Implement client-side sorting if needed
  • Reference references/basic-tables.md for patterns

Example: examples/simple-responsive-table.tsx

Tier 2: Interactive Tables (100-10K rows)

For feature-rich interactions:

  • Add filtering, pagination, and selection
  • Implement inline or modal editing
  • Use client-side operations up to 1K rows
  • Switch to server-side beyond 1K rows
  • Reference references/interactive-tables.md

Example: examples/sortable-filtered-table.tsx

Tier 3: Advanced Grids (10K+ rows)

For massive datasets:

  • Implement virtual scrolling
  • Use server-side aggregation
  • Add grouping and hierarchies
  • Consider enterprise solutions
  • Reference references/advanced-grids.md

Example: examples/virtual-scrolling-grid.tsx

Performance Optimization

Critical performance thresholds:

  • Client-side operations: <1,000 rows (instant, <50ms)
  • Server-side operations: 1,000-10,000 rows (<200ms API)
  • Virtual scrolling: 10,000+ rows (60fps, constant memory)
  • Streaming: 100,000+ rows (progressive rendering)

To benchmark performance:

bash
# Generate test data
python scripts/generate_mock_data.py --rows 10000

# Analyze rendering performance
node scripts/analyze_performance.js

For optimization strategies, reference references/performance-optimization.md.

Feature Implementation

Sorting
  • Single or multi-column sorting
  • Custom sort logic (numeric, date, natural)
  • Visual indicators and keyboard support
  • Reference references/sorting-filtering.md
  • Column-specific filters (text, range, select)
  • Global search across all columns
  • Advanced filter logic (AND/OR)
  • Reference references/sorting-filtering.md
Pagination
  • Client-side for small datasets
  • Server-side for large datasets
  • Infinite scroll alternative
  • Reference references/pagination-strategies.md
Selection & Bulk Actions
  • Single or multi-row selection
  • Range selection (Shift+click)
  • Bulk operations toolbar
  • Reference references/selection-patterns.md
Inline Editing
  • Cell-level or row-level editing
  • Validation and error handling
  • Optimistic updates
  • Reference references/editing-patterns.md
Export
  • CSV, Excel, PDF formats
  • Preserve formatting and encoding
  • Stream large exports
  • Run scripts/export_table_data.py
Show full SKILL.md (246 more words)Show less

Accessibility Requirements

Essential WCAG compliance:

  • Semantic HTML with proper structure
  • ARIA grid pattern for interactive tables
  • Full keyboard navigation
  • Screen reader announcements

To validate accessibility:

bash
node scripts/validate_accessibility.js

For complete requirements, reference references/accessibility-patterns.md.

Responsive Design

Four proven strategies:

  1. Horizontal scroll - Simple, preserves structure
  2. Card stack - Transform rows to cards on mobile
  3. Priority columns - Hide less important columns
  4. Truncate & expand - Compact with details on demand

See examples/responsive-patterns.tsx for implementations. Reference references/responsive-strategies.md for details.

Library Recommendations

Primary: TanStack Table (Headless)

Best for custom designs and complete control:

  • TypeScript-first with excellent DX
  • Small bundle size (~15KB)
  • Framework agnostic
  • Virtual scrolling support
bash
npm install @tanstack/react-table

See examples/tanstack-basic.tsx for setup.

Enterprise: AG Grid

Best for feature-complete solutions:

  • Handles millions of rows
  • Built-in advanced features
  • Community (free) + Enterprise (paid)
  • Excel-like user experience
bash
npm install ag-grid-react

See examples/ag-grid-enterprise.tsx for setup.

For detailed comparison, reference references/library-comparison.md.

Design Token Integration

Tables use the design-tokens skill for consistent theming:

  • Color tokens for backgrounds, borders, and states
  • Spacing tokens for cell padding
  • Typography tokens for text styling
  • Shadow tokens for elevation

Supports light, dark, high-contrast, and custom themes. Reference the design-tokens skill for theme switching.

Working Examples

Start with the example matching the requirements:

simple-responsive-table.tsx    # Basic HTML table
sortable-filtered-table.tsx    # With sorting and filtering
paginated-server-table.tsx      # Server-side pagination
virtual-scrolling-grid.tsx      # High-performance for 100K+ rows
editable-data-grid.tsx         # Inline editing with validation
grouped-aggregated-table.tsx   # Hierarchical with aggregations

Testing Tools

Generate test data:

bash
python scripts/generate_mock_data.py --rows 100000 --columns 20

Benchmark performance:

bash
node scripts/analyze_performance.js --rows 10000

Validate accessibility:

bash
node scripts/validate_accessibility.js

Next Steps

  1. Determine the data volume and feature requirements
  2. Select the appropriate implementation tier
  3. Choose between TanStack Table (flexibility) or AG Grid (features)
  4. Start with the matching example file
  5. Implement core features progressively
  6. Test performance and accessibility
  7. Apply responsive strategy for mobile

© ancoleman, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 32 other files (scripts, references, assets) in skills/building-tables of ancoleman/ai-design-components.

  • SKILL.md
  • assets/sample-data.csv
  • assets/table-config-schema.json
  • examples/ag-grid-enterprise.tsx
  • examples/basic-sortable-table.tsx
  • examples/editable-cells.tsx
  • examples/paginated-table.tsx
  • examples/responsive-patterns.tsx
  • examples/server-side-sorting.tsx
  • examples/simple-responsive-table.tsx
  • examples/sortable-filtered-table.tsx
  • examples/table-state-persistence.tsx
  • examples/tanstack-basic.tsx
  • examples/virtual-scrolling-grid.tsx
  • examples/virtual-scrolling.tsx
  • outputs.yaml
  • references/accessibility-patterns.md
  • references/advanced-grids.md
  • … and 15 more

Open the folder on GitHubat commit 76551b7

Compare with similar skills

Building Tables next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Building Tables compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Building Tables this skillancoleman/ai-design-components526—~1.8kAutomated safety check: PassMIT
Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill130—~3kAutomated safety check: PassMIT
Better Designmarvkr/better-design254—~1.2kAutomated safety check: PassMIT
UI Design Systemtry-works/role-model118—~5kAutomated safety check: PassMIT
Frontend Design Principlespretend1111/claude-desktop-app4941 repos~824Automated safety check: PassCustom licence
UI UX Pro MaxOhh-889/skyroc7956 repos~14kAutomated safety check: PassMIT

Similar skills

  • Material Design 3 UI/UX Guide

    skydashnet/material-design-3-ui-skill

    Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.

    130 GitHub stars~3k tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed

  • Better Design

    marvkr/better-design

    Build, improve, and review production interfaces with the Better Design MCP.

    254 GitHub stars~1.2k tokensUpdated 16 days ago
    Frontend & DesignAuto-check passed

  • UI Design System

    try-works/role-model

    React UI component systems with TailwindCSS + Radix + shadcn/ui.

    118 GitHub stars~5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Frontend Design Principles

    pretend1111/claude-desktop-app

    Gives practical design rules for polished HTML, CSS and JavaScript interfaces and browser games, covering spacing, type, color, components, motion and responsive breakpoints.

    494 GitHub starsUsed in 1 repo~824 tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    Ohh-889/skyroc

    UI/UX design intelligence for web, mobile, and desktop. An agent skill from Ohh-889/skyroc.

    795 GitHub starsUsed in 6 repos~14k tokens
    Frontend & DesignAuto-check passed

  • Acarshub Design Language

    sdr-enthusiasts/docker-acarshub

    Use ONLY when working in the docker-acarshub repository AND building UI -- React components, SCSS modules, theme variables, accessibility, mobile responsiveness, Catppuccin color usage, Zustand…

    117 GitHub stars~1.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from ancoleman/ai-design-components

All 75 skills in this repo

  • Building AI Chat

    ancoleman/ai-design-components

    Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support.

    526 GitHub starsUsed in 1 repo~3.4k tokens
    Auto-check passed

  • Building Forms

    ancoleman/ai-design-components

    Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages.

    526 GitHub stars~3.7k tokensUpdated 10 mo ago
    Auto-check passed

  • Creating Dashboards

    ancoleman/ai-design-components

    Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts.

    526 GitHub stars~3.5k tokensUpdated 10 mo ago
    Auto-check passed

  • Designing Layouts

    ancoleman/ai-design-components

    Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints.

    526 GitHub stars~1.7k tokensUpdated 10 mo ago
    Auto-check passed

  • Displaying Timelines

    ancoleman/ai-design-components

    Displays chronological events and activity through timelines, activity feeds, Gantt charts, and calendar interfaces.

    526 GitHub stars~2.7k tokensUpdated 10 mo ago
    Auto-check passed

  • Guiding Users

    ancoleman/ai-design-components

    Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive disclosure patterns.

    526 GitHub stars~3.5k tokensUpdated 10 mo ago
    Auto-check passed

Works with

Categories

Questions about Building Tables

What does Building Tables do?

Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids. Building Tables is an agent skill from ancoleman/ai-design-components. Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids.

When should I use Building Tables?

Building Tables fits situations like: creating tables; implementing sorting/filtering/pagination; handling large datasets (10-1M+ rows); building spreadsheet-like interfaces.

How do I install Building Tables in Claude Code?

Run `npx skills add ancoleman/ai-design-components --skill building-tables -a claude-code`. Or copy the skill folder (skills/building-tables in ancoleman/ai-design-components) into .claude/skills/building-tables in your project. Claude Code loads it when a task matches its description.

How do I install Building Tables in Codex?

Run `npx skills add ancoleman/ai-design-components --skill building-tables -a codex`. Or copy the skill folder (skills/building-tables in ancoleman/ai-design-components) into .agents/skills/building-tables in your project. Codex loads it when a task matches its description.

Can I use Building Tables in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ancoleman/ai-design-components --skill building-tables -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/building-tables, .gemini/skills/building-tables, .github/skills/building-tables and .opencode/skills/building-tables in your project.

What does Building Tables need to run?

Going by SKILL.md and its folder, Building Tables needs the command-line tools its instructions call (node, python and npm). Our summary lists: Python 3; Node.js.

Does Building Tables access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Building Tables safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Building Tables use?

Building Tables is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Building Tables use?

About 1.8k tokens (SKILL.md is roughly 7.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 30k tokens, read only when the agent opens those files.

What are the alternatives to Building Tables?

Skills that share tags, products or a category with Building Tables: Material Design 3 UI/UX Guide (skydashnet/material-design-3-ui-skill, 130 stars), Better Design (marvkr/better-design, 254 stars), UI Design System (try-works/role-model, 118 stars) and Frontend Design Principles (pretend1111/claude-desktop-app, 494 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Building Tables?

ancoleman (a GitHub user) maintains it in ancoleman/ai-design-components, which has 526 GitHub stars. The repository holds 75 skills in this directory. The repository was last updated on December 11, 2025.

Source: ancoleman/ai-design-components on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.