skills.rest
minhcopilot
minhcopilotCOMMUNITY
Explore all skills by this author →
GitHub

mobile

Render responsive mobile tables and UI components with CSS breakpoints.

1|Updated Dec 30, 2025
Search Tags:#CSS#responsive#UI components#design-system#mobile UI#table patterns
One-click install
npx skills add https://github.com/minhcopilot/antigravity --skill mobile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile
Source: https://github.com/minhcopilot/antigravity/tree/main/skills/mobile
Command: npx skills add https://github.com/minhcopilot/antigravity --skill mobile

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams design responsive mobile interfaces that present data in tables clearly on small screens, reducing horizontal scrolling and readability issues.

Core Features & Use Cases

  • Responsive table patterns for mobile screens: collapsible rows, horizontal-to-vertical data presentation.
  • Standard UI component styling guidance: consistent typography, spacing, and interactions across devices.
  • Use Case: Turn a large on-device data table into a compact mobile-friendly view without losing data fidelity.

Quick Start

Use the mobile skill to adapt a dataset to a responsive mobile table, or reference the patterns in docs/solutions/patterns/individual/pattern-18-mobile-table-responsiveness.md

Frequently Asked Questions about mobile

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

FAQPage Schema
How do I make responsive tables for mobile screens without horizontal scrolling?▼

You can create responsive tables for mobile screens by applying mobile-first CSS breakpoints and using collapsible rows to shift horizontal data into a vertical presentation. This pattern reduces scrolling and keeps data legible on small screens.

What are the best UI component patterns for displaying data lists on small screens?▼

The best UI component patterns for small screens include compact cards, lists, and collapsible table rows. These patterns apply consistent typography and spacing to keep data legible without losing fidelity.

Can I use standard CSS breakpoints to adapt large data tables for mobile devices?▼

Yes, you can use mobile-first CSS breakpoints to adapt large data tables for mobile devices. This approach relies on standard UI component patterns to render responsive layouts, ensuring data remains legible on small screens.

How do I convert horizontal table data into a vertical layout for mobile UIs?▼

To convert horizontal table data into a vertical layout for mobile UIs, apply horizontal-to-vertical data presentation patterns. This technique uses collapsible rows to restructure wide datasets into a compact, readable mobile-friendly view.

Does this mobile UI skill require external dependencies to render responsive components?▼

No, this mobile UI skill requires no external dependencies to render responsive components. It relies solely on mobile-first CSS breakpoints and standard UI component patterns defined internally to guide the implementation.

Related Skills

Explore More Design & Creative Skills→
patricio0312revpatricio0312rev
5

responsive-design-system

Defines and implements mobile-first design systems with Tailwind CSS.

Community
Advanced
ncsound919ncsound919

frontend-design

Design frontend interfaces and components for React or HTML/CSS.

Community
Advanced
santychuycomsantychuycom

responsive-design

Implement mobile-first responsive layouts with CSS Grid and container queries.

Official
Intermediate
JDL440JDL440

Dashboard Mobile Patterns

Implements mobile-first dashboard patterns with HTML, CSS and JS examples.

Community
Advanced