> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gainable.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Skills

> Built-in features you can request in your apps

## What are skills?

Skills are pre-built capabilities that Gainable can add to your applications. When you request a skill by name, the Build Agent uses specialized knowledge to implement it correctly.

<Tip>
  You don't need to know how these work internally. Just request them by name in your prompts, and Gainable handles the implementation.
</Tip>

## Available skills

### Data Visualization

Request charts and graphs to visualize your data.

<Card title="Charts" icon="chart-pie">
  **Keywords to use:** chart, graph, visualization, pie chart, bar chart, line chart

  **Example prompts:**

  * "Add a pie chart showing deals by status"
  * "Show monthly revenue as a line chart"
  * "Add a bar chart comparing sales by region"
</Card>

Available chart types:

* **Line charts** - Trends over time
* **Bar charts** - Comparing categories
* **Pie charts** - Showing proportions
* **Doughnut charts** - Proportions with a hole in the center

### Kanban Boards

Drag-and-drop boards for workflow management.

<Card title="Kanban" icon="columns">
  **Keywords to use:** kanban, board, columns, drag and drop, workflow

  **Example prompts:**

  * "Add a kanban board for task status"
  * "Create a deal pipeline board"
  * "Show projects as draggable cards in columns"
</Card>

What you get:

* Draggable cards between columns
* Automatic status updates on drop
* Real-time sync across users
* Customizable column colors

### Collaboration

Add team communication features to your app.

<Card title="Chat & Collaboration" icon="comments">
  **Keywords to use:** chat, messaging, comments, files, collaboration

  **Example prompts:**

  * "Add a team chat"
  * "Add file sharing"
  * "Add comments to tasks"
  * "Add a group chat for the project"
</Card>

Available features:

* **Chat** - Real-time messaging
* **Messenger** - Direct messages between users
* **Files** - Upload and share documents
* **Comments** - Add discussions to any item
* **Posts** - Activity feeds and announcements

### Real-time Updates

Make your app update instantly across all users.

<Card title="Real-time" icon="bolt">
  **Keywords to use:** real-time, live updates, instant, sync

  **Example prompts:**

  * "Make the task list update in real-time"
  * "Show live updates when deals change"
  * "Sync data across all users instantly"
</Card>

What this enables:

* Changes appear immediately for all users
* No page refresh needed
* Great for dashboards and team tools

### Sortable Lists

Reorder items by dragging them.

<Card title="Sortable" icon="arrows-up-down">
  **Keywords to use:** sortable, reorder, drag to reorder, ranked list

  **Example prompts:**

  * "Let me reorder tasks by dragging"
  * "Add a priority list I can sort"
  * "Make the items draggable"
</Card>

### AI Copilot

Embed an AI chat assistant in your app pages.

<Card title="AI Copilot" icon="message-bot">
  **Keywords to use:** copilot, AI assistant, AI chat, agent, smart assistant

  **Example prompts:**

  * "Add an AI copilot to the deals page"
  * "Create an AI assistant that can look up customer data"
  * "Add a smart chat panel that helps users find information"
</Card>

What you get:

* Conversational AI interface on any page
* Data lookups through agent functions
* Document-backed answers from knowledge bases
* Conversation starters to guide users

## How to request skills

Just describe what you want in plain English. Gainable recognizes skill keywords and applies the right implementation.

<CodeGroup>
  ```text Asking for charts theme={null}
  "Add a dashboard with:
  - Total deals count
  - Pipeline value
  - A pie chart showing deals by status
  - A line chart showing deals closed per month"
  ```

  ```text Asking for kanban theme={null}
  "I want to see my tasks as a kanban board with columns:
  - To Do
  - In Progress
  - Review
  - Done

  Let me drag tasks between columns."
  ```

  ```text Asking for collaboration theme={null}
  "Add a team chat to the project page where
  team members can discuss the project."
  ```
</CodeGroup>

## Combining skills

You can combine multiple skills in one app:

```text theme={null}
Build a project management app with:
- Projects with name, description, and status
- Tasks for each project with assignee and due date
- A kanban board view for tasks
- A dashboard with charts showing:
  - Tasks by status (pie chart)
  - Tasks completed per week (line chart)
- Team chat on each project page
- Real-time updates across the app
```

## Skill-specific tips

### Charts

<AccordionGroup>
  <Accordion title="Be specific about what to visualize">
    * Good: "Pie chart showing deals grouped by status"
    * Vague: "Add some charts"
  </Accordion>

  <Accordion title="Name your metrics">
    * Good: "Show total revenue, average deal size, and deal count"
    * Vague: "Show some KPIs"
  </Accordion>
</AccordionGroup>

### Kanban

<AccordionGroup>
  <Accordion title="Define your columns">
    * Good: "Columns: Backlog, In Progress, Review, Done"
    * Vague: "Add a kanban board"
  </Accordion>

  <Accordion title="Specify what the cards show">
    * Good: "Cards show title, assignee, and due date"
    * Vague: "Show tasks on the board"
  </Accordion>
</AccordionGroup>

### Collaboration

<AccordionGroup>
  <Accordion title="Chat vs Messenger">
    * **Chat**: Group conversation for a specific context (project chat, team chat)
    * **Messenger**: Direct messages between users (like Slack DMs)
  </Accordion>

  <Accordion title="Where to place it">
    * Good: "Add chat to the project detail page"
    * Vague: "Add chat"
  </Accordion>
</AccordionGroup>

## Learn more

<CardGroup cols={2}>
  <Card title="Charts" icon="chart-line" href="/skills/chartjs">
    Deep dive into data visualization
  </Card>

  <Card title="Kanban" icon="columns" href="/skills/kanban">
    Learn about kanban boards
  </Card>

  <Card title="Collaboration" icon="users" href="/skills/weavy">
    Explore chat, files, and comments
  </Card>

  <Card title="Design" icon="palette" href="/skills/design">
    Customize your app's look and feel
  </Card>

  <Card title="Gaia Copilot" icon="comments" href="/copilots/overview">
    Embed a conversational assistant in your app
  </Card>

  <Card title="Gaia Autopilot" icon="robot" href="/autopilot/overview">
    Add autonomous agents that draft work in the background
  </Card>
</CardGroup>