Want to build your own custom extensions?

1. 01

   Open Claude Code

   Claude Code is an AI coding agent that runs in your terminal. Install it, make an empty folder for your extension, and start it there. Sign in with a Claude Pro or Max plan, or a Claude Console account.

   Claude Code quickstart

   TerminalCopy

   curl -fsSL https://claude.ai/install.sh | bash
   mkdir my-extension && cd my-extension
   claude

   On Windows, run irm https://claude.ai/install.ps1 | iex in PowerShell instead. Rather not use a terminal? Claude Code also runs in the desktop app.

   You end withA Claude Code session open in an empty my-extension folder.

2. 02

   Give it the right docs

   Before you describe your idea, have it read the help docs and API docs from the subscription platform you use. That way it builds to what your portal supports instead of guessing. On Skio? Start with these two.

   Custom extensions on SkioSkio API reference

   Paste into Claude CodeCopy

   Read these before we build anything:
   - [your platform's help doc on custom portal code]
   - [your platform's API docs]
   
   Then tell me in plain English:
   1. Where custom code shows up in my customer portal, and what format it has to be in.
   2. What customer and subscription data it can read, and what it can change.
   3. What it can't do on its own.
   
   One rule for everything we build: never put an API key in the extension. Anyone who opens the portal can read its code. Inside the portal, read and change data as the logged-in customer, using whatever the portal provides for that.

   On Skio, those are the two links above, and the portal gives your extension window.fetchSkioAPI(query, variables) to read and change data as the logged-in customer.

   You end withA plain-English summary of what your extension can and can’t do.

3. 03

   Write a quick PRD

   A one-page plan keeps v1 small. Describe your idea in one sentence. Claude Code asks what it needs, then writes the PRD. Read it and cut anything you don’t need yet.

   Paste into Claude CodeCopy

   I want a custom extension for my customer portal that [describe your idea in one sentence].
   
   Ask me up to 5 questions first. Then write PRD.md, one page max:
   - The problem it solves, and for which subscribers
   - Where it sits in the portal layout
   - What it shows, and what the subscriber can do
   - The subscription data it reads or changes (API calls by name)
   - What happens with no active subscription, several subscriptions, or when the data fails to load
   - How we'll know it works
   
   Keep v1 small. Put nice-to-haves under "Later".

   You end withPRD.md, one page you’ve read and trimmed.

4. 04

   Test it in Claude Code

   Have it build the extension as one file, plus a preview page that fakes the portal’s data, so you can click through every case in your browser first. Ask for changes in plain words until it’s right.

   Paste into Claude CodeCopy

   Build the extension from PRD.md as one self-contained file, extension.html, with the HTML, <style> and <script> together, ready to paste into my portal's custom code editor.
   
   Then make preview.html: load extension.html with a fake version of the portal's API that returns realistic test data, plus a switcher for each case in the PRD (for example active, paused, several subscriptions, none, and an API error). Open it in my browser.
   
   Fix anything that breaks, then tell me what you couldn't test without the real portal.

   You end withextension.html, and a preview.html you’ve clicked through.

5. 05

   Test it in your portal

   Add it to your portal as a draft, then check it as a real subscriber before anyone else sees it. Using Skio as an example:

   1. Go to Storefront → Customer Portal → Branding → Layout.
   2. Click Add custom extension, then Add extension. Name it and paste extension.html into the code editor.
   3. Click Save, then + to add it to the layout. Don’t publish yet.
   4. Open a test subscription from Subscribers → Subscriptions and click its magic link.
   5. Add ?forcePreview=true to the end of the URL to see your saved draft.

   Paste into Claude CodeCopy

   Here's what I see on a test subscription in my real portal: [paste the error from the browser console, or describe what looks wrong]. Fix extension.html and tell me what you changed.

   Skio’s editor preview uses sample data and may not run custom code, so always check in a real session. Paste each fix back into the code editor and save before you check again.

   You end withYour extension working on a real test subscription, still a draft.

6. 06

   Publish

   Publish it from your portal editor, then check it again as a subscriber. On Skio, click Publish in the top right of the portal editor, then open the magic link again without ?forcePreview=true. Keep it light, since every extension adds code the portal has to load.

   Skio’s setup steps

   Want to roll it out slowly? On Skio, add your own email under Test emails in the Branding tab before you publish, and your custom code only runs for those emails. Clear the field when it’s ready for everyone.

   You end withYour extension live in your portal. If other brands could use it, send it in below.

Custom extensions are your own code: Skio support doesn’t write or debug them. Test on a test subscription before you publish, and keep API keys out of anything that runs in the portal.