skills.rest
GodBlf
GodBlfCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

firefly-pio-config

Modify Firefly mascot configuration for models, interactions, and mobile visibility.

1|Updated Feb 16, 2026
Search Tags:#customization#configuration#mascot#spine#firefly#live2d
One-click install
npx skills add https://github.com/GodBlf/godblf.github.io --skill firefly-pio-config
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: firefly-pio-config
Source: https://github.com/GodBlf/godblf.github.io/tree/main/.agents/skills/firefly-pio-config
Command: npx skills add https://github.com/GodBlf/godblf.github.io --skill firefly-pio-config

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill allows users to easily modify the configuration of the Firefly mascot (also known as a 'pio' or 'live mascot') on their website, enabling customization of its appearance, behavior, and responsiveness.

Core Features & Use Cases

  • Model Configuration: Enable or disable Spine or Live2D models.
  • Appearance Tuning: Adjust model path, scale, position, size, and opacity.
  • Interaction Customization: Define click animations, messages, and idle behaviors.
  • Responsiveness: Control visibility and breakpoints for mobile devices.
  • Use Case: A user wants to change the default Spine model used by their Firefly mascot to a new one they've acquired, and also wants to adjust its size and position on the screen to better fit their website's layout.

Quick Start

Use the firefly-pio-config skill to enable the Live2D model and set its path to 'models/my_new_model/index.json'.

Frequently Asked Questions about firefly-pio-config

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure the Firefly mascot model on my website?▼

To configure the Firefly mascot model, you modify the src/config/pioConfig.ts file to adjust model settings, interaction behaviors, and responsive design parameters. This allows you to enable Spine or Live2D models and change model paths.

Can I switch my Firefly mascot from a Spine model to a Live2D model?▼

Yes, you can switch from a Spine model to a Live2D model. The configuration file supports enabling either Spine or Live2D models, allowing you to specify the desired model type and set a new file path for the Live2D model.

How do I adjust the size and position of a Live2D mascot in Firefly?▼

You adjust the Live2D mascot size and position by modifying the appearance tuning parameters in the configuration file. This includes settings for scaling, positioning, size, and opacity to better fit your website's layout.

How do I customize click animations and messages for my website mascot?▼

You customize click animations and messages by updating the interaction customization parameters in the pioConfig.ts file. This allows you to define specific click animations, display messages, and set idle behaviors for the mascot.

How can I hide the Firefly mascot on mobile devices?▼

To hide the Firefly mascot on mobile devices, you use the responsiveness controls in the configuration file. These settings allow you to control mobile visibility and define specific breakpoints for when the mascot should not be displayed.

Do I need any specific dependencies to use the firefly-pio-config skill?▼

No specific dependencies are required to use the firefly-pio-config skill. It directly modifies the Firefly mascot's configuration file to adjust model settings, interaction behaviors, and responsive design parameters without additional components.

Related Skills

Explore More Design & Creative Skills→
JosephWoodallJosephWoodall
1

pathml

Automate computational pathology workflows from WSI loading to graph analysis and ML training.

Community
Intermediate
BIGSHOLBIGSHOL

verify-responsive

Validate TailwindCSS breakpoints and responsive design patterns in UI components.

Community
Intermediate
peopledearpeopledear
1

Frontend Components

Enforce frontend component coding standards in Claude Code workflows.

Official
Basic
eachlabseachlabs
28

vtuber-avatar-generation

Generate anime-style VTuber avatars and Live2D-ready designs via each::sense AI.

Official
Intermediate