A practical frontend foundation

Start with a system.
Not setup overhead.

A framework-aware CLI that gives your project a clean starting point - tokens, naming conventions, motion utilities, API patterns, and architecture notes - without forcing every app into the same shape.

Explore the setup See how it works

Offline-first Configurable by design

~/projects/folio preview

$ npx frontend-setup init

◆ Frontend Setup

✓ Project detected Astro

✓ Profile selected Marketing site

✓ Styling strategy Tokenized CSS

✓ Motion engine GSAP (optional)

Planned files

+ frontend-architecture.config.json

+ ARCHITECTURE.md

+ src/styles/tokens.css

+ src/styles/typography.css

+ src/lib/text-splitting.ts

↳Preview first. Write only what you need.

01Framework aware

02Minimal by default

03Privacy first

04Made to configure

The problem

Good projects shouldn't begin with the same chores.

Every new frontend project needs decisions: where files live, how styles are named, how tokens work, what owns API requests, and how animations are cleaned up.

Frontend Setup captures those decisions in a reusable, editable foundation. It adapts to the framework and project type instead of generating an oversized boilerplate.

Architecture

Clear boundaries.
Less guesswork.

Start with practical responsibilities for components, layouts, services, hooks, utilities, stores, and types - only where they are needed.

src/├─ components/├─ layout/├─ services/└─ styles/

Design foundation

Tokens you can
actually maintain.

Semantic values and numerical scales for color, spacing, type, radius, sizing, and motion. Fluid typography is the default, not an afterthought.

--color-text · --space-4 · --radius-card

Motion system

Motion with
a clear contract.

Use data attributes for declarative targets, GSAP for web motion, and Reanimated for Expo. Lifecycle and cleanup stay part of the setup.

The workflow

One command. Deliberate choices.

It doesn't replace your framework's project creator. Run it inside a project to establish the architecture around it.

Detect

Identify framework and package-manager markers from limited local project metadata.

Read-only inspection

Choose

Select a project profile and configure styling, state, API, and motion preferences.

Defaults + overrides

Preview

Review the proposed files before applying the setup. Existing files are preserved by default.

Safe by default

Build on it

Keep a machine-readable config and a human-readable architecture record with the project.

Ready for your agent

Framework adapters

Shared principles.
Native implementation.

The conventions stay consistent. The implementation respects each framework's routing, rendering, lifecycle, and styling model.

Next.js App Router

React + Vite Client apps

Astro Static-first

Expo React Native

React Router Route-first

Vanilla HTML, CSS, JS

Project profiles

Landing pagesMarketing sitesCMS & blogsSaaS dashboardsWeb appsDesign systemsInteractive sites

Getting started

Make the setup yours.

Choose your package manager and copy the command. The package is currently an unpublished preview; these commands become usable after the npm package is released.

First create your framework project using its official creator. Then run Frontend Setup from that project directory.

Install command Preview

npx frontend-setup init

Uses npx to run the published CLI without installing it globally.

Useful commands

frontend-setup init --dry-runPreview

frontend-setup doctorDiagnose

frontend-setup updateVersion check

Fits your workflow

Defaults aren't handcuffs.

Keep your choices in frontend-architecture.config.json, and record the reasoning in ARCHITECTURE.md. Start from the recommended stack, then change what the project actually needs.

✓ Optional Zustand and TanStack Query✓ Configurable motion engine✓ Feature folders only when useful✓ Tooling chosen for the repository

frontend-architecture.config.jsonJSON

{
  "framework": "astro",
  "profile": "marketing-site",
  "styling": {
    "strategy": "tokenized-css",
    "naming": "bem"
  },
  "motion": {
    "enabled": true,
    "engine": "gsap"
  }
}

The knowledge layer

Keep shared guidance current. Keep project data local.

Run the CLI offline by default. When you choose to connect, it fetches a read-only JSON catalog, validates its schema, and caches it locally. Matching framework and project-profile notes appear during setup. Generated files still come from the local templates; catalog content is never executed.

Catalog endpoint included; public after site deployment

Explicit network commandsOPT-IN

frontend-setup update

Check npm for a newer CLI version.

Version

frontend-setup connect https://your-domain/catalog/v1/catalog.json

Choose a catalog endpoint you trust.

Connect

frontend-setup sync

Download and validate the configured catalog.

Sync

After deployment, use your docs domain for the included catalog endpoint. Review and version catalog guidance like source code.

Privacy and control

Your project stays yours.

There is no telemetry or analytics in the current CLI. It reads limited metadata for detection and does not upload source files or project information. Network requests happen only when you explicitly run update or catalog commands.

Read about package security

No usage analytics

✓

No source uploads

✓

Preview before writing

✓

Explicit network actions

✓

A better baseline

Spend your time on the product.

Let the setup be repeatable. Keep the decisions yours.

View setup commands

Start with a system.Not setup overhead.