Use when changing Tiny World Builder Settings modal tabs, panels, controls, rendering/world/material/crowd/AI settings, or settings accessibility.
72
87%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Settings live in tiny-world-builder.html inside #render-modal.
Keep settings changes compatible with the existing static single-file app:
data-settings-tab values (app, rendering, world, materials, environment, crowd, ai) unless every command-palette and settings caller is updated in the same change.getElementById, so moving controls between sections is safe but renaming IDs is not.selectSettingsTab(name) must guard unknown names and update all tab and panel state together: .active, aria-selected, tab tabIndex, panel .active, and panel hidden.role="tab" buttons inside a role="tablist" and support click plus Arrow/Home/End keyboard navigation.role="tabpanel" with stable IDs and aria-labelledby pointing at the matching tab.selectSettingsTab().data-settings-tab value, role, keyboard navigation, and accessible label in sync.Structure rules:
.settings-card is height-capped (max-height: calc(100vh - 100px), dvh on phones) and the panels scroll internally (.settings-panels { overflow-y: auto }, layout flex:1 1 auto; min-height:0). Never let the card grow unbounded again — on a phone that pushes lower controls off-screen and they become unreachable. On phones the layout is grid-template-rows: auto minmax(0,1fr) so the panels row is the scroller.data-settings-keywords when a setting or panel should be discoverable by broader user language such as performance, mechanics, textures, weather, or model.data-settings-tab / data-settings-panel wiring, ARIA roles, keyboard tab navigation, and search-count chips.Organization guidance:
ui-theme-mode). Auto follows
live UK/BST time-of-day, Dark forces dark chrome, and Light forces light
chrome without auto-darkening after-hours.Quality covers shadow quality, Resolution, Dynamic resolution, and Target FPS; dynamic resolution treats the Resolution slider as a ceiling and only changes a transient effective scale. Lighting covers lighting and fill controls; Image effects covers brightness, saturation, contrast, pixelation, shader AA, and tilt-shift.Voxel gap and Show crowns are also intentionally removed from the UI and forced off for render stability/performance.Planes checkbox (render-planes-enabled) because it
controls ambient flyovers and towed banners. It defaults off for the current
performance pass and should stay searchable by plane/crop-duster/banner terms.watcher-*). The Watcher
visual is sourced from engine/world/assets/god-face_15.html, rendered by
engine/world/69-watcher-layer.js, and must stay a transient Three scene
layer, not saved world data. Keep it world-anchored with X/Y/Z controls so it
zooms/pans with the island; do not re-lock it to the camera. Leave depth
testing enabled so a distant Watcher sits behind the island instead of
painting over it.materialWear: '1' and shipped
tinyworld:render:materialWear = 1.00). When changing shipped render
defaults that must override older browser localStorage, bump
RENDER_SETTINGS_VERSION and update tinyworld-defaults.json together.Validation:
npm test, and npm run build.f21f84b
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.