それぞれのスキンの書き方を説明します。スライダーを順に並べた例題です。リスト4を見てください。
［リスト4］sliderのスキン（WT_slider1.html）
YUI({
skin: {
overrides: {
slider: [ //（1）
'sam',
'sam-dark',
'capsule',
'capsule-dark',
'round',
'round-dark',
'audio-light',
'audio'
]
}
}
}).use('slider', function ( Y ) {
new Y.Slider().render( '#sam' ); //（2）
new Y.Slider().render( '#sam_dark' );
new Y.Slider().render( '#capsule' );
new Y.Slider().render( '#capsule_dark' );
new Y.Slider().render( '#round' );
new Y.Slider().render( '#round_dark' );
new Y.Slider().render( '#audio_light' );
new Y.Slider().render( '#audio' );
} );
</script>
</head>
<body>
<div>
<div>
<div>
<div>
<h4>Light skins</h4>
<div class="yui3-skin-sam"> //（3）
<h5>Sam skin</h5>
<div id="sam"></div>
</div>
<div class="yui3-skin-capsule">
<h5>Capsule skin</h5>
<div id="capsule"></div>
</div>
<div class="yui3-skin-round">
<h5>Round skin</h5>
<div id="round"></div>
</div>
<div class="yui3-skin-audio-light">
<h5>Audio skin (light)</h5>
<div id="audio_light"></div>
</div>
</div>
</div>
<div>
<div>
<h4>Dark skins</h4>
<div class="yui3-skin-sam-dark">
<h5>Sam skin (dark)</h5>
<div id="sam_dark"></div>
</div>
<div class="yui3-skin-capsule-dark">
<h5>Capsule skin (dark)</h5>
<div id="capsule_dark"></div>
</div>
<div class="yui3-skin-round-dark">
<h5>Round skin (dark)</h5>
<div id="round_dark"></div>
</div>
<div class="yui3-skin-audio">
<h5>Audio skin</h5>
<div id="audio"></div>
</div>
</div>
</div>
</div>
</div>
（1）で使用するスライダーを指定しています。（2）は各スライダーをnodeへの対応付けを行っています。（3）は各スライダーのスキンの設定です。対応を以下に表で示します。
スライダーとスキンの対応表
| スライダー | スキン |
| sam | yui3-skin-sam |
| sam-dark | yui3-skin-sam-dark |
| capsule | yui3-skin-capsule |
| capsule-dark | yui3-skin-capsule-dark |
| round | yui3-skin-round |
| round-dark | yui3-skin-round-dark |
| audio-light | yui3-skin-audio-light |
| audio | yui3-skin-audio |
好きな形を選んで使ってみてください。
