Diwali Special40% off every SkillGild Pro plan

Claim 40%

Halloween Special40% off your first 3 months of SkillGild Pro

Code FESTIVE40Claim 40%

Festive Special40% off your first 3 months of SkillGild Pro

Code FESTIVE40Claim 40%
SkillGild
Sign inCreate account
Design

Page Companion

An interactive character for a web page: it follows the cursor, reacts when clicked and ships as a React component with no backend and no runtime API key. Pick from a ready-made character set, delivered as sprite sheets.

  • Included with SkillGild Pro
  • Runs locally in your agent
  • v1.0.0
  • SkillGild
skillgild install page-companion
Works with
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • Antigravity
and any MCP client

Based on page-mascot by Kamran Ahmed (MIT)

What you get

  • An interactive character on your page that follows the cursor and reacts when clicked, as a React component you drop in.
  • A ready-made character set to choose from, delivered as two sprite sheets: nine head directions and nine expressions.
  • No runtime API key and no backend. The component is pure front end and works on a static site.
  • No per-frame JavaScript: the pointer angle selects a frame by shifting background-position, so it stays cheap even on a busy page.
  • A prefers-reduced-motion path that holds a neutral frame instead of tracking the pointer.

Is it a good fit?

Good for

  • A landing page, portfolio or docs site that wants one piece of character without a heavy animation library.
  • An empty state, a 404 page or a sign-up step that benefits from something that reacts.
  • React, Next.js and Vite projects, or a plain page using the single-file component.
  • Anyone who wants the effect without shipping a canvas or WebGL runtime.

Not for

  • Drawing a brand-new custom character. This listing covers the ready-made set; the generation pipeline is not bundled.
  • Full character animation or cutscenes, which want a character animation skill instead.
  • Pages with no client JavaScript at all: the pointer tracking needs the client.
  • Mobile-only experiences, where there is no cursor to follow and the reaction is limited to taps.

Requirements

  • A React 18+ project, or any page that can load one component file.
  • No API key and no account for the shipped component.
  • Network access on first setup to fetch the chosen character's sprite sheets.

Install the Page Companion skill

Choose your agent and run one command. SkillGild signs you in when needed and connects the skill for you.

Install the SkillGild CLI first. If you already have it, run skillgild update once.

  1. Install this skill for Claude Code.

    Terminal
    skillgild install page-companion --agent claude-code

    On first use, approve the sign-in request in your browser. SkillGild connects Claude Code automatically. Restart or reload your agent, then ask it to use this skill.

Developer detailsAPI examples, server tools and input schemas

How it runs

  1. Your agent starts a session. SkillGild checks your access and allowance, counts one run, and sends the skill's instructions for this task.
  2. Your agent does the work with its own model and tools, in your project. SkillGild makes no AI model call.

Use it from code

Start a session, follow its guide, then end it. Create an API key under Account and pass it as a bearer token.

Terminal
# Prints the session ID, its tools and the instructions for your agent
skillgild session page-companion
skillgild end <session-id>

Questions

How do I install the Page Companion skill in Claude Code?

Install the SkillGild CLI, sign in with skillgild login and register its MCP server with Claude Code, then run skillgild install page-companion --agent claude-code. Use --agent codex, cursor or gemini-cli for other clients. It installs as a skill, so there is no separate Claude Code plugin to add.

Does it need an API key?

No. The component you ship needs no key and makes no API call at runtime. It loads two sprite-sheet images and moves between frames in CSS.

Can I use my own character?

Not through this listing. Custom character generation depends on image-processing scripts that exceed the size limit for a bundled guide file, so they are not included. This version covers the ready-made set, which is what the component needs to run.

Will it slow the page down?

Very little. There is no per-frame JavaScript and no canvas: the pointer angle picks one of nine frames and the component shifts background-position. The cost is two images and a pointer listener.

What happens on touch devices?

There is no cursor to follow, so the character holds a neutral frame and still reacts to taps. Treat the cursor tracking as a desktop enhancement rather than the main feature.

Is it accessible?

It is decorative, so mark it aria-hidden and keep it out of the tab order. With reduced_motion left on, it holds a neutral frame for anyone who has asked for less motion.

Related guides

Setup steps and worked examples for this kind of skill.

Reviews

No reviews yet

Used Page Companion? Your rating helps the next person decide.

Be the first to rate Page Companion
Tap a star
View all