What problem does it solve? When building admin interfaces in a project using @dextinity/admin, developers often fall back to custom sx props, inline styles, hard-coded pixel values, and Box-based layouts, which produces inconsistent screens and markup that is hard to review and upgrade. This Skill guides the AI to always prefer Dextinity's theme tokens, ready-made components, and helpers over hand-written CSS. ## Core Features & Use Cases - Component-first UI construction: Use Dextinity components such as MainContent, Toolbar, FieldSet, FormSection, DataGrid, Alert, Dialog, and specialized buttons (SaveButton, DeleteButton) instead of assembling equivalents from Box and custom CSS. - Theme-driven styling: Apply spacing, palette, elevation, and typography tokens from the Dextinity theme, write custom styling only with named styled() components, and customize existing components through slotProps or theme styleOverrides. - Internationalization and layout: Format text, numbers, and dates with react-intl helpers, and arrange content with Stack and Grid rather than manual margins and flex math. - Use Case: When asked to add a dashboard page with a data grid, toolbar actions, and a form dialog, the Skill produces markup built from StackMainContent, Toolbar parts, FieldSet, and Dextinity pickers, with all text translated via FormattedMessage. ## Quick Start Build an admin page with a toolbar, a full-height data grid, and a save form using @dextinity/admin components and theme values instead of custom CSS.
