components

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

Use when: setting up @g4rcez/components in a new project, migrating native HTML elements or hand-rolled UI to this design system, building any React UI that should use @g4rcez/components, or when the user's project already has @g4rcez/components as a dependency. Covers installation, plain CSS component chunks, stable selector contracts, token customization, legacy Tailwind v3/v4 setup, theming with createTokenStyles/TokenRemap, ComponentsProvider/tweaks, parsers, the full component catalog (components, hooks, React, UI, design-system, tokens, Tailwind, forms, modals, notifications, tables, calendar, theming), and native-element migration.

always use this skill when creating new components, modifying existing components, adding styling, working with design tokens, migrating CSS, or doing anything related to this component library. Use this before writing any component code. Enforce the token-first design system: prioritize `packages/lib/src/styles/tokens.css`, follow the simplified CSS-variable usage pattern from `packages/lib/src/components/display/card/card.css`, derive component tokens from base tokens with `calc()`, avoid two-level variable alias/fallback chains, never use `color-mix()`, prefer broadly supported `hsla()` color tokens, and preserve the shadcn/ui mindset of semantic tokens that are easy to theme rather than hardcoded values.

ALWAYS use this skill when creating, editing, migrating, reviewing, or auditing design tokens or component CSS in this repository. Use for any task touching `packages/lib/src/styles/tokens.css`, `packages/lib/src/components/**/*.css`, component theme variants, CSS variable naming, `DESIGN_TOKEN_MIGRATIONS.md`, or requests about token hierarchy. Enforces the project token model: prefer existing `--var-*` tokens from `tokens.css`, create new semantic DOM-role tokens there only when necessary, derive sizes with `calc()` from base tokens, avoid deep CSS variable chains, never use `color-mix()`, and use broadly supported `hsla(...)` color tokens.

Use when: setting up @g4rcez/components in a new project, migrating native HTML elements or hand-rolled UI to this design system, building any React UI that should use @g4rcez/components, or when the user's project already has @g4rcez/components as a dependency. Covers installation, plain CSS setup, theming with createTokenStyles/TokenRemap, ComponentsProvider/tweaks, parsers, the full component catalog (components, hooks, React, UI, design-system, tokens, forms, modals, notifications, tables, calendar, theming), and native-element migration.

Use when: setting up @g4rcez/components in a new project, migrating native HTML elements or hand-rolled UI to this design system, building any React UI that should use @g4rcez/components, or when the user's project already has @g4rcez/components as a dependency. Covers installation, plain CSS setup, theming with createTokenStyles/TokenRemap, ComponentsProvider/tweaks, parsers, the full component catalog (components, hooks, React, UI, design-system, tokens, forms, modals, notifications, tables, calendar, theming), and native-element migration.

ALWAYS use this skill when creating new components, modifying existing components, adding styling, working with design tokens, or doing anything related to this component library. Use this before writing any component code.