tdc-frontend

Generate Vue.js 3 components with Composition API, Vite, Tailwind CSS, and GSAP.

Updated Jan 8, 2026
One-click install
npx skills add https://github.com/Alex-65/tdcweb --skill tdc-frontend
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tdc-frontend
Source: https://github.com/Alex-65/tdcweb/tree/main/.claude/skills/tdc-frontend
Command: npx skills add https://github.com/Alex-65/tdcweb --skill tdc-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables rapid creation of Vue.js 3 frontend code for The Dreamer's Cave website, covering components, composables, stores, animations, and theming, reducing boilerplate and accelerating UI iterations.

Core Features & Use Cases

  • Component generation: Create Vue components following the project's Composition API pattern.
  • Composable and store scaffolding: Provide reusable logic with composables and Pinia stores.
  • Animation and theming: Integrate GSAP animations, Lenis smooth scrolling, and dynamic theming through a location-based theme system.
  • i18n and WYSIWYG: Include internationalization patterns and a TipTap-based rich text editor approach.

Quick Start

Create a new Vue 3 component named MyButton.vue using the script setup pattern, including a minimal template and Tailwind utility classes.

Frequently Asked Questions about tdc-frontend

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

FAQPage Schema
How do I scaffold Vue 3 components using Composition API and script setup?

To scaffold Vue 3 components using Composition API, use the script setup pattern with Vite and Tailwind CSS utility classes to generate minimal templates and reduce boilerplate for rapid UI creation.

What is the best way to add GSAP animations and Lenis smooth scrolling to Vue 3?

The best way to add GSAP animations and Lenis smooth scrolling to Vue 3 is by generating composables that encapsulate animation logic and scroll behaviors for dynamic page transitions.

Can I use Pinia for state management and Vue I18n for localization in the same project?

Yes, you can use Pinia for state management and Vue I18n for localization simultaneously by scaffolding dedicated stores and internationalization patterns within your Vue 3 application.

Does this Vue 3 scaffolding support a WYSIWYG rich text editor like TipTap?

Yes, this Vue 3 scaffolding supports a WYSIWYG rich text editor by integrating a TipTap-based approach to handle content creation within your generated components.

How do I implement dynamic theming based on locations in Vue 3?

To implement dynamic theming based on locations in Vue 3, generate a location-based theme system within your components that switches styles dynamically for pages like landing and events.

Why use composables with the Composition API for Vue 3 frontend development?

Using composables with the Composition API provides reusable logic for Vue 3 frontend development, reducing boilerplate and accelerating UI iterations across your application stores and components.