MAQ Software Website

The MAQ Software website is a single-page application built with React, TypeScript, Vite, React Router, and Fluent UI.

Run locally

Prerequisites

• Node.js 20.19 or newer
• npm (included with Node.js)

Setup

git clone https://github.com/maqsoftware/MAQSoftwareWebsite-New.git
cd MAQSoftwareWebsite-New
npm ci
npm run dev

Vite opens the site at http://localhost:5173. Stop the server with Ctrl+C.

No environment variables are required for normal local development.

Code structure

.
├── public/              Static images, logos, documents, redirects, and favicons
├── src/
│   ├── components/      Shared UI, layout, cards, buttons, and section components
│   ├── data/            Content and structured data used by pages
│   ├── lib/             Small shared utilities
│   ├── pages/           Route-level page components
│   ├── App.tsx          Application routes and shared page layout
│   ├── main.tsx         React entry point and global providers
│   ├── styles.css       Global styles
│   └── theme.ts         Fluent UI theme configuration
├── tests/site/          Playwright route and interaction smoke tests
├── index.html           Vite HTML entry point
├── netlify.toml         Netlify build and security-header configuration
├── playwright.config.ts Playwright test configuration
└── vite.config.ts       Local development and production build configuration

Add new routes in src/App.tsx. Put route-level content in src/pages, reusable UI in src/components, and static files that should be served as-is in public.

Repository skills

Reusable agent workflows live in .agents/skills/. Claude Code discovers the same definitions through symlinks in .claude/skills/. Invoke a skill with $skill-name in Codex or /skill-name in Claude Code.

Skill	Purpose
create-issue	Inspect the live site and repository, then write and publish an implementation-ready issue.
implement-issue	Implement a linked GitHub issue and verify the result against its acceptance criteria.
rewrite	Plan, draft, approve, and implement a conversion-focused page rewrite.
product-marketing	Maintain shared product, audience, positioning, and messaging context.
cro	Audit pages and forms for conversion friction and recommend focused improvements.
marketing-psychology	Apply relevant behavioral principles without inventing evidence, urgency, or guarantees.
copywriting	Write or improve clear, persuasive website copy, headlines, and calls to action.

Useful commands

Command	Purpose
npm run dev	Start the local development server
npm run build	Type-check and create a production build in dist/
npm run check	Run lint and formatting checks
npm run lint	Run ESLint
npm run lint:fix	Apply safe ESLint fixes
npm run format	Format maintained files with Prettier
npm run format:check	Check formatting without changing files
npm run preview	Preview the production build locally
npm run test:site	Run the fast local Chromium Playwright checks
npm run test:site:full	Run the full local cross-browser Playwright suite
npm run test:site:report	Open the most recent Playwright HTML report

Before the first fast Playwright run, install Chromium:

npx playwright install chromium

For the optional full cross-browser suite, also install Firefox and WebKit:

npx playwright install firefox webkit

Both test commands start the local Vite server automatically. Playwright tests are local-only and are not run by the pull-request workflow.

Create a pull request

1. Start from an up-to-date main branch:

   git switch main
   git pull origin main
   git switch -c feature/short-description

2. Make a focused change, then verify it:

   npm run build
   npm run test:site

3. Commit and push your branch:

   git add <changed-files>
   git commit -m "Describe the change"
   git push -u origin feature/short-description

4. Open the repository on GitHub and create a pull request into main. Include a short summary, testing notes, and screenshots for visual changes. Keep the PR focused and address the automated build check and review feedback before merging.

Development notes

• Use React Router links or navigation for internal pages so navigation stays within the SPA.
• Reuse existing components and Fluent UI theme tokens before adding new patterns.
• Check changes at desktop and mobile widths.
• Do not commit generated folders such as node_modules/ or dist/.
• Production builds are generated with npm run build; pushes to main are deployed through GitHub Actions.

If local dependencies become inconsistent, remove node_modules, run npm ci again, and restart the development server.