MUXAI Wiki

MUXAI Wiki

Setup

Build the harness — IDE, rules, MUXAI skills, design tokens, and repo structure for Stage 3 of the workflow.

Setup is Stage 3 of the Workflow: Setup Harness. It is the static foundation you configure once per project so every agent run starts with the same structure, rules, and capabilities.

If Workflow is the loop you repeat, Setup is the infrastructure that makes the loop work.

When to run setup

Run setup when:

  • Starting a new project from scratch
  • Opening a Figma Make export you want to carry into code
  • Onboarding a repo that has no agent config, skills, or design docs yet

You have already done Discovery and Context Artifacts (brief, .md files, reference designs). Setup turns that context into a working project the agent can enter cold.

Quick start with MUXAI skills

Install the core MUXAI skills first — copy commands from the Skills page:

npx skills add manish-uxai/setup -y
npx skills add manish-uxai/design-review -y

Then in your project folder, invoke setup once. It scaffolds a designer-first stack (Vite, React, TypeScript, Tailwind, shadcn/ui) or adapts to a Figma Make export already in the folder.

Add polish and guardrails as needed from Other Skills — e.g. make-interfaces-feel-better, hallmark, or shadcn.

IDE and editor

Configure the surface you and the agent share:

  • Cursor (recommended) or VS Code — project opened at repo root
  • Extensions: ESLint, Prettier, Tailwind IntelliSense
  • Format on save enabled
  • Terminal available for npm run dev, Git, and skill installs
  • User rules in Cursor Settings → Rules (global guardrails)
  • Project rules in .cursor/rules/ (repo-specific behavior)

Point the agent at this wiki’s Glossary when you hit unfamiliar terms.

Agent configuration files

Commit these so the agent reads them every session:

FilePurpose
AGENTS.mdAgent roles, boundaries, and project conventions
design.md or guidelines.mdDesign principles, tokens, review criteria
PRODUCT.mdFeature scope, audience, and constraints (from Context Artifacts)
.cursor/rules/*.mdcFocused rules — brand, components, no-AI-slop patterns

Link or embed context from Stage 2: Figma URLs, reference screenshots, token tables.

Skills in the harness

Skills are packaged instructions the agent loads automatically. Treat them as part of setup, not optional extras.

MUXAI Skills (install first):

  • setup — one-time project scaffold
  • design-review — audit drift and AI slop before you ship a slice
  • design-playground — sandbox UI experiments
  • vibe-to-prod — production-readiness when a prototype matures

Community skills (add as needed): shadcn, frontend-design, hallmark, impeccable — see Skills for install commands.

Reload the IDE or start a new agent session after installing skills.

Design system and components

Document what “on-brand” means so the agent does not invent new patterns every run:

  • Color, spacing, and type tokens (CSS variables or Tailwind theme)
  • Component patterns — which Button, Card, Nav variants to reuse
  • Links to Figma library or code references
  • States to design: empty, loading, error, hover, mobile

shadcn/ui (if using the MUXAI setup stack):

  1. Project already includes shadcn after setup skill
  2. Add components: npx shadcn@latest add button card …
  3. Wrap or extend primitives to match your tokens — do not fork styles per screen

File structure in IDE

A predictable layout helps the agent find context:

project/
├── AGENTS.md
├── design.md
├── PRODUCT.md
├── .cursor/rules/
├── src/                 # app code
├── public/              # static assets
└── package.json         # scripts: dev, build

Keep context artifacts at repo root or in docs/ — not buried in chat history.

Install checklist

  • Node.js installed (v22+ recommended)
  • Project folder opened in Cursor or VS Code
  • MUXAI setup skill run (or existing stack confirmed)
  • AGENTS.md and design.md committed
  • Context artifacts from workflow Stage 2 in repo
  • MUXAI design-review skill installed
  • Additional skills installed from Skills as needed
  • npm run dev works — local preview URL opens
  • Git initialized; .env in .gitignore if using API keys

After setup

Move to Stage 4: Iteration in the Workflow — build in slices, run design review, and feed learnings back into Discovery.

Setup is not “done forever.” Update rules, skills, and design docs when the loop teaches you something new.