Tooling

Agent Skills

Install the Bascik agent skills so GitHub Copilot, Claude Code, Cursor, Codex, or any assistant that supports Agent Skills knows how to build with Bascik, and can run scripts that check its own work.

The skills follow the open Agent Skills format. Each covers one area and loads when a task needs it. Start with the CLI install below, then choose the skills that fit your project.

Install

Run this from the root of your project:

npx skills add bascikdev/bascik

The skills CLI detects the assistants you use and installs the skills where each one looks for them. Choose skills interactively, or use a command from the table below to install one. To install all skills without prompts, run npx skills add bascikdev/bascik --skill '*' -y.

To install a skill from the docs site instead, use npx skills add https://bascik.dev --skill <skill-name>. For example, install the opt-in bascik-refactor skill with npx skills add https://bascik.dev --skill bascik-refactor.

The Skills

New projects created with npm create bascik or bascik init offer to install the general-purpose skills automatically. Add bascik-refactor separately when you need the workflow in Migrating with Coding Agents.

The skills hold only what an assistant must not get wrong: target per-instance elements with id and getElementById, keep props to text and use slots for markup, do not create a config file without a reason, and never write generated files into src/. For everything else they point to the page on this site that explains it, and read-doc.mjs prints that page, so the skills and the docs never disagree.

Scripts the Assistant Runs

The skills include Node.js scripts (Node 24.21 or newer). The assistant runs them from the project root, and they use the project's own installed Bascik. Most need no extra dependencies. The bascik-images WebP helper loads Sharp from your project; Optimizing Images shows how agents generate files locally, wire up native HTML and CSS, and prevent first-paint flashes. The bascik-refactor scripts also load Playwright and sharp from your project, so install them as dev dependencies when you use those scripts. Migrating with Coding Agents shows the scripts in order.

For example, after writing a component the assistant can confirm that two instances get separate IDs:

node .agents/skills/bascik/scripts/preview.mjs '<like-button data-bascik-prop-label="Like" />' --count 2 --body

new-component.mjs, add-example.mjs, and new-post.mjs write to your project. The image skill's responsive-webp.mjs writes images into --out and its manifest into --manifest (by default, --out/manifest.json). The bascik-refactor scripts that produce files also write: breakpoint-matrix.mjs --out, geometry-diff.mjs --out, compare-route.mjs, run-checks.mjs and the parity checks it runs (reports and screenshots under artifacts/), review-page.mjs (pages under artifacts/review/, and a sign-off in docs/migration/review/ with --sign), production-defects.mjs (rows appended to docs/migration/decisions.md), capture-baselines.mjs (baselines under artifacts/baselines/), interaction-crawl.mjs --discover (a draft at docs/migration/interactions.draft.json), and llms-txt.mjs (dist/llms.txt only). The other scripts only read. preview.mjs builds into a temporary folder under node_modules/.cache/bascik/ and deletes it afterward, so your dist/ is never touched. The docs scripts read the public search index at https://bascik.dev/assets/search-index.json.

Example Components

The Example Components section of this site has tested components, and the Bascik repository has a complete starter site. The skills tell the assistant to start from them, and add-example.mjs downloads them from this site, so the files the assistant copies are the ones these pages show:

node .agents/skills/bascik/scripts/add-example.mjs --list
node .agents/skills/bascik/scripts/add-example.mjs tab-group

Keeping the Skills Updated

With the skills CLI, update everything it installed:

npx skills update

npx skills update keeps the version a skill was installed from. Skills that a new project installed at a release tag stay at that tag, so after upgrading @bascik/bascik run the install again with the new version, as the project's AGENTS.md shows:

npx skills add bascikdev/bascik#v<version> -a universal -a claude-code --copy -y --skill bascik bascik-compatibility bascik-components bascik-config bascik-images bascik-migrate bascik-scripts bascik-seo bascik-testing

With curl, run the same install command again; it overwrites the files in place.

You can also ask your assistant to do this. Add an instruction like the following to your repository's agent instructions (such as AGENTS.md, .github/copilot-instructions.md, or CLAUDE.md):

Other Install Methods

From this site

To use the skills CLI without GitHub:

npx skills add https://bascik.dev

Add --skill <name> to select a skill, just as with the GitHub commands above. Each docs release publishes an RFC 8615 discovery index at https://bascik.dev/.well-known/agent-skills/index.json, which the CLI reads.

With curl

Download every skill into the shared .agents/skills/ folder, which GitHub Copilot, Cursor, Codex, Gemini CLI, and OpenCode read:

mkdir -p .agents/skills && curl -fsSL https://bascik.dev/assets/skills.tar.gz | tar -xz -C .agents/skills

Claude Code reads .claude/skills/ instead:

mkdir -p .claude/skills && curl -fsSL https://bascik.dev/assets/skills.tar.gz | tar -xz -C .claude/skills

VS Code also reads .github/skills/, so you can extract into that folder if your repository keeps its Copilot customizations there. The archive includes the opt-in bascik-refactor skill.

On Windows, curl.exe and tar ship with Windows 10 and later. Download the archive to a file first, because older PowerShell versions do not pipe binary data:

mkdir .agents\skills -Force
curl.exe -fsSLo skills.tar.gz https://bascik.dev/assets/skills.tar.gz
tar -xzf skills.tar.gz -C .agents/skills
del skills.tar.gz

New projects

After setting up the files, npm create bascik and bascik init ask:

Install the Bascik agent skills for coding assistants (Claude Code, Copilot, Cursor, Codex...)? (Y/n)

Press Enter, or pass -y, and they run the skills CLI for you. They install every skill except the opt-in bascik-refactor into .agents/skills/ and .claude/skills/ and record them in skills-lock.json. The skills come from the release tag that matches the Bascik version being set up, such as bascikdev/bascik#v1.0.0, and from the default branch when that tag cannot be found.

Answer n, or pass --no-skills, to skip it. When you skip it, or the install fails, for example offline, the project is still created and the command to run later is printed, pinned to the same release tag:

npx skills add bascikdev/bascik#v1.0.0 -a universal -a claude-code --copy -y --skill bascik bascik-compatibility bascik-components bascik-config bascik-images bascik-migrate bascik-scripts bascik-seo bascik-testing

If that tag is not found, run the same command without #v1.0.0 to install from the default branch.

Project Brief

New projects also get an AGENTS.md at the root, a short brief that GitHub Copilot, Cursor, Codex, and other assistants read before they start: the commands to run (npm run dev, npm run build and the site URL it needs, npx bascik --check, and a preview), the house rules (pages that read like a list of component tags without splitting too far, TypeScript for new code including browser scripts, html from @bascik/bascik/html for visitor data, semantic HTML, data-testid on component roots and controls, and bascik --check before calling work done), and where the skills live. It links to these docs instead of repeating them.

Claude Code reads CLAUDE.md and skips AGENTS.md when both exist, so new projects also get a CLAUDE.md whose first line imports the brief:

@AGENTS.md

Both commands add to files you already have instead of replacing them: an existing AGENTS.md gets a ## Bascik section appended, and an existing CLAUDE.md gets the @AGENTS.md line. When bascik init finds dev or build scripts that run another tool, it keeps them and the brief names npx bascik and npx bascik --build instead. Running them again changes nothing. Add notes only Claude Code needs below the import line in CLAUDE.md.

Single file

The core skill is also available on its own at https://bascik.dev/assets/SKILL.md, for tools that accept one instruction file. It tells the assistant how to install the rest when the companion skills or scripts are missing.