pimcore-studio-ui-react-components

What problem does it solve?

Pimcore Studio UI component development often lacks a unified structure and clear conventions; this Skill provides a standardized approach to building, organizing, and maintaining React components within Pimcore Studio UI to ensure consistency and quality across projects.

Core Features & Use Cases

• Component file structure and folder organization: enforce a folder-per-component layout to group related files (tsx, styles, stories).
• CSS-in-JS with separate styles file: mandate a dedicated .styles.tsx for all component styling using the antd-style approach.
• Props typing with interfaces: require explicit TypeScript interfaces for component props to improve type safety and editor guidance.
• ForwardRef and advanced patterns: outline patterns for forwardRef, memoization, and render strategy for complex components.
• Export patterns and composition: define export conventions and how to compose sub-components under a single module.

Quick Start

Create a new component under the Pimcore Studio UI components directory following the folder structure with a main .tsx file and a separate .styles.tsx file.