skills.rest
marcogonzalo
marcogonzaloCOMMUNITY
Explore all skills by this author →
Website𝕏@MarcoGonzaloGitHub

veta-frontend-components

Standardize Veta frontend UI components with Tailwind v4 tokens and motion helpers.

1|Updated Nov 26, 2025
Search Tags:#theming#tailwind css#ui components#semantic tokens#next-themes#framer motion#shadcn/radix
One-click install
npx skills add https://github.com/marcogonzalo/studio-manager --skill veta-frontend-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: veta-frontend-components
Source: https://github.com/marcogonzalo/studio-manager/tree/main/.agents/skills/veta-frontend-components
Command: npx skills add https://github.com/marcogonzalo/studio-manager --skill veta-frontend-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It standardizes how your Veta frontend components are built and styled, preventing UI drift and inconsistent theming across pages, marketing sections, and app views.

Core Features & Use Cases

  • Tailwind v4 + semantic tokens: Use bg-background, text-foreground, and brand CSS variables to keep styling consistent across light/dark modes.
  • Shadcn/Radix composition rules: Build forms and UI primitives using the existing src/components/ui/* patterns and respect Radix semantics.
  • Motion helpers for polished UX: Apply AnimatedSection, stagger containers/items, and counters for scroll reveals and rhythm-aligned animations.

Quick Start

Ask the AI to generate a new UI component for your page using Veta’s Tailwind v4 semantic tokens, existing cn() patterns, and an appropriate motion helper while keeping Radix/Shadcn structure and light/dark usability intact.

Frequently Asked Questions about veta-frontend-components

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

FAQPage Schema
How do I standardize Tailwind CSS classes to prevent UI drift across my app?▼

Prevent UI drift by using semantic CSS variable utilities like bg-background and text-foreground, enforcing Radix/Shadcn composition rules, and applying a cn() utility for consistent class merging across all app views.

How do I set up consistent light and dark mode theming with Tailwind v4 and next-themes?▼

Set up light and dark mode theming by configuring next-themes via your layout component, defining brand CSS variables, and applying semantic tokens in Tailwind v4 to ensure consistent styling across modes.

How do I add scroll reveal animations to UI components using framer motion?▼

Add scroll reveal animations to UI components by applying framer motion helpers like AnimatedSection and stagger containers, which align rhythm and motion patterns for polished UX without manual animation logic.

Can I use shadcn/radix composition patterns for building reusable app views and marketing sections?▼

Yes, you can build reusable app views and marketing sections using existing src/components/ui/* patterns, respecting Radix semantics and Shadcn composition rules to maintain structural consistency and accessibility across your application.

Does this approach to UI component styling require a specific Tailwind CSS version?▼

Yes, this UI component styling approach requires a Tailwind v4 setup, utilizing semantic CSS variable utilities and brand tokens to maintain consistent light/dark mode behavior across all generated components.

Related Skills

Explore More Design & Creative Skills→
ProjectEuropaProjectEuropa
4

tailwind-patterns

Create CSS-first Tailwind v4 design systems with @theme blocks and container queries.

Community
Intermediate
MengToMengTo
4.5k

animation-systems

Design reusable web animation systems with motion primitives and reduced-motion support.

Community
Intermediate
nathanielcrowell12-specnathanielcrowell12-spec

shadcn

Implement shadcn/ui components with accessibility and theming for PhotoVault.

Community
Intermediate
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced