Contributing

Thank you for your interest in Better Flow! Both the landing page and the screenshot studio are open source and welcome contributions.

Code of Conduct

This project follows the Contributor Covenant. By participating, you are expected to uphold this code. Report unacceptable behavior to hello@betterflow.site.

Prerequisites

Node.js 18+ (LTS recommended)
pnpm (required — do not use npm or yarn)

npm install -g pnpm

Getting Started

Landing Page

git clone https://github.com/konlyzx/landing-betterflow.git
cd landing-betterflow
pnpm install
pnpm dev

Screenshot Studio

git clone https://github.com/konlyzx/betterflow.git
cd betterflow
pnpm install
pnpm run dev

Coding Standards

General

TypeScript strict mode enabled — avoid using any
Functional components with named exports
Client components: Add "use client" at the top of every component that uses hooks, events, or browser APIs
File naming: PascalCase.tsx for components, kebab-case.ts for utilities
Path alias: @/* maps to project root

Animation Conventions

Use Case Library
Page entrances, stagger, hover framer-motion (default)
Scroll-driven animations, pinning GSAP + ScrollTrigger
Smooth scrolling Lenis (global via root layout)

Use Case	Library
Page entrances, stagger, hover	`framer-motion (default)`
Scroll-driven animations, pinning	`GSAP + ScrollTrigger`
Smooth scrolling	`Lenis (global via root layout)`

GSAP-heavy components must use dynamic(() => import(...), { ssr: false })
Always respect prefers-reduced-motion via useReducedMotion() hook
Use as const on framer-motion ease arrays to satisfy strict TypeScript

Submitting Changes

Branch Naming

feature/description     # New features
fix/description         # Bug fixes
refactor/description    # Code refactoring
docs/description        # Documentation
chore/description       # Maintenance

Commit Conventions

Use conventional commits:

feat: add 3D perspective controls
fix: resolve canvas resize flicker
docs: update API reference
refactor: extract export pipeline
chore: bump dependencies

PR Checklist

TypeScript compiles without errors (pnpm build)
ESLint passes (pnpm lint)
Follows coding standards (strict types, no any, named exports)
Respects reduced motion preferences
No hardcoded colors or values (uses CSS variables)
Branch is up to date with main

Getting Help

GitHub Discussions: github.com/betterspacx
Email: hello@betterflow.site
Twitter/X: @betterflow