Component Css Modules Migration

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

designResmi

Resmi Sağlayıcı Skill'iView 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.

Dosyalar1 dosya

SKILL.md236 satır

Loading editor…

Kurulum

Önerilen

Tek komut — ajanınız otomatik olarak devreye alır.

AI aracını seç

Kurulum komutunu görmek için yukarıdan bir AI aracı seçin.

veya

Manuel Kurulum

Daha fazla adım

Dosyayı indirin ve ajanınızın sistem istemine yapıştırın.

Skill detayları

Versiyonv1.0.0

YazarClickHouse

Kategoridesign

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

İlgili skill'ler

Component FixturesUse when creating or updating component fixtures for screenshot testing or their shared infrastructure, or when designing UI components to be fixture-friendly. Covers fixture file structure, theming, service setup, CSS scoping, async rendering, validation, and common pitfalls.Design PhilosophyThe VS Code design philosophy — a shared Values→Principles→Moves vocabulary for reasoning about UI in design terms instead of raw pixels. Use when designing, building, reviewing, or giving feedback on any visual surface; when deciding a radius, spacing, type role, icon size, border, color, or motion; or when translating a "this feels off" observation into a concrete, principled fix.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.