Skip to content
Skullmaster logoSkullmaster

Getting started

  1. Install Skullmaster

    Section titled “Install Skullmaster”
    npm i -D skullmaster@beta
    npm i @skullmaster/react@beta

  2. Start the development server

    Section titled “Start the development server”
    npx skullmaster serve

    The development server will then be available at:

    http://localhost:8080

  3. Mark a component

    Section titled “Mark a component”

    Register any element you want to generate a skeleton for using the markAsSkull helper from @skullmaster/react. Spread the returned props onto the element:

    import { markAsSkull } from "@skullmaster/react";
    

    <div {...markAsSkull("ProfileCard")}>...</div>;

    The name argument becomes the skeleton name. See Marking components for the full API including tweakForSkull.

  4. Add the provider

    Section titled “Add the provider”

    In your application’s entry file (App.tsx, main.tsx, or layout.tsx), add the Skullmaster component:

    import { Skullmaster } from "@skullmaster/react";
    

    <Skullmaster />;

    This development-only helper collects runtime information and sends it to the CLI.

  5. Generate your first skeleton

    Section titled “Generate your first skeleton”

    Load your application in the browser, hover over the marked component and click:

    Hovering over a marked component and clicking to generate its skeleton

  6. Use the generated skeleton

    Section titled “Use the generated skeleton”

    Once generated, <Skeleton name="UserCard" /> displays the generated skeleton instead of DefaultBone:

    import { Skeleton } from "../skeletons/registry";
    

    function ProfileCardPage({ user, isLoading }) {
      if (isLoading) {
        return <Skeleton name="ProfileCard" />;
      }
      return <ProfileCard user={user} />;
    }

Next: learn how to customize output and how generation works.