# Skill Node

The [skill-node-ugui](https://stylishesper.gitbook.io/skill-web/editors/components/ugui/skill-node-ugui "mention") can be customized through the hierarchy like any other UI object. Ensure the component's required properties have valid references. UI for skill nodes should always be prefabs.

## Requirements

* A skill node prefab's parent must have the [skill-node-ugui](https://stylishesper.gitbook.io/skill-web/editors/components/ugui/skill-node-ugui "mention") component, or a component that inherits from it, on its parent.
* Ensure that the "Rect Transform"  and  "Icon Image" properties are set from the inspector. "Level Text" is optional.

## Default UI

{% hint style="warning" %}
Create a copy of the prefab and edit that, not the default prefab itself.
{% endhint %}

If you'd like, you can start customization from an existing skill node prefab.

#### Sword Mastery Default

You can find the default skill node prefab, named "DefaultSkillNodeUGUI" in `Assets/StylishEsper/SkillWeb/Resources/Prefabs/uGUI`.

#### Runes Default

The stylized prefabs used by the Runes demo can be found in `Assets/StylishEsper/SkillWeb/Examples/RunesDemo/CustomizedUI/SkillNodes`.

## Using Custom Skill Nodes

To use your custom skill node, simply add it to the size fields of your choice in the [web-view-ugui](https://stylishesper.gitbook.io/skill-web/editors/components/ugui/web-view-ugui "mention") component.
