How do I install the Replit Extension skill?

Run npx skillmds@latest add pooriaarab/replit-extension in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Replit Extension safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Replit Extension?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Replit Extension free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Replit Extension?

pooriaarab (@pooriaarab) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Replit Extension by pooriaarab — Agent Skill

Name: Replit Extension
Author: pooriaarab

Replit Extension

Build and submit a Replit Extension (a React tool panel under integrations/<name>/ built on the Replit Extensions API) and list it in the Replit Extensions store. Use when creating a Replit extension, building a workspace tool panel, calling an external API from the extension, or fixing type errors where a typed API-result wrapper doesn't match the SDK's actual return. Covers the whole path plus the traps: the extension is a React panel in the Replit workspace (@replit/extensions), and a hand-rolled `unwrap`/`ApiResult` helper that over-specifies the shape of a client method's return (e.g. asserting `data: T[]` when the client returns `{ data?: T[] }`) produces cascading TS2352/TS2345 errors — narrow at the call site instead. Sibling of the other integration skills (raycast-extension, browser-extension). Triggers: 'build a Replit extension', 'Replit Extensions API', '@replit/extensions', 'Replit extensions store', 'my API-result type does not match the SDK return'.

pooriaarab df08b36 3.2 KB Updated Sep 17, 2026

File contents

Building a Replit Extension

A Replit Extension is a React tool panel inside the Replit workspace, built on the Replit Extensions API (@replit/extensions). Source lives in integrations/<name>/. Thin frontend over your own backend — useful for "announce a shipped Repl" flows. Playbook: pooriaarab/scripts scripts/replit-extension/README.md.

The trap that cascades: over-typed result wrappers

A local helper that asserts a client method returns exactly { data: T[] } — when the SDK actually returns { data?: T[] | undefined } or T[] | { data: T[] } — produces a wall of TS2352 / TS2345 "not comparable / not assignable" errors that cascade through every caller. Fix the shape at the boundary: type the wrapper to the SDK's actual return (optional/union), and narrow with Array.isArray(x) ? x : x.data ?? [] at the call site. Don't paper it with any.

The other traps

import.meta.env untyped — Vite + TS needs src/vite-env.d.ts with the vite/client reference (TS2339 otherwise).
Workspace panel, not a page — the extension mounts in Replit's tool dock; store the API key in the extension's own storage, per-user.
Manifest/config declares the tool + permissions; a placeholder id runs in dev but not published.

Build path

React panel on @replit/extensions (New Post / Queue / Accounts commands map well); npm run build.
Compose/schedule a post via your API (platformType string); list upcoming posts.

Submission — Replit Extensions store

Submittable: portal-review. Develop against the extension dev tools, then publish to the Replit Extensions store for review. Note the audience is developers — social-publishing fit is narrow; scope the value accordingly.

Silent-rejection gotchas: over-typed wrappers; missing vite-env.d.ts; unclear value for a dev audience. TBD — confirm current store submission steps at first submission.

Parity checklist

paste + validate your API key · compose + schedule a post (platformType) · list posts · surface success/error.

Related skills

raycast-extension — the other developer-power-user command surface.
browser-extension — sibling per-device-storage tool.

---name: replit-extensiondescription: Build and submit a Replit Extension (a React tool panel under integrations/<name>/ built on the Replit Extensions API) and list it in the Replit Extensions store. Use when creating a Replit extension, building a workspace tool panel, calling an external API from the extension, or fixing type errors where a typed API-result wrapper doesn't match the SDK's actual return. Covers the whole path plus the traps: the extension is a React panel in the Replit workspace (@replit/extensions), and a hand-rolled `unwrap`/`ApiResult` helper that over-specifies the shape of a client method's return (e.g. asserting `data: T[]` when the client returns `{ data?: T[] }`) produces cascading TS2352/TS2345 errors — narrow at the call site instead. Sibling of the other integration skills (raycast-extension, browser-extension). Triggers: 'build a Replit extension', 'Replit Extensions API', '@replit/extensions', 'Replit extensions store', 'my API-result type does not match the SDK return'.---# Building a Replit ExtensionA Replit Extension is a **React tool panel inside the Replit workspace**, built on the **Replit Extensions API** (`@replit/extensions`). Source lives in `integrations/<name>/`. Thin frontend over your own backend — useful for "announce a shipped Repl" flows. Playbook: `pooriaarab/scripts` `scripts/replit-extension/README.md`.## The trap that cascades: over-typed result wrappersA local helper that asserts a client method returns exactly `{ data: T[] }` — when the SDK actually returns `{ data?: T[] | undefined }` or `T[] | { data: T[] }` — produces a wall of **TS2352 / TS2345** "not comparable / not assignable" errors that cascade through every caller. Fix the shape at the boundary: type the wrapper to the SDK's *actual* return (optional/union), and narrow with `Array.isArray(x) ? x : x.data ?? []` at the call site. Don't paper it with `any`.## The other traps1. **`import.meta.env` untyped** — Vite + TS needs `src/vite-env.d.ts` with the `vite/client` reference (TS2339 otherwise).2. **Workspace panel, not a page** — the extension mounts in Replit's tool dock; store the API key in the extension's own storage, per-user.3. **Manifest/config** declares the tool + permissions; a placeholder id runs in dev but not published.## Build path- React panel on `@replit/extensions` (New Post / Queue / Accounts commands map well); `npm run build`.- Compose/schedule a post via your API (`platformType` string); list upcoming posts.## Submission — Replit Extensions store**Submittable: portal-review.** Develop against the extension dev tools, then publish to the **Replit Extensions store** for review. Note the audience is developers — social-publishing fit is narrow; scope the value accordingly.**Silent-rejection gotchas:** over-typed wrappers; missing `vite-env.d.ts`; unclear value for a dev audience. TBD — confirm current store submission steps at first submission.## Parity checklistpaste + validate your API key · compose + schedule a post (`platformType`) · list posts · surface success/error.## Related skills- `raycast-extension` — the other developer-power-user command surface.- `browser-extension` — sibling per-device-storage tool.

Frequently asked questions

Replit Extension

File contents

Building a Replit Extension

The trap that cascades: over-typed result wrappers

The other traps

Build path

Submission — Replit Extensions store

Parity checklist

Related skills

Related skills

Frequently asked questions

How do I install the Replit Extension skill?

What does the Replit Extension skill do?

Is Replit Extension safe to use?

Which AI agents work with Replit Extension?

Is Replit Extension free to use?

Who published Replit Extension?