content / skill
page-mascot
A web-page mascot component and a skill for drawing characters, with ready-made characters described in the README.
At a glance
- Purpose
- A web-page mascot component and a skill for drawing characters, with ready-made characters described in the README.
- Runs in
- Local agent with shell
- Operating systems
- Not stated
- Needs
- Runtime: Image tool for drawing custom mascots; Needs internet: Yes; Needs accounts or API keys beyond your agent: Not stated
- Files and data
- Reads files: Not stated; Writes files: Yes; Sends data to other services: Yes
- Tool type
- Skill
- Delivery
- From GitHub
- Version
- Latest on the main branch
- Access
- Code on GitHub
- Compatibility
- According to the README: Codex and Claude Code for drawing characters, and any chat UI if you use the provided prompts yourself. The README gives an npm installation command for the component.
- External costs
- The repository is MIT-licensed and states no pricing. The README says Claude Code draws through the OpenAI images API with an OPENAI_API_KEY. Your coding agent, image tool or model provider may charge for usage.
- Permissions
- The skill acts through your coding agent with the access you give it. According to the README, setup installs the component with npm and installs the skill globally through the Skills CLI. The README describes downloading character sheets into public/mascots and having the agent generate sheets and edit your page to add the component. The README says drawing requires an image tool; Claude Code uses the OpenAI images API with your OPENAI_API_KEY, while Codex uses its own image tool. One README example supplies a personal photo.
- Usage terms
- MIT License, as stated in the repository. See its LICENSE file for the exact terms.
Code on GitHub
nilbuild/page-mascot
MITA mascot that watches the cursor and blinks when you poke it
Public GitHub data fetched · 0 days old
Skill folders in this repository (1)
Folders that contain a SKILL.md file, from GitHub's file list on .
What it does
page-mascot contains a web-page Mascot component and a skill for drawing its characters. The README describes a character that watches the cursor and blinks when clicked.According to the README, each character uses two 3x3 sprite sheets: head directions and expressions. The README says the pointer angle selects a direction cell and a click displays a reaction cell for half a second. The README lists directions, reactions, size, label and className props, and colour, ink, sketch, riso, paper and pixel styles.
The README gives an npm installation for the component and says to download existing characters' sheets into public/mascots. The README gives /page-mascot examples for the skill and says it draws directions and expressions, aligns the sheets, checks for character movement between them and adds the component to the page.
Who it is for
Web developers who want an interactive mascot on a page, using a ready-made character or one their coding agent draws.Example tasks
Ask the page-mascot skill to put a ready-made character, such as the fox, on your page.Ask the skill to draw a chibi otter with chocolate-brown fur.
Attach a photo and ask the skill to make a mascot that looks like you.
Ask the skill for a chibi fox in the riso style.
Point the Mascot component at a directions sheet and a reactions sheet in public/mascots.