Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Guidelines for styling components and using CSS variables
Styling Guidelines and CSS Variables
This skill covers the styling conventions and best practices for the Canzeltly application, including the use of CSS variables and global styles.
CSS Variables
All styling in the Canzeltly application uses CSS custom properties (variables) defined in static/app.css. These variables ensure consistent theming and easy maintenance.
Important Warning
Never use CSS variables that do not exist in static/app.css. Always check the file for available variables before using them. Using non-existent variables will result in undefined styling and potential layout issues.
Global styles for common HTML elements are defined in src/client/styles.global.ts. This file contains styles for elements like <button>, <a>, <h1>, <p>, etc.
Key Rules
Component-Level Overrides: For <button>, <a>, and other common HTML elements, styling must be done in src/client/styles.global.ts rather than in individual components, unless there is a specific need for component-level overrides.
Consistency: All components should use the global styles as a base and only add specific styles when necessary.
Adding Global Styles
To add or modify global styles, edit src/client/styles.global.ts:
