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 v0.1.1

$ 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.

Framework aware

Minimal by default

Privacy first

Made 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 CLI is published on npm as frontend-setup.

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

Install command Live · v0.1.1

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 live at setup.grabby.lol

Explicit network commandsOPT-IN

frontend-setup update

Check npm for a newer CLI version.

Version

frontend-setup connect https://setup.grabby.lol/catalog/v1/catalog.json

Choose a catalog endpoint you trust.

Connect

frontend-setup sync

Download and validate the configured catalog.

Sync

Use the official catalog at setup.grabby.lol, or point connect at another endpoint you trust. 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.