Getting Started

In this guide you'll authenticate with GitLab, install the Invent Claude skills, and use them to scaffold your first micro-app.

note

Before starting, make sure you've reviewed the prerequisites.

Step 1: Set Up Your Two Credentials

The create-invent-widget skill needs credentials for two different jobs, and they cannot be covered by a single credential:

• Pushing to GitLab — needs your identity (to create the project and push with correct authorship). Your own account can push, but it can't read the shared UI Kit packages.
• Pulling the private @invent/* packages from the GitLab npm registry — needs registry access to the shared UI Kit packages. The External Registry Token can read the packages, but shouldn't be your git identity.

The fix is to give each job its own credential.

1a. Git identity — your own GitLab account

Generate a personal access token on your own GitLab account with the scopes api and write_repository, then log glab in with it:

glab auth login --hostname gitlab.apptrium.io

The prompts appear in this order. Most are autofilled — just press ENTER.

1. API Hostname — press ENTER (autofilled with gitlab.apptrium.io).
2. SSH Hostname — press ENTER (autofilled with gitlab.apptrium.io).
3. Authentication method — select Token.
4. What domains does this host use — press ENTER (autofilled).
5. Authentication token — paste the personal access token you generated above.
6. HTTPS Auth with GitLab credentials — select Yes.
7. Host API protocol — type https.

This makes project creation and git push run as you, with your Maintainer permissions and correct authorship.

1b. Registry access — the External Registry Token

Point the @invent scope at the registry and set its auth to the External Registry Token (stored in your LastPass shared folder), both at the user level:

npm config set --location=user @invent:registry=https://gitlab.apptrium.io/api/v4/packages/npm/
npm config set --location=user //gitlab.apptrium.io/api/v4/packages/npm/:_authToken=EXTERNAL_REGISTRY_TOKEN

warning

You must set both lines. The registry line alone (or the auth line alone) leaves npm without a complete, authenticated route to the packages, and the install will fail.

Step 2: Configure the Claude Marketplace

In your terminal, start Claude Code:

claude

Then at the Claude Code prompt, run:

/plugin marketplace add git@gitlab.apptrium.io:invent/frontend/ai/claude-skills.git

This is a Claude Code slash command — not a shell command. It only works at the Claude Code prompt. It registers Invent's Claude skills marketplace so you can install our skills in the next step.

Step 3: Install the Skills

At the Claude Code prompt, run each of these (one at a time):

/plugin install gitlab-mr@invent-skills
/plugin install widget-update@invent-skills
/plugin install create-invent-widget@invent-skills
/plugin install widget-design-guide@invent-skills
/plugin install widget-build-guides@invent-skills
/plugin install proxy-app-setup@invent-skills

(Slash commands, not shell commands.)

Skill	Purpose
gitlab-mr	Opens GitLab merge requests with AI-generated descriptions.
widget-update	Updates widget settings, defaults, metadata, layout, and preview image.
create-invent-widget	Scaffolds a new micro-app from the Invent template (used in Step 4).
widget-design-guide	Design-system reference for Tailwind 4 + shadcn/ui widgets; run /widget-design-guide audit to find and fix hardcoded colors, sizes, and inline styles.
widget-build-guides	Reference guides for building widgets.
proxy-app-setup	Integrates @invent/proxy-app-components for CRM integration (ProxyApp/ProxyAppMulti, provider auth, proxyCall, SharedFooter).

Step 4: Create a Micro-App

For this example, you'll create a default template using the create-invent-widget skill.

You don't need to invoke the skill directly — just ask Claude in plain English and it routes to create-invent-widget automatically. For example:

• "Create a new Invent widget."
• "Scaffold a new dashboard micro-app."
• "Set up a new widget from the Invent template."

tip

Since you configured both credentials in Step 1, tell the skill that glab is already authenticated and the registry token is already configured so it doesn't try to set them up again.

Then:

1. When prompted, select your group (URL shared on Slack or by email) — this is where the micro-app will live.
2. Answer the prompts:
   • Add the name
   • Select Dashboard widget when asked for the widget type
   • Add the description and title
3. Confirm you want to create the widget with the parameters — Claude will confirm this step.
4. Grant approval for the next steps as Claude asks for permission. Claude Code asks before running shell commands or modifying files — approve each prompt to continue.

Step 5: Notify the Team

Once the create-invent-widget skill finishes:

• Claude opens the new repo for you on GitLab.
• The repo is also cloned to the directory where you ran Claude Code.

Verify the pipeline ran successfully: open the new repo on GitLab and check the latest pipeline in the commit history.

Message the Invent Technical team on Slack so we can register your app to your portal. Include:

• The new repo URL
• Confirmation that the GitLab pipeline ran successfully

Registration is handled by the Invent Technical team, so there's a short wait before your app appears in your portal. Once it's registered, continue with Next Steps to place it on a dashboard and configure its preview.