Installation & Development Setup
Relevant source files
The following files were used as context for generating this wiki page:
This page provides a comprehensive guide to setting up the development environment for the SuperClaude Website and installing the associated SuperClaude Framework. The website is built using React and includes automated scripts for documentation management and deployment.
The project serves as the documentation hub and interface for the SuperClaude Framework, which enhances Claude Code through behavioral instruction injection and intelligent agent coordination.
Sources: README.md:1-5, package.json:1-5
Local Development Environment Setup
To contribute to the SuperClaude Website or run it locally, you must configure a Node.js environment and install the necessary dependencies.
Prerequisites
Before beginning, ensure the following software is installed:
- Node.js: Required to run the React application and build scripts.
- npm: Used for package management and executing project scripts.
Sources: README.md:14-16
Installation Steps
The project setup follows a standard React application workflow with additional pre-processing steps for documentation.
- Clone the Repository:
git clone https://github.com/SuperClaude-Org/SuperClaude_Website.git cd SuperClaude_Website - Install Dependencies:
Execute the following to install packages defined inpackage.json:npm install
Sources: README.md:20-29, package.json:7-30
Build and Execution Lifecycle
The project utilizes specific lifecycle scripts to manage documentation fetching and mapping before the application starts or builds.
Execution Flow
The following diagram illustrates the sequence of operations when running the development server.
The application lifecycle ensures that documentation content is synchronized and mapped before the UI renders.
Sources: package.json:32-35, scripts/generate-docs-map.js:1-10
Available Scripts
The package.json file defines several critical scripts for development and production:
| Script | Command | Description |
|---|---|---|
prestart | node scripts/fetch-docs.mjs && node scripts/generate-docs-map.js | Fetches external docs and generates the JSON map before startup. |
start | react-scripts start | Runs the app in development mode at http://localhost:3000. |
build | react-scripts build | Compiles the production-ready application. |
prebuild | Same as prestart | Ensures data is fresh before a production build. |
Sources: package.json:31-36, README.md:33-37
SuperClaude Framework Quick Start
While the website is built with React, it provides a "Quick Start" guide for the underlying SuperClaude Framework, which is distributed via Python's package manager.
Framework Installation
Users can install the framework using the following command:
pip install SuperClaude && SuperClaude install
Sources: src/pages/HomePage.js:11, src/pages/HomePage.js:95-103
Integration Architecture
The framework interacts with the development environment by providing slash commands that automate coding workflows.
This flow represents the interaction between the user and the framework commands post-installation.
Sources: src/pages/HomePage.js:114-125
Development Tools and Configuration
Documentation Mapping
The script scripts/generate-docs-map.js is essential for the development setup. It scans the public/docs directory and generates src/docs-map.json, which the React components use to navigate and display markdown files. It enforces a specific category order:
- Getting-Started
- User-Guide
- Reference
- Developer-Guide
- Templates
Sources: scripts/generate-docs-map.js:6-12
Deployment Configuration
The project is configured for hosting on Netlify. The netlify.toml file manages the build command and handles Single Page Application (SPA) routing by redirecting all traffic to index.html.
| Key | Value | Purpose |
|---|---|---|
build.command | npm run build | Command to generate site. |
build.publish | build | Directory to serve. |
redirects | /* -> /index.html | Prevents 404s on browser refresh for React Router. |
Sources: netlify.toml:1-11
Summary
Setting up the SuperClaude Website environment involves standard Node.js procedures supplemented by documentation pre-processing scripts. Developers must ensure that prestart scripts execute successfully to populate the docs-map.json required for the documentation viewer functionality.