Component Css Modules Migration

ClickHouse/click-ui/.claude/skills/component-css-modules-migration

designOfficial

Official Provider SkillView repo

Migrate a click-ui component from styled-components to CSS Modules with byte-for-byte visual regression coverage. Use whenever a component still uses styled-components and is on the CSS Modules migration list.

Files1 files

SKILL.md233 lines

Loading editor…

Install

Recommended

One command — your agent picks it up automatically.

Select AI agent

Select an AI agent above to see the install command.

Manual Install

More steps

Download the file and paste it into your agent's system prompt.

Skill details

Versionv1.0.0

AuthorClickHouse

Categorydesign

Skill IDClickHouse/click-ui/.claude/skills/component-css-modules-migration

Related skills

Component FixturesUse when creating or updating component fixtures for screenshot testing, or when designing UI components to be fixture-friendly. Covers fixture file structure, theming, service setup, CSS scoping, async rendering, and common pitfalls.Ux Css LayoutVS Code CSS conventions, file organization, class naming, standard sizes, SplitView/Grid layout, scrollable content, responsive layout, and text overflow/ellipsis patterns. Use when writing CSS, building layouts, or fixing text truncation issues.Ux ThemingVS Code theming, color tokens, widget styles, focus indicators, and high-contrast theme support. Use when registering colors, styling widgets with theme tokens, or ensuring HC/focus compliance.Brand GuidelinesApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.Frontend DesignGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.Add Adaptive Card FormCreate form-based UI for your Command Palette extension using Adaptive Cards. Use when asked to add forms, user input fields, toggle switches, text inputs, dropdown menus, data entry, surveys, configuration dialogs, or interactive content pages. Supports the Adaptive Cards Designer for visual form building.