skills.rest
open-metadata
open-metadataOFFICIAL
Explore all skills by this author →
Website𝕏@open_metadataGitHub

ui-core-components

Guides React/TSX layout code toward Box, Grid, Card, and Divider primitives with semantic color tokens.

15.1k|2.3k|Updated Aug 1, 2021
Search Tags:#Tailwind#OpenMetadata#TSX#layout components#reAct#Dark mode#Design tokens
One-click install
npx skills add https://github.com/open-metadata/OpenMetadata --skill ui-core-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-core-components
Source: https://github.com/open-metadata/OpenMetadata/tree/main/skills/ui-core-components
Command: npx skills add https://github.com/open-metadata/OpenMetadata --skill ui-core-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

When writing or editing React/TSX in the OpenMetadata UI, agents and developers default to raw <div> elements with Tailwind utility classes and hardcoded palette colors, which duplicates existing layout primitives and breaks dark-mode theming.

Core Features & Use Cases

  • Layout primitive mapping: Maps raw flex/grid div patterns to Box, Grid/Grid.Item, Card, and Divider components from @openmetadata/ui-core-components, with prop-level documentation (direction, gap, span, variant, size).
  • Semantic color enforcement: Replaces raw Tailwind palette classes (tw:bg-gray-50, tw:text-red-600) and hex values with semantic tokens (tw:bg-primary, tw:text-error-primary) that remap automatically in dark mode.
  • Use Case: While adding a new panel to a page in openmetadata-ui, consult this Skill to build the layout with <Card> and <Box gap={4}> instead of nested flex divs, and style it with semantic tokens so it renders correctly in dark mode.

Quick Start

Ask the assistant to review or write the layout markup for your React component using the ui-core-components primitives and semantic color tokens instead of raw divs and Tailwind palette classes.

Frequently Asked Questions about ui-core-components

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

FAQPage Schema
How do I replace flex divs with layout components in OpenMetadata UI?▼

Replace `<div className="tw:flex ...">` with the `Box` component from `@openmetadata/ui-core-components`, passing layout through props like `direction`, `align`, `justify`, and `gap`. Use `direction="col"` for column layouts and the Tailwind spacing scale for gaps.

What components does @openmetadata/ui-core-components provide?▼

The package provides `Box` for flex layouts, `Grid` and `Grid.Item` for 24-column grid layouts, `Card` with Header/Content/Footer subcomponents, and `Divider` for horizontal or vertical separators with optional labels.

Should every div be replaced with a Box component?▼

No. Only layout container divs whose className is mostly flex/grid/gap/alignment utilities should use a primitive. Single non-layout divs, text wrappers, icon wrappers, and components built from antd or other external libraries should be left alone.

Why avoid raw Tailwind color classes like tw:bg-gray-50?▼

Raw palette classes and hex values do not remap in dark mode. Semantic tokens like `tw:bg-primary`, `tw:text-quaternary`, and `tw:border-error` automatically adjust via the `.dark-mode` class, keeping styling consistent across themes.

How do I build a grid layout with Grid and Grid.Item?▼

Use `Grid` with `gap`, `rowGap`, or `colGap` props, and place content in `Grid.Item` children with a `span` prop out of 24 columns (default 24 for full width) plus an optional 1-indexed `start` column. Values are clamped to the 24-column track.

What should I run after changing UI layout code?▼

Run the `ui-checkstyle` skill on the changed files before committing. It lints and formats both the `openmetadata-ui` and `openmetadata-ui-core-components` trees to keep code style consistent.

Related Skills

Explore More Software Engineering Skills→
Jason-Clark-FGJason-Clark-FG

test-locally

Deploy a local OpenMetadata stack with Docker for connector testing.

Community
Advanced
is-ivanovis-ivanov
2

checkstyle-review

Review upstream Checkstyle configuration changes and recommend rule adoption decisions.

Community
Advanced
compozycompozy
2.5k

tailwindcss

Apply Tailwind CSS v4 design tokens and responsive utilities to UI components.

Official
Advanced
desdat1desdat1

tailwind

Builds cohesive dark-theme UI with Tailwind utility classes.

Community
Basic