skills.rest
BamoJ
BamoJCOMMUNITY
Explore all skills by this author →
Website𝕏@bamojkGitHub

new-project

Bootstrap a new WebGL project from a starter template for Webflow integration.

Updated Feb 13, 2026
Search Tags:#project setup#boilerplate#webgl#three.js#gsap#webflow
One-click install
npx skills add https://github.com/BamoJ/playfight-2k26 --skill new-project-bamoj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-project
Source: https://github.com/BamoJ/playfight-2k26/tree/main/.claude/skills/new-project
Command: npx skills add https://github.com/BamoJ/playfight-2k26 --skill new-project-bamoj

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the setup of new WebGL-enabled websites by providing a robust boilerplate and clear instructions for integrating with Webflow.

Core Features & Use Cases

  • Project Scaffolding: Clones a starter repository and guides through initial configuration.
  • Page Integration: Helps create and register new WebGL page subclasses for dynamic content.
  • Webflow Data Attributes: Details essential data attributes for seamless Webflow and WebGL interaction.
  • Use Case: When starting a new client project that requires a custom WebGL experience, use this Skill to quickly set up the project structure, define pages, and connect it to the Webflow design.

Quick Start

Clone the starter repository and follow the step-by-step checklist to configure your new project.

Frequently Asked Questions about new-project

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

FAQPage Schema
How do I bootstrap a new WebGL project integrated with Webflow?▼

To bootstrap a new WebGL project, you clone a starter repository and follow a step-by-step checklist to configure project settings, register page subclasses, and implement Webflow data attributes for seamless animations.

How do I create and register new pages for my WebGL site?▼

Creating new WebGL pages involves generating page subclasses and registering them within the project configuration, enabling dynamic content integration between your custom WebGL experience and the Webflow design.

What Webflow data attributes are needed for WebGL transitions and animations?▼

Essential Webflow data attributes are required to facilitate seamless interaction between Webflow elements and your custom WebGL experience, ensuring smooth page transitions and dynamic animations.

Do I need prior experience with Three.js or GSAP to use this WebGL boilerplate?▼

Working knowledge of Three.js and GSAP is beneficial, as the project setup involves integrating custom WebGL experiences and animations using these libraries within a structured boilerplate environment.

What is the best way to scaffold a custom WebGL experience for a client website?▼

Scaffolding a custom WebGL client project is best handled by using a robust boilerplate starter template, which quickly establishes the project structure and defines necessary page connections to the Webflow design.

Why use a starter template for setting up WebGL and Webflow integration?▼

Using a starter template streamlines the setup of WebGL-enabled websites by providing clear instructions and a pre-configured structure, reducing the complexity of connecting custom WebGL code to Webflow designs.

Related Skills

Explore More Software Engineering Skills→
zhu637882-stackzhu637882-stack

env-setup

Detect, install, and configure Homebrew, Node.js, pnpm, PostgreSQL, Redis, Git, then output a summary.

Community
Advanced
duc01226duc01226

shader

Develop GLSL fragment shaders for procedural graphics in WebGL and Three.js.

Community
Intermediate
BamoJBamoJ

webflow

Integrate custom JavaScript and WebGL into Webflow websites using data attributes.

Community
Intermediate
samChang72samChang72
1

3d-web-experience

Create and optimize 3D web content with Three.js and React Three Fiber.

Community
Advanced