dextinity-core-admin-component-authoring

Author customizable @dextinity/admin components with MUI-style slots, theme overrides, and defaultProps.

52|9|Updated Mar 4, 2019
One-click install
npx skills add https://github.com/vivid-planet/dextinity --skill dextinity-core-admin-component-authoring-vivid-planet
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dextinity-core-admin-component-authoring
Source: https://github.com/vivid-planet/dextinity/tree/main/skills/dextinity-core-admin-component-authoring
Command: npx skills add https://github.com/vivid-planet/dextinity --skill dextinity-core-admin-component-authoring-vivid-planet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Components in @dextinity/admin that hardcode markup and styling silently break all three MUI customization paths (per-instance sx/className, theme styleOverrides, and theme defaultProps), and the gap is only discovered later when a consumer tries to customize them. This Skill ensures every component is built with the slot and theme machinery from the start. ## Core Features & Use Cases - Slot-based component construction: Guides building each visual slot with createComponentSlot and typing props via ThemedComponentBaseProps so consumers get slotProps and root sx/className. - Theme integration verification: Ensures props flow through useThemeProps and the component is registered in MUI's theme types (ComponentsPropsList, ComponentNameToClassKey, Components) for typed styleOverrides and defaultProps. - Ten-point review checklist: Catches the most common review findings, including prop spread ordering, ownerState usage, classesResolver modifier classes, overridable iconMapping, and consistent DextinityAdmin<Name> naming. - Use Case: When adding a new component to @dextinity/admin, admin-color-picker, admin-date-time, or admin-rte, follow the checklist to guarantee consumers can restyle every instance through the theme and override individual instances. ## Quick Start Use this skill to author a new customizable component in @dextinity/admin and verify it against the ten-point checklist before submitting for review.

Frequently Asked Questions about dextinity-core-admin-component-authoring

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

FAQPage Schema
How do I create a customizable component in @dextinity/admin?

Build each visual slot with createComponentSlot, extend ThemedComponentBaseProps in the props type, read props through useThemeProps, and register the component in MUI's theme type interfaces. The referenced documentation file contains the full conventions and worked code examples.

How do I add theme styleOverrides and defaultProps support to a React component?

Use createComponentSlot for each slot so styleOverrides connect, read props via useThemeProps with a DextinityAdmin-prefixed name so defaultProps merge, and add the component key to ComponentsPropsList, ComponentNameToClassKey, and Components for type safety.

Which packages does the dextinity slot and theme machinery apply to?

It applies to @dextinity/admin and the sibling packages that use it: admin-color-picker, admin-date-time, and admin-rte. Other packages under packages/admin/, such as cms-admin, do not use this pattern and are out of scope.

When should I not use this component authoring skill?

Do not use it when building admin UI in a project that consumes @dextinity/admin, such as pages, dashboards, or dialogs composing existing components. That work belongs to the dextinity-admin-ui skill, which covers a different job with different rules.

Why do theme defaultProps not apply to my component?

DefaultProps fail when the component reads raw inProps instead of passing them through useThemeProps. The name passed to useThemeProps must also exactly match the DextinityAdmin<Name> key registered in the theme type interfaces.

How do I make component icons overridable by consumers?

Expose an iconMapping prop whose keys describe what each icon is for. Destructure each entry with an Icon suffix and a default value so the component works without a mapping but every icon can be replaced.