cleen-ui-layout

To build a dashboard UI with @cleen/ui, use Card components for key metrics and a DataGrid for tables. Ensure the root element includes the .cleen scope wrapper and all Tailwind classes use the cleen- prefix for consistent styling conventions.

@cleen/ui layout components lose styling when the root element lacks the .cleen scope wrapper or Tailwind classes omit the cleen- prefix. Apply these standardized conventions to ensure components like Card and Divider render correctly.

Structure a settings page using @cleen/ui by utilizing pre-defined layout patterns for detail views. Implement core components like Card, Divider, and Avatar within the .cleen scoped root element to maintain consistent UI composition.

No, @cleen/ui layout components require the Tailwind cleen- prefix. The skill enforces Tailwind convention adherence, ensuring all utility classes are properly prefixed and the root element utilizes the .cleen scope wrapper for correct rendering.

Available @cleen/ui components for UI composition include Card, Divider, PillBadge, Avatar, and AvatarRow. These core layout components provide standardized patterns for building pages, dashboards, and settings views.

The best way to prevent building UI layouts from scratch is using standardized component guidance. This approach provides pre-defined patterns for pages and dashboards while enforcing essential Tailwind CSS prefixing and root element scoping conventions.