skills.rest
TOBIASpuchito
TOBIASpuchitoCOMMUNITY
Explore all skills by this author →
GitHub

citec-tailwind-system

Applies Tailwind tokens and CSS variables to CITEC Astro and React styling.

Updated Jun 9, 2026
Search Tags:#frontend#react#css#styling#design tokens#tailwind#astro
One-click install
npx skills add https://github.com/TOBIASpuchito/Citec --skill citec-tailwind-system-tobiaspuchito
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: citec-tailwind-system
Source: https://github.com/TOBIASpuchito/Citec/tree/main/citec-frontend/.codex/skills/citec-tailwind-system
Command: npx skills add https://github.com/TOBIASpuchito/Citec --skill citec-tailwind-system-tobiaspuchito

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend styling in the CITEC project can drift into inconsistent one-off CSS, duplicated class walls, and ad-hoc hex colors. This Skill enforces a single Tailwind-based styling architecture so Astro pages, React islands, and global styles stay consistent and maintainable. ## Core Features & Use Cases - Token-First Styling: Separates brand palette tokens (--citec-*) from semantic tokens (--color-*) and exposes them through tailwind.config.mjs only when utilities are genuinely needed. - Scope Classification: Directs simple spacing, layout, or responsive tweaks to local Tailwind classes while reserving tokens.css, global.css, and config edits for system-level design decisions. - Framework Conventions: Enforces class in Astro, className in React, data-* attributes for GSAP hooks, and shared utilities like glass-surface and shadow-soft before inventing new patterns. - Use Case: When refactoring a hero section with repeated inline hex colors and BEM selectors, the Skill guides conversion to semantic utilities like text-ink and bg-surface backed by design tokens. ## Quick Start Use the citec-tailwind-system skill to refactor this Astro component's styles to use CITEC Tailwind tokens and semantic utilities.

Frequently Asked Questions about citec-tailwind-system

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

FAQPage Schema
How do I refactor repeated Tailwind classes into a maintainable design system?▼

Classify the change scope first: keep one-off spacing or layout tweaks as local Tailwind classes, and only promote repeated system-level patterns into shared tokens or utilities. Put brand primitives in tokens.css and expose semantic tokens through tailwind.config.mjs when utilities like text-ink or bg-surface are needed.

When should I edit global CSS versus use Tailwind utility classes?▼

Use Tailwind utilities in the component for size, spacing, layout, responsive, or alignment changes. Reserve global.css for Tailwind imports, fonts, base html and body behavior, focus and selection styles, scrollbar treatment, and genuinely shared utilities reused across the site.

Can I use Tailwind v4 @theme syntax in a Tailwind 3.x project?▼

No, Tailwind v4-only @theme syntax is not supported while the project runs Tailwind 3.x. Expose tokens through tailwind.config.mjs instead, using RGB CSS variables with <alpha-value> for colors that need opacity modifiers.

Should I use class or className in Astro and React components?▼

Use class in .astro files and className in React components. Mixing them up breaks styling, and for GSAP or motion hooks prefer data-* attributes or refs rather than BEM-style selectors.

When is local CSS acceptable instead of Tailwind utilities?▼

Local CSS is allowed only when Tailwind is genuinely insufficient, such as complex clip-path, mask-image, advanced keyframes, specialized scrollbars, complex pseudo-elements, or third-party library hooks. Keep it inside the same component and minimal.

Related Skills

Explore More Software Engineering Skills→
themewagonthemewagon
1

tailwind

Enforce Tailwind v4 design tokens by replacing hardcoded colors and inline styles.

Official
Advanced
JannaelJannael
16

Bun

Run, bundle, test, and deploy JavaScript/TypeScript apps with Bun CLI.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-adaptive-state

Detects adaptive state accessibility and theming defects in web UI.

Community
Advanced
0xKobold0xKobold
4

tailwind-v4

Configure Tailwind CSS v4 with CSS-first design tokens and @theme.

Official
Advanced