skills.rest
PytaichukBohdan
PytaichukBohdanCOMMUNITY
Explore all skills by this author →
GitHub

game-board-table

Create themed Figma data table UIs for game boards with tab filters and scrollable rows.

Updated Mar 25, 2026
Search Tags:#figma#ui-design#data-table#leaderboard#design-pattern#bet-history
One-click install
npx skills add https://github.com/PytaichukBohdan/figma_board_connection --skill game-board-table
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: game-board-table
Source: https://github.com/PytaichukBohdan/figma_board_connection/tree/main/.claude/skills/game-board-table
Command: npx skills add https://github.com/PytaichukBohdan/figma_board_connection --skill game-board-table

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build data tables for game boards in Figma — leaderboard rankings, bet history, with tab filters and scrollable rows. Use for 'leaderboard', 'bet history table', 'game rankings', 'results table'. Self-sufficient.

Core Features & Use Cases

  • Reusable pattern for Leaderboard, My Bets, and Top rankings with a tab bar and scrollable data rows.
  • Includes header row with column labels and color-coded status/payout cues for quick interpretation.
  • Adapts to different game themes by deriving colors and typography from the game's identity and provides a mobile-friendly layout.

Quick Start

Create a new Figma board and apply the game-board-table pattern to render a tab-filtered leaderboard with header and scrollable rows.

Frequently Asked Questions about game-board-table

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

FAQPage Schema
How do I design a leaderboard table UI in Figma for a mobile game board?▼

Create a bet history table in Figma using a pattern that renders tab filters, column headers, and scrollable rows with color-coded status cues for quick interpretation of wins and losses.

What's the best way to structure game ranking data tables with tab filters in Figma?▼

Structure game ranking data tables in Figma using a reusable pattern with a tab bar for filtering, fixed and fill column widths, and a header row for clear column labeling.

Can I use this data table pattern for mobile frames in Figma?▼

Yes, the data table pattern is suitable for mobile frames in Figma, providing fixed and fill column widths along with scrollable rows to fit mobile-friendly layouts.

Does the game board table pattern support color-coded payouts for wins and losses?▼

Yes, the game board table pattern supports color-coded payouts for wins and losses, applying visual cues directly within the data rows for quick status interpretation.

How do I adapt a results table to match different game themes in Figma?▼

Adapt a results table to different game themes by deriving colors and typography from the game's identity, ensuring the leaderboard or rankings table matches the overall visual style.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

sega

Generates Sega-style design tokens, typography scales, and color palettes for game interfaces.

Community
Intermediate
PremModhaOfficialPremModhaOfficial
1

figma-to-code

Convert Figma design data into frontend templates and semantic design tokens.

Community
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
efekrbasefekrbas
41

dark-mode

Design dark-mode interfaces with semantic color tokens and accessible contrast.

Community
Intermediate