Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From todoist-extensions
This skill should be used when the user asks to "build a Todoist extension", "create a UI extension", "design a Doist Card", "add a context menu or composer surface", "set up a bridge action", "configure an extension server", "publish to Todoist", or any request involving Todoist UI Extensions SDK, Doist Cards, extension surfaces, the bridge API, or server-side extension development. Load this skill before generating or reviewing any Todoist UI extension code.
npx claudepluginhub caleb-terry/caleb-plugins --plugin todoist-extensionsHow this skill is triggered — by the user, by Claude, or both
Slash command
/todoist-extensions:ui-extensionsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Always load the detailed references when working with UI extensions:
Guides users through task manager setup: pick manager (Linear/Jira/GitHub Issues/Notion), integration method (MCP/CLI/plugin/API), verify, and write helper skill. Part of /process-setup.
Build custom React-based interface extensions for Airtable using @airtable/blocks/interface/ui SDK for apps, visualizations, and interactive tools beyond Interface Designer.
Build single-purpose, throwaway HTML editors for one specific piece of data — drag-and-drop boards, form-based config editors, side-by-side prompt tuners, dataset curators, annotation tools. Always end with a Submit button (calls `submitToClaude`) so the result can be sent back to the agent. Use whenever the user wants to triage, reorder, edit, annotate, curate, prioritize, or pick values where typing prose would be tedious — Linear tickets, feature flags, prompts, datasets, transcripts, anything.
Share bugs, ideas, or general feedback.
Always load the detailed references when working with UI extensions:
references/extension-architecture.md — surfaces, request/response flow, bridge API, lifecyclereferences/doist-cards.md — complete card element and action reference (the card schema bible)references/server-setup.md — Express/NestJS server patterns, auth headers, HMAC, local devreferences/publishing.md — branding rules, certification requirements, submission checklist| Surface | Appears In | Multiple Allowed | Key Use Case |
|---|---|---|---|
| Context menu | Project/task right-click menu | Yes | Actions on existing items |
| Composer | Task/comment composer toolbar | Yes | Content generation and insertion |
| Settings | Integration Settings page | One per app | Configuration and preferences |
User triggers extension
→ Todoist sends DoistCardRequest (actionType: "initial")
→ Your server returns DoistCardResponse (card + bridges)
→ Todoist renders card UI
→ User interacts (button click, form submit)
→ Todoist sends DoistCardRequest (actionType: "submit")
→ Your server returns new card or bridges
→ ... repeat until "finished" bridge
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"doistCardVersion": "0.6",
"version": "1.4",
"body": [],
"actions": []
}
| Element | Type Value | Required Props | Common Props |
|---|---|---|---|
| Text | TextBlock | text | size, weight, color, wrap, isSubtle |
| Rich text | RichTextBlock | inlines | horizontalAlignment |
| Image | Image | url | width, height, altText, size |
| Container | Container | — | items, selectAction, minHeight, bleed |
| Columns | ColumnSet | — | columns |
| Column | Column | — | items, width ("auto"/"stretch") |
| Action group | ActionSet | actions | horizontalAlignment |
| Input | Type Value | Required Props | Common Props |
|---|---|---|---|
| Text field | Input.Text | id | placeholder, label, rows, inputStyle, regex |
| Date picker | Input.Date | id | label, value, min, max |
| Time picker | Input.Time | id | label, value |
| Dropdown/radio | Input.ChoiceSet | id, choices | label, style, isSearchable, orientation |
| Toggle | Input.Toggle | id, title | label, value ("true"/"false") |
| Action | Type Value | Required Props | Use Case |
|---|---|---|---|
| Submit | Action.Submit | — | Send form data to server |
| Open URL | Action.OpenUrl | url | Navigate to external page |
| Clipboard | Action.Clipboard | text | Copy text |
| Bridge | bridgeActionType | Key Fields | Use Case |
|---|---|---|---|
| Notify | display.notification | notification.text, notification.type | Show toast |
| Append | composer.append | text | Insert text in composer |
| Sync | request.sync | onSuccessNotification, onErrorNotification | Trigger Todoist sync |
| Finish | finished | — | Close extension modal |
| Header | Value | Purpose |
|---|---|---|
x-todoist-hmac-sha256 | Base64(HMAC-SHA256(body, token)) | Request verification |
x-todoist-apptoken | Short-lived Bearer token | API calls from extension |
@doist/ui-extensions-core
Provides TypeScript types and card builder utilities for Doist Cards.