diff --git a/.claude/skills/click-ui.md b/.claude/skills/click-ui.md index 3073c606..cb361e13 100644 --- a/.claude/skills/click-ui.md +++ b/.claude/skills/click-ui.md @@ -10,7 +10,7 @@ alwaysApply: false ## Overview -Click UI is the official design system and component library for ClickHouse, built with React, TypeScript, and styled-components. This skill provides guidance for effectively using Click UI in development workflows. +Click UI is the official design system and component library for ClickHouse, built with React, TypeScript, and CSS Modules. This skill provides guidance for effectively using Click UI in development workflows. **Official Documentation**: https://clickhouse.design/click-ui **GitHub Repository**: https://github.com/ClickHouse/click-ui @@ -64,7 +64,7 @@ function App() { } ``` -**Note**: Click UI uses styled-components for styling, so no CSS import is required. The styles are injected automatically via JavaScript. +**Note**: Since 0.10, Click UI ships CSS Modules that each component imports itself, so no CSS import is required. All of its styles sit in one `clickui` cascade layer: unlayered app CSS always beats them, and Tailwind's layers lose to them. ## Core Architecture Concepts @@ -509,13 +509,13 @@ const [open, setOpen] = useState(false) ## Critical: Avoid Custom CSS -**NEVER write custom CSS or styled-components unless absolutely necessary.** Click UI provides components for almost every use case. When you must customize: +**NEVER write custom CSS unless absolutely necessary.** Click UI provides components for almost every use case. When you must customize: ### Hierarchy of Approaches (Best to Worst) 1. **Use existing Click UI components** - Check if a component already exists 2. **Use component props** - Most components have extensive prop options -3. **Extend with styled-components** - Only for adding theme-aware styles +3. **Extend with Tailwind classes on theme tokens** - Only for adding theme-aware styles 4. **Inline styles** - Only for one-off positioning tweaks 5. **Custom CSS** - Last resort, avoid if possible @@ -523,12 +523,9 @@ const [open, setOpen] = useState(false) ```typescript // WRONG - Don't rebuild what Click UI provides -const CustomDropdown = styled.div` - background: white; - border: 1px solid #ccc; - border-radius: 4px; - /* ... 50 more lines of CSS ... */ -`; +const CustomDropdown = () => ( +
{/* ... 50 more lines ... */}
+); // CORRECT - Use the Select component