frontend-demos-structure

Documents the frontend structure of Think TARS demos and Playground.

Updated Aug 27, 2026

Search Tags:#React #frontend #structure #demos #Vite #Playground

Ready to run

npx skills add https://github.com/freddomingues/think-tars --skill frontend-demos-structure

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-demos-structure
Source: https://github.com/freddomingues/think-tars/tree/main/.cursor/skills/frontend-demos-structure
Command: npx skills add https://github.com/freddomingues/think-tars --skill frontend-demos-structure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill documents the frontend structure of Think TARS demos — site (Início, Sobre, Projetos, Contato) and the Playground where clients test AI assistants — to help developers quickly locate files and understand the frontend layout.

Core Features & Use Cases

Frontend folder map: shows the main files and folders, including frontend/index.html, frontend/package.json, frontend/vite.config.js, public/, and src/ with main.jsx, App.jsx, and index.css.
Stack and entry points: React 18, Vite 5; build output in frontend/dist; base URL /demos/.
Onboarding and debugging: useful when onboarding new team members or making changes to the Playground UI or site structure.

Quick Start

Navigate to the frontend/ directory and review App.jsx and index.css to understand how the UI is wired, or modify CSS variables in index.css to adjust the theme.

Frequently Asked Questions about frontend-demos-structure

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

FAQPage Schema

How do I navigate the frontend structure of a React and Vite project?▼

To navigate the frontend structure of a React and Vite project, review the App.jsx and index.css files to understand UI wiring, and check vite.config.js for build configurations like the base URL and output directory.

Where are the main entry points for a React 18 and Vite 5 application?▼

The main entry points for a React 18 and Vite 5 application are typically found in the src/ directory, specifically main.jsx for bootstrapping and App.jsx for the root component, with global styles managed in index.css.

What do I need to know to onboard to an existing React frontend codebase?▼

To onboard to an existing React frontend codebase, you need familiarity with React, Vite, and standard project layouts, allowing you to quickly locate files and understand conventions used in the repository's site and Playground components.

How do I adjust the theme of a React application using CSS variables?▼

To adjust the theme of a React application using CSS variables, navigate to the index.css file in the src/ directory and modify the existing CSS variables to immediately reflect changes across the UI components.

Does a Vite build output work with a specific base URL configuration?▼

A Vite build output works with a specific base URL configuration by setting the base path in vite.config.js, such as /demos/, which ensures assets are correctly resolved when deployed to the frontend/dist directory.