Skip to content

Commit 3774aba

Browse files
mamigotclaude
andcommitted
docs: rewrite Agent Skills for the two-tab surface; document the chat / picker
os/agent-settings/skills.md — the page described a flat list of skill cards with an assignment toggle. Rewritten for what ships: Agent Skills / Available Skills tabs, Add to Agent + the Added chip, private ("Only This Agent") skills and slug precedence, the Resources sub-tab (reference/script text vs uploaded assets), featured skills being read-only, the chat `/` picker, and the Base-Agent-only scope. Seven screenshots. os/chat-canvas/chat.md — the composer has a Skills chip and a `/` skill picker; neither was documented. Added with a screenshot. developer/applications/vibe.md — the Skills table listed 25 skills under the old `/iblai-*` names; upstream has 70 under `/iblai-vibe-*`, so every command in it was wrong. Replaced and grouped. Source: https://github.com/iblai/vibe/tree/main/skills/iblai-vibe-agent-skills Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1 parent 5de31c4 commit 3774aba

3 files changed

Lines changed: 171 additions & 44 deletions

File tree

developer/applications/vibe.md

Lines changed: 98 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -75,35 +75,107 @@ A developer toolkit for vibe coding with the ibl.ai platform. Vibe gives you a p
7575

7676
## Skills
7777

78-
After installing the skills, use them directly in your AI agent with `/` commands:
78+
After installing the skills, use them directly in your AI agent with `/` commands.
79+
80+
### Project and operations
81+
82+
| Skill | Description |
83+
|-------|-------------|
84+
| `/iblai-vibe-ops-init` | Start a new ibl.ai project and write the project CLAUDE.md |
85+
| `/iblai-vibe-scaffold` | Scaffold a new app, or add ibl.ai features to an existing Next.js project |
86+
| `/iblai-vibe-component` | Add an ibl.ai component or feature to your app |
87+
| `/iblai-vibe-ops-test` | Add Vitest/Playwright tests and run the verification pass before showing work |
88+
| `/iblai-vibe-ops-build` | Build and run on desktop and mobile (iOS, Android, macOS, Windows) |
89+
| `/iblai-vibe-ops-deploy` | Deploy your app to Vercel or another platform |
90+
| `/iblai-vibe-ops-upgrade` | Upgrade the `@iblai/iblai-js` SDK and the vibe skills to the latest versions |
91+
| `/iblai-vibe-windows-msix` | Package a Tauri build as a Windows MSIX for sideloading or the Microsoft Store |
92+
| `/iblai-vibe-iconography` | Generate every app-icon size for desktop and mobile builds from one source image |
93+
| `/iblai-vibe-readme` | Write or refresh the README |
94+
| `/iblai-vibe-cli-maintenance` | Internals of the `iblai` CLI -- commands, templates, and release flows |
95+
96+
### App features
97+
98+
| Skill | Description |
99+
|-------|-------------|
100+
| `/iblai-vibe-auth` | Add ibl.ai SSO authentication to a vanilla Next.js app |
101+
| `/iblai-vibe-agent-chat` | Add the in-process Chat surface (message stream, canvas, file attach, voice, prompts) |
102+
| `/iblai-vibe-agent-chat-sidebar` | Wrap Chat with the SDK sidebar -- projects, pinned and recent messages |
103+
| `/iblai-vibe-project` | Add the Projects surface (chat input, project files, instructions, assigned agents) |
104+
| `/iblai-vibe-profile` | Add the profile dropdown and settings page |
105+
| `/iblai-vibe-account` | Add the account and organization settings page |
106+
| `/iblai-vibe-navbar` | Add a responsive navbar with logo, links, notification bell, and profile dropdown |
107+
| `/iblai-vibe-notification` | Add the notification bell and notification center page |
108+
| `/iblai-vibe-analytics` | Add the analytics dashboard page |
109+
| `/iblai-vibe-invite` | Add user invitation dialogs |
110+
| `/iblai-vibe-workflow` | Add workflow builder components |
111+
| `/iblai-vibe-onboard` | Design and build a high-converting onboarding questionnaire flow |
112+
| `/iblai-vibe-credit` | Add the ibl.ai credit balance widget |
113+
| `/iblai-vibe-local-llm` | Wire on-device LLM inference (Ollama) into a Next.js + Tauri desktop build |
114+
| `/iblai-vibe-rbac` | Build and audit role-based access control -- roles, policies, action definitions |
115+
| `/iblai-vibe-credential` | RBAC setup that lets a token list and unmask integration credentials |
116+
| `/iblai-vibe-course-access` | Add course-content pages (edX user UI) |
117+
| `/iblai-vibe-course-create` | Drive the Course Creation API end to end -- outline, units, review, publish |
118+
| `/iblai-vibe-crm-overview` | Reference and index for the Platform-scoped CRM API and its workflow skills |
119+
120+
### Agent tabs
121+
122+
| Skill | Description |
123+
|-------|-------------|
124+
| `/iblai-vibe-agent-search` | Add the agent search/browse page (starred, featured, custom, default) |
125+
| `/iblai-vibe-agent-setting` | Add the agent Settings tab (name, description, visibility, copy, delete) |
126+
| `/iblai-vibe-agent-access` | Add the agent Access tab (RBAC for editor and chat roles) |
127+
| `/iblai-vibe-agent-api` | Add the agent API tab (API key management) |
128+
| `/iblai-vibe-agent-audit` | Add the agent Audit tab (who changed what and when, with filters) |
129+
| `/iblai-vibe-agent-dataset` | Add the agent Datasets tab (searchable dataset table with upload) |
130+
| `/iblai-vibe-agent-disclaimer` | Add the agent Disclaimers tab (user agreement and advisory) |
131+
| `/iblai-vibe-agent-embed` | Add the agent Embed tab (embed code, custom styling, shareable links) |
132+
| `/iblai-vibe-agent-evals` | Add the agent Evals tab (benchmarks, LLM-as-Judge reviews, manual scores, CSV export) |
133+
| `/iblai-vibe-agent-grader` | Add the agent Grader tab (rubric grading, criteria table, results with LMS-synced overrides) |
134+
| `/iblai-vibe-agent-history` | Add the agent History tab (conversation history with filters and export) |
135+
| `/iblai-vibe-agent-llm` | Add the agent LLM tab (model provider selection) |
136+
| `/iblai-vibe-agent-lti` | Add the agent LTI tab (LTI 1.3 launch toggle, links, signing keys, tools, endpoints) |
137+
| `/iblai-vibe-agent-mcp` | Add the agent MCP tab (featured and custom connectors, OAuth, add/edit dialogs) |
138+
| `/iblai-vibe-agent-memory` | Add the agent Memory tab (enable/disable memory and manage memories) |
139+
| `/iblai-vibe-agent-privacy` | Add the agent Privacy tab (PII detection with redact/mask/block actions) |
140+
| `/iblai-vibe-agent-prompt` | Add the agent Prompts tab (system prompts and suggested prompts) |
141+
| `/iblai-vibe-agent-safety` | Add the agent Safety tab (moderation prompts and flagged content) |
142+
| `/iblai-vibe-agent-sandbox` | Add the agent Sandbox tab (Claw instance management and agent prompt configuration) |
143+
| `/iblai-vibe-agent-skills` | Add the agent Skills tab (Agent Skills catalog, per-agent assignment, private skills, file resources, and the chat `/` skill picker) |
144+
| `/iblai-vibe-agent-task` | Add the agent Tasks tab (schedule automated periodic tasks with run logs) |
145+
| `/iblai-vibe-agent-tool` | Add the agent Tools tab (enable/disable agent tools) |
146+
| `/iblai-agent-support` | Add the agent Support tab (ticket inbox, availability toggle, filters, replies) |
147+
| `/iblai-agent-voice` | Add the agent Voice tab (pick the agent's voice and configure voice calls) |
148+
149+
### Monetization
150+
151+
| Skill | Description |
152+
|-------|-------------|
153+
| `/iblai-vibe-monetization` | Reference and index for item-level monetization (Stripe Connect, paywalls, tiers) |
154+
| `/iblai-vibe-monetization-onboard` | Build the Stripe Connect Express onboarding surface and payment-readiness gate |
155+
| `/iblai-vibe-monetization-configure` | Build the admin monetization tab -- paywall settings and per-item pricing tiers |
156+
| `/iblai-vibe-monetization-checkout` | Build the paywall modal, access-check gate, and Stripe checkout (including guest buy) |
157+
| `/iblai-vibe-monetization-subscription` | Build the user Purchases tab -- list, detail, and cancel |
158+
| `/iblai-vibe-monetization-analytics` | Build revenue dashboards, subscriber lists, and paywall overviews |
159+
160+
### Design and code quality
161+
162+
| Skill | Description |
163+
|-------|-------------|
164+
| `/iblai-vibe-design` | Design, critique, and polish frontend interfaces against the ibl.ai design system |
165+
| `/iblai-vibe-deslop` | Audit and harden an existing codebase for production readiness |
166+
167+
### Security
79168

80169
| Skill | Description |
81170
|-------|-------------|
82-
| `/iblai-auth` | Add SSO authentication (includes CLI installation guide) |
83-
| `/iblai-chat` | Add AI chat widget |
84-
| `/iblai-profile` | Add profile dropdown + settings page |
85-
| `/iblai-account` | Add account/org settings page |
86-
| `/iblai-analytics` | Add analytics dashboard |
87-
| `/iblai-notification` | Add notification bell + center page |
88-
| `/iblai-invite` | Add user invitation dialogs |
89-
| `/iblai-workflow` | Add workflow builder components |
90-
| `/iblai-onboard` | Design and build a high-converting onboarding questionnaire flow |
91-
| `/iblai-build` | Build and run on desktop and mobile (iOS, Android, macOS, Windows) |
92-
| `/iblai-screenshot` | Capture app store screenshots for web, iOS, and Android |
93-
| `/iblai-test` | Test your app before showing work to the user |
94-
| `/iblai-agent-search` | Add the agent search/browse page (starred, featured, custom, default) |
95-
| `/iblai-agent-settings` | Add the agent Settings tab (name, visibility, copy, delete) |
96-
| `/iblai-agent-access` | Add the agent Access tab (RBAC for editor and chat roles) |
97-
| `/iblai-agent-api` | Add the agent API tab (API key management) |
98-
| `/iblai-agent-datasets` | Add the agent Datasets tab (searchable dataset table with upload) |
99-
| `/iblai-agent-disclaimers` | Add the agent Disclaimers tab (user agreement and advisory) |
100-
| `/iblai-agent-embed` | Add the agent Embed tab (embed code, custom styling, shareable links) |
101-
| `/iblai-agent-history` | Add the agent History tab (conversation history with filters and export) |
102-
| `/iblai-agent-llm` | Add the agent LLM tab (model provider selection) |
103-
| `/iblai-agent-memory` | Add the agent Memory tab (enable/disable memory and manage memories) |
104-
| `/iblai-agent-prompts` | Add the agent Prompts tab (system prompts and suggested prompts) |
105-
| `/iblai-agent-safety` | Add the agent Safety tab (moderation prompts and flagged content) |
106-
| `/iblai-agent-tools` | Add the agent Tools tab (enable/disable agent tools) |
171+
| `/iblai-vibe-security-owasp-audit` | Audit application source against the OWASP Top 10 |
172+
| `/iblai-vibe-security-dependency-audit` | Audit dependencies and frameworks for known CVEs and supply-chain risk |
173+
| `/iblai-vibe-security-cloud-audit` | Audit AWS, GCP, and Azure for misconfigurations and excessive permissions |
174+
| `/iblai-vibe-security-prompt-injection` | Audit AI features for prompt injection and agent permission-boundary flaws |
175+
| `/iblai-vibe-security-incident-triage` | Triage a security incident following NIST SP 800-61 |
176+
| `/iblai-vibe-security-recon` | Structured reconnaissance and attack-surface enumeration for authorized tests |
177+
| `/iblai-vibe-security-osint-recon` | Correlate open source intelligence for authorized investigations |
178+
| `/iblai-vibe-security-disk-forensics` | Analyze disk images and file systems for evidence recovery |
107179

108180
Skills are in `skills/` (symlinked to `.claude/skills/`). Read them, extend them, or write your own.
109181

os/agent-settings/skills.md

Lines changed: 65 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,92 @@
11
# Agent Settings: Skills
22

3-
![Skills panel with a New Skill button and two skill cards, Web Research v1.0.0 toggled on and Image Creation v1.0.0 toggled off, each with an overflow actions menu](/images/docs/os/agent-settings/agent_settings_skills.webp)
3+
![Skills panel showing the Agent Skills tab with the New Skill button and two skill rows, Image Creation v1.0.0 and Web Research v1.0.0, each with an enable toggle and an overflow actions menu](/images/docs/os/agent-settings/agent_settings_skills.webp)
44

55
## Overview
66

7-
The Skills panel assigns reusable skills to an agent. The panel header reads: "Manage agent skill assignments for your mentor" (the UI's exact wording), and the helper text explains: "Skills are reusable capabilities you build once and assign to any agent. Create a skill, then toggle it on to give this agent that ability."
7+
The Skills panel manages **Agent Skills** — reusable playbooks a Base Agent can discover and follow. A skill is a written instruction bundle (plus optional reference files) for one job, such as researching a topic on the web or reviewing code. The agent reads a skill only when it is relevant, so an agent can carry many capabilities without bloating every conversation.
88

9-
Skills live at the organization level: you define a skill once (name, slug, description, version, and instruction text) and can then assign it to any number of agents. Each skill appears as a card with its name, a version badge (for example, v1.0.0), an assignment toggle, and an overflow ("...") menu for managing the skill itself.
9+
The panel header reads: "Reusable playbooks this Base Agent can discover and follow." The panel is split into two tabs — **Agent Skills** (the set this agent carries, with enable/disable toggles) and **Available Skills** (the organization's full catalog, with one-click **Add to Agent**) — plus New/Edit Skill dialogs and a **Resources** file manager for attaching files to a skill.
10+
11+
Skills are managed independently of the Claw sandbox: no sandbox instance is required for the panel to work. In chat, users invoke a skill by typing `/` in the composer.
1012

1113
To reach this screen, open the **Edit Agent** modal, stay on the **Configurations** tab group, and select **Skills** in the left sidebar.
1214

15+
Agent Skills apply to **Base Agent** agents only. On other agent types the tab is not offered.
16+
1317
## Target Audience
1418

1519
**Administrator** | **Agent Builder**
1620

1721
## Panel Reference
1822

23+
#### Session behavior note
24+
An info line at the top of the panel states: "Skills added or removed here apply to new chat sessions only. Edits to a skill's instructions apply immediately, including in conversations already in progress." Plan changes accordingly — attaching a skill mid-conversation will not affect that conversation.
25+
1926
#### New Skill
20-
Opens the skill-creation dialog. **Name** and **Slug** are required; you can also provide a description, a version (defaults to 1.0.0), and the skill's instruction text — the behavior the skill adds when assigned to an agent. Newly created skills are enabled on creation, and a "Skill created" confirmation appears.
27+
Opens the skill-creation dialog (see [New Skill dialog](#new-skill-dialog) below). Available from either tab.
28+
29+
#### Agent Skills tab
30+
The agent's *effective* set: the skills assigned to it plus its own private skills, deduped by slug. Each row shows the skill's name, version, badges (category, Native, Featured, Private), and description, followed by an enable toggle and a kebab ("...") menu.
31+
32+
#### Available Skills tab
33+
34+
![Available Skills tab listing the organization's catalog, with green Added chips on skills already attached to this agent](/images/docs/os/agent-settings/agent_settings_skills_available.webp)
35+
36+
The organization's full skill catalog, paged 10 at a time. Rows show the same name/version/badges/description block. **Add to Agent** attaches a skill to this agent; rows already covered by the agent's set — attached, or shadowed by a private skill with the same slug — show a green **Added** chip instead. Another agent's private skills are not attachable.
37+
38+
#### Enable toggle
39+
Turns a skill on or off for this agent. A skill is active only when both the skill itself and its assignment to this agent are enabled, and only enabled skills appear in the chat `/` picker.
40+
41+
#### Kebab ("...") menu
42+
43+
![Skill row kebab menu open with Remove from Agent, Edit, and Delete actions](/images/docs/os/agent-settings/agent_settings_skills_actions.webp)
44+
45+
Per-row actions: **Remove from Agent** detaches the skill from this agent (shown for assigned skills); **Edit** opens the Edit Skill dialog; **Delete** removes the skill from the organization. Edit and Delete appear only for skills your organization owns — **Featured skills are read-only** and their edit and delete actions are hidden.
2146

22-
#### Skill cards
23-
Each card lists a skill available in the organization, with its name and version (the screenshot shows **Web Research** v1.0.0 and **Image Creation** v1.0.0). The card's toggle controls the skill's assignment to this agent: on means the agent has the skill (Web Research in the screenshot), off means it does not (Image Creation).
47+
#### New Skill dialog
2448

25-
#### Assignment toggle
26-
Toggling on creates a skill assignment for this agent; toggling off removes it. Because skills are shared, toggling here only affects this agent's assignment — the skill itself remains available to other agents.
49+
![New Skill dialog with an Only This Agent toggle and fields for Name, Slug, Version, Category, Description, and Instruction](/images/docs/os/agent-settings/agent_settings_skills_new.webp)
2750

28-
#### Overflow ("...") menu
29-
Actions for the underlying skill, including editing its definition (name, slug, description, version, instruction) and deleting it. Editing or deleting a skill affects it organization-wide, not just for this agent; deleting shows a "Skill deleted" confirmation.
51+
- **Only This Agent** — "Private skills are available to this agent only and take precedence over platform skills with the same slug." Leave it off to create a skill the whole organization can use.
52+
- **Name** and **Slug** are required. The slug is what users type after `/` in chat.
53+
- **Version** defaults to `1.0.0`; **Category** (for example web, code, data) and **Description** are optional.
54+
- **Instruction** is the playbook the agent follows when the skill is used. Edits to it apply immediately, including in conversations already in progress.
55+
56+
#### Edit Skill dialog — General
57+
58+
![Edit Skill dialog on the General tab showing the saved Name Image Creation and Slug image-creation](/images/docs/os/agent-settings/agent_settings_skills_edit_general.webp)
59+
60+
The same fields as New Skill, pre-filled, under a **General** / **Resources** tab pair. **Save** writes the change organization-wide, not just for this agent.
61+
62+
#### Edit Skill dialog — Resources
63+
64+
![Edit Skill dialog on the Resources tab with a New Resource button and a course_spec.example.yaml file tagged Reference](/images/docs/os/agent-settings/agent_settings_skills_edit_resources.webp)
65+
66+
Optional files the agent can use with the skill, attachable after the skill is created. **Reference** and **Script** resources are text files (filename plus content); **Asset** resources are uploaded binary files. Each row shows the filename and a type chip, with a kebab menu offering **Download** (assets), **Edit** (text files), and **Delete**.
67+
68+
#### Chat `/` skill picker
69+
70+
![Chat composer with a slash typed, showing a picker listing Image Creation /image-creation and Web Research /web-research above the input](/images/docs/os/agent-settings/agent_settings_skills_slash_picker.webp)
71+
72+
In chat, typing `/` as the first word of a message opens a picker listing this agent's enabled skills by name and `/slug`. Arrow keys browse, Enter or Tab selects and inserts `/slug ` into the composer, and Esc dismisses it. See [Chat Interface](../chat-canvas/chat.md).
3073

3174
## How to Use
3275

3376
#### Step 1: Open the Skills panel
3477
Open the **Edit Agent** modal, keep **Configurations** selected, and click **Skills** in the sidebar.
3578

36-
#### Step 2: Create a skill (if needed)
37-
Click **New Skill**, fill in at least the required **Name** and **Slug**, add a description and instruction text describing the capability, and save. The skill becomes available to every agent in the organization.
79+
#### Step 2: Attach skills from the catalog
80+
Open the **Available Skills** tab and click **Add to Agent** on each skill this agent should carry. Skills already covered show a green **Added** chip.
81+
82+
#### Step 3: Create a skill (if needed)
83+
Click **New Skill**, fill in at least **Name** and **Slug**, write the **Instruction** playbook, and save. Leave **Only This Agent** off to share the skill across the organization, or turn it on to keep it private to this agent.
84+
85+
#### Step 4: Attach files to a skill
86+
Open the skill's **Edit** dialog, switch to **Resources**, and click **New Resource**. Add references and scripts as text, or upload assets as files.
3887

39-
#### Step 3: Assign skills to this agent
40-
Toggle on each skill this agent should have — for example, Web Research for an agent that should research on the web. The assignment takes effect for this agent's conversations.
88+
#### Step 5: Enable, disable, and detach
89+
Use the toggle on the **Agent Skills** tab to turn a skill on or off for this agent, or **Remove from Agent** in the kebab menu to detach it entirely. Remember that **Edit** and **Delete** apply organization-wide.
4190

42-
#### Step 4: Maintain skills
43-
Use the "..." menu to edit a skill's definition or delete it. Remember these actions apply organization-wide; to remove a capability from just this agent, use the toggle instead.
91+
#### Step 6: Use the skill in chat
92+
Start a new chat session with the agent, type `/`, and pick the skill from the list. Additions and removals apply to new sessions only; instruction edits take effect immediately.

0 commit comments

Comments
 (0)