skills.rest
AJV009
AJV009COMMUNITY
Explore all skills by this author →
Website𝕏@alphons009GitHub

canvas-styling-conventions

Apply Tailwind theme tokens and CVA variants to Canvas components.

1|Updated Mar 22, 2026
Search Tags:#style#canvas#tailwind#design-system#cva#theme-tokens
One-click install
npx skills add https://github.com/AJV009/drupal-devkit --skill canvas-styling-conventions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-styling-conventions
Source: https://github.com/AJV009/drupal-devkit/tree/main/plugins/migrate-drupal-canvas/reference/canvas-starter/canvas-styling-conventions
Command: npx skills add https://github.com/AJV009/drupal-devkit --skill canvas-styling-conventions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canvas component styling often requires repetitive setup to ensure consistent design tokens across a project. This skill provides a structured approach to applying Tailwind CSS 4 theme tokens and approved utility patterns to Canvas components, reducing boilerplate and ensuring design consistency.

Core Features & Use Cases

  • Applies Tailwind theme tokens defined in global.css to component styles
  • Supports CVA variants and cn() utility for robust, reusable styling
  • Use case: create a new Canvas component with consistent theming and accessible color combinations

Quick Start

Load this skill and start applying Tailwind theme tokens and CVA variants to a new Canvas component.

Frequently Asked Questions about canvas-styling-conventions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply Tailwind theme tokens to Canvas components?▼

Maintain UI consistency across Canvas-driven projects by enforcing the use of @theme variables, CVA variants, and the cn() utility, which together ensure predictable and reusable component styling.

Can I use CVA variants and the cn() utility for Canvas component styling?▼

Yes, you can use CVA variants and the cn() utility for Canvas component styling to create robust, reusable design patterns that ensure predictable styling and accessible color combinations.

What is the best way to create a new Canvas component with consistent theming?▼

The best way to create a new Canvas component with consistent theming is to apply Tailwind CSS 4 theme tokens and approved utility patterns, reducing boilerplate and ensuring design consistency across the project.

How do I update Canvas component designs to use global.css theme variables?▼

Update Canvas component designs by applying Tailwind theme tokens defined in your global.css file, enforcing the use of @theme variables to ensure predictable styling and maintain design system tokens.

Related Skills

Explore More Design & Creative Skills→
jubalmjubalm
1

shadcn/ui Customization & Theming

Configure CSS variable-based theming for shadcn/ui components with Tailwind.

Community
Advanced
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
sebasmzgsebasmzg

tailwind-4

Enforce Tailwind CSS 4 semantic theme classes and cn-style merging in React components.

Community
Basic
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced