skills.rest
yoyooyooo
yoyooyoooCOMMUNITY
Explore all skills by this author →
GitHub

frontend-project-init

Generate a runnable Vite frontend project from a Logix Sandbox template.

4|1|Updated Dec 11, 2025
Search Tags:#react#template generation#vite#sandbox#frontend scaffolding#workspace dependencies#logix
One-click install
npx skills add https://github.com/yoyooyooo/logix --skill frontend-project-init
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-project-init
Source: https://github.com/yoyooyooo/logix/tree/main/.codex/skills/frontend-project-init
Command: npx skills add https://github.com/yoyooyooo/logix --skill frontend-project-init

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill removes the repetitive setup work of creating a new frontend project and ensures the resulting project is immediately runnable with the correct Vite + Logix Sandbox wiring.

Core Features & Use Cases

  • One-command project scaffolding: Initializes a new Vite + React + Tailwind frontend from a built-in template without manually assembling config files.
  • Template-driven consistency: Uses a template ID (currently vite-logix-empty) to guarantee consistent dependency wiring and runtime setup.
  • Logix Sandbox runtime integration: Pre-includes the @logixjs/sandbox Vite kernel plugin and a minimal RuntimeProvider so the app boots with the expected Logix dev tooling.
  • Use Case: Quickly spin up a new example/Playground/PoC app inside your repo (starting from an empty UI shell), then add business modules afterward.

Quick Start

Run the init script to copy the default template into a new directory, for example: node .codex/skills/frontend-project-init/scripts/init-frontend-project.cjs examples/my-sandbox.

Frequently Asked Questions about frontend-project-init

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

FAQPage Schema
How do I scaffold a Vite and React frontend project quickly?▼

Scaffold a Vite and React frontend project by running the init script to copy a built-in template into a new directory. This generates a runnable workspace with correct dependency wiring and Tailwind setup instantly without manual config assembly.

What is Logix Sandbox runtime integration in a Vite project?▼

Logix Sandbox runtime integration pre-includes the @logixjs/sandbox Vite kernel plugin and a minimal RuntimeProvider so the app boots with expected dev tooling. It ensures the generated frontend project runs immediately with correct wiring.

Does frontend scaffolding overwrite existing files in the target directory?▼

Frontend scaffolding performs safe non-overwriting directory initialization, preserving existing files. It copies complete template files from the vite-logix-empty template while excluding common build artifacts for a clean setup.

Can I use this template generation for proof of concept repositories?▼

Use this template generation for proof of concept repositories, examples, and Playgrounds. It provides a consistent workspace-based setup starting from an empty UI shell, allowing you to add business modules afterward.

Do I need to manually configure workspace dependencies for a new Vite project?▼

Manual workspace dependencies configuration is unnecessary. Template-driven consistency using a template ID guarantees correct dependency wiring and runtime setup, removing repetitive configuration work for new frontend projects.

What limitations exist when initializing a frontend project from a Logix template?▼

Initialization is limited to the built-in vite-logix-empty template ID, providing an empty UI shell. You must add business modules manually afterward, and build artifacts are excluded from the copied template files.

Related Skills

Explore More Software Engineering Skills→
IngrammlIngramml

Documentation Structure

Generate standardized documentation templates and directory structures for repositories.

Community
Intermediate
brianiumbrianium

tsain

Drive REPL-based Clojure UI component development with alias-based workflows.

Community
Intermediate
wfvuewfvue
3

tailwindcss

Apply Tailwind CSS v4 utilities with Vite plugin integration for responsive and dark mode styling.

Community
Intermediate
117503445117503445
2

init-project

Initialize Go and React projects with predefined architecture patterns.

Community
Advanced