skills.rest
JoaoPedroAmaral
JoaoPedroAmaralCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

liferay-clay-ui

Implement Liferay Clay UI components in React-based Portal frontends.

Updated Aug 27, 2026
Search Tags:#react#lexicon#ui-components#provider-pattern#liferay#clayui#fds
One-click install
npx skills add https://github.com/JoaoPedroAmaral/backBarbearia --skill liferay-clay-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: liferay-clay-ui
Source: https://github.com/JoaoPedroAmaral/backBarbearia/tree/main/.claude/skills/liferay-clay-ui
Command: npx skills add https://github.com/JoaoPedroAmaral/backBarbearia --skill liferay-clay-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Liferay Clay UI can be confusing to set up and use consistently across Liferay Portal projects, and developers need clear patterns for Provider setup, package imports, component composition, CSS conventions, and data integration to avoid layout regressions and accessibility issues.

Core Features & Use Cases

  • Provider Pattern: Explains mandatory Provider usage and spritemap configuration for SVG icons.
  • Package-specific Imports: Shows tree-shakable imports per @clayui package and warns against generic imports.
  • Component Patterns: Examples for modals, sortable tables, toolbars, forms, autocomplete, tree views, pickers, and card patterns.
  • Integration: Guidance for data fetching with useResource, FDS cell renderer integration, and accessibility/CSS best practices.
  • Anti-Patterns: Common mistakes to avoid, such as mixing conflicting Bootstrap classes or importing full CSS when unnecessary.

Quick Start

Import Provider from @clayui/core at your app entry, include the Clay CSS atlas stylesheet once, and set the Provider spritemap to your theme's icons.svg before rendering Clay components.

Frequently Asked Questions about liferay-clay-ui

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

FAQPage Schema
How do I set up the Clay UI Provider in a Liferay Portal React frontend?▼

To set up Clay UI in Liferay Portal, import Provider from @clayui/core at your app entry point and set the spritemap prop to your theme's icons.svg. Include the Clay CSS atlas stylesheet once before rendering any components.

What is the correct way to import Clay UI components in Liferay?▼

The correct way to import Clay UI components in Liferay is through package-specific, tree-shakable imports like @clayui/modal or @clayui/form. You should avoid generic imports to prevent bundle bloat and ensure optimal performance.

Can I use Liferay Clay UI with data fetching and FDS cell renderers?▼

Yes, Liferay Clay UI supports data fetching and FDS cell renderers. You can integrate data-driven lists using the useResource hook and apply specific integration patterns for FDS cell renderers to display dynamic table data.

Why does my Liferay Clay UI layout break when mixing Bootstrap classes?▼

Liferay Clay UI layouts break when mixing conflicting Bootstrap classes because Clay CSS has its own specific styling conventions. Mixing frameworks causes layout regressions and accessibility issues, so you should stick to Clay CSS atlas styles.

How do I build sortable tables and toolbars with Clay UI in Liferay?▼

To build sortable tables and toolbars with Clay UI in Liferay, use the component patterns provided by @clayui packages. The library offers specific examples for composing modals, forms, and data-driven lists while maintaining accessibility.

Related Skills

Explore More Software Engineering Skills→
Shaarav4795Shaarav4795

tailwind-theme-builder

Generate CSS-variable themes for Tailwind v4 with shadcn/ui in React.

Community
Intermediate
sachacoldiqsachacoldiq
242

n8n-clay-integration

Integrate Clay with n8n for automated data enrichment and workflow execution.

Community
Intermediate
sarojpundesarojpunde
4

polaris-ui-patterns

Generate reusable Polaris UI patterns for Shopify app pages.

Community
Intermediate
afonsolelisafonsolelis

bootstrap-guidelines

Enforce Bootstrap 5.3.0 conventions and prohibit custom CSS in HTML.

Community
Basic