1. Habit
  2. Skills
  3. Studio Testing skill
supabase · 321 installs

Studio Testing skill
Runs by itself, Studio code changes.

Every Studio change gets right tests.

Install the Studio Testing skill and make it a habit: follow https://gethabit.dev/skills/supabase/studio-testing.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

321 installs113K starsApache-2.0 licenceSource on GitHub ↗

Studio Testing

by supabase · 321 installs

The skill

The studio testing skill gives the testing strategy for Supabase Studio: extract logic into .utils.ts files, test every permutation, use component tests only for complex UI and E2E tests for shared features.

Only when you ask.

The habit

Every Studio change gets right tests.

↻ Runs by itselfStudio code changes

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

Studio code changes. Runs in GitHub Actions or Claude Code routine.

  • ↻ Studio code changes
  • pull request touches apps/studio/

02

It checks its work

tests pass, logic extracted. If a check fails, it tries again.

  • ✓vitest passes
  • ✓each new utility has tests for happy path, malformed and empty input
  • ✓component tests mock APIs with addAPIMock, not vi.mock

03

It remembers

coverage gap board. The next run reads it first: components still holding logic that should be extracted.

loops/studio-test-coverage-loop/board.md

One run, step by step.
Then it stops.

Stop ruleStops after one pull request and 2 fix rounds per run.

  1. 01

    Pick the test type

    Your agent runs the decision tree: unit, component or E2E.

  2. 02

    Extract logic

    It moves pure logic into a ComponentName.utils.ts file next to the component.

  3. 03

    Test every path

    It writes unit tests for valid, malformed, empty and edge inputs.

  4. 04

    Component tests

    For complex UI only, it uses customRender and addAPIMock.

  5. 05

    E2E for shared features

    For self-hosted and platform features it adds a test in e2e/studio/features/ with clicks and keys.

  6. 06

    Run tests

    It runs vitest and records any gaps left.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Studio Testing skill helps.

Use it when

  • ✓ You write tests for Studio code
  • ✓ You decide which test type to write
  • ✓ You review test coverage

Skip it when

  • – You work outside apps/studio
  • – You only change docs

Questions

Studio Testing skill, answered.

When is a component test right?

Only for complex UI interaction, not for calculations that live in a component.

Where do E2E details live?

In the studio-e2e-tests skill.

How do I install the Studio Testing skill?

Copy the prompt at the top into your agent. It installs the skill from supabase/supabase and sets up the habit. Or run npx skills add supabase/supabase --skill studio-testing.

Is the Studio Testing skill free?

Yes. It is published under Apache-2.0. Habit is free too.

Studio Testing. Now as a habit.

Install the Studio Testing skill and make it a habit: follow https://gethabit.dev/skills/supabase/studio-testing.md

  • Free
  • No account
  • Undo in one line

All supabase skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by supabase, published under Apache-2.0. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.