Skip to content

setup skill

The setup skill is the workflow behind the /setup command. It runs a single-pass bootstrap that prepares a React + TypeScript project for everything else acss-kit does.


Triggered by	`/setup` (and natural-language phrases like “bootstrap acss-kit”, “set up the kit”)
Pre-conditions	React + TypeScript in `package.json`; `sass` or `sass-embedded` available
Idempotent	Yes — every step checks for existing artefacts before writing
Plan mode	Exits plan mode immediately so file writes can run

Steps

The skill executes nine sequential checks, each guarded by an existence check so re-runs are safe. Step 0 unblocks the rest — every subsequent step shells out to a Python detector or writes a file, both of which plan mode would block.

Step	Action	Script / Asset
0	Exit plan mode if the session is in plan mode	—
1	Verify React + TypeScript present	`detect_stack.py`
2	Detect React major version, warn on 19+	`detect_stack.py`
3	Detect package manager (npm, pnpm, yarn, bun)	`detect_package_manager.py`
4	Verify Sass installed; halt with install instructions if missing	`detect_stack.py`
5	Set components target via prompt or `.acss-target.json`	`detect_target.py`
6	Copy `ui.tsx` from plugin assets	`assets/ui.tsx`
7	Seed `light.css` and `dark.css` from a hex seed (skipped with `--no-theme`)	`generate_palette.py` + `tokens_to_css.py`
8	Wire theme imports into the project’s CSS/SCSS entry point	—

After the nine checks complete, the skill prints a summary listing created[] vs kept[] so you can see exactly which files were written and which were left untouched.

Output contract

After a successful run:

.acss-target.json                # records the components dir
src/components/fpkit/ui.tsx      # foundation file (or your --target)
src/styles/theme/light.css       # if --no-theme not set
src/styles/theme/dark.css        # if --no-theme not set
<detected CSS/SCSS entry>      # @import statements added idempotently

Failure handling

Failure	Behaviour
React or TypeScript missing	Halt with copy-paste install command
Sass missing	Halt with `pnpm add -D sass` (or pkg-manager equivalent)
Theme generation fails WCAG	Roll back theme files; bootstrap continues without seed theme
Target dir already populated	Keep existing files; record in `kept[]`