Agent Skills
› jasonkneen/tiny-world-builder
› tinyworld-settings
tinyworld-settings
GitHub指导修改 Tiny World Builder 设置模态框的标签页、面板及控件,确保兼容性、无障碍访问及移动端布局正确。
Trigger Scenarios
修改设置界面UI结构
调整渲染或世界相关配置控件
优化设置搜索与导航逻辑
Install
npx skills add jasonkneen/tiny-world-builder --skill tinyworld-settings -g -y
SKILL.md
Frontmatter
{
"name": "tinyworld-settings",
"description": "Use when changing Tiny World Builder Settings modal tabs, panels, controls, rendering\/world\/material\/crowd\/AI settings, or settings accessibility."
}
Tiny World Settings
Settings live in tiny-world-builder.html inside #render-modal.
Keep settings changes compatible with the existing static single-file app:
- Preserve
data-settings-tabvalues (app,rendering,world,materials,environment,crowd,ai) unless every command-palette and settings caller is updated in the same change. - Preserve existing control IDs. The settings setup code binds controls by
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, tabtabIndex, panel.active, and panelhidden.- Settings tabs should remain real
role="tab"buttons inside arole="tablist"and support click plus Arrow/Home/End keyboard navigation. - Panels should be
role="tabpanel"with stable IDs andaria-labelledbypointing at the matching tab. - Settings search should be a thin UI layer over the existing tab/panel wiring: never rename controls for search, keep hidden rows reversible when the query clears, and route automatic tab changes through
selectSettingsTab(). - Search result counts may be shown inside tab buttons, but keep the tab's
data-settings-tabvalue,role, keyboard navigation, and accessible label in sync.
Structure rules:
- Keep settings grouped by user intent, not implementation variable names.
- Current top-level tabs are Workspace, Rendering, World, Materials, Environment, Crowd, and AI.
- Tabs should stay dense and scannable: desktop may show a short hint; mobile should keep a compact horizontal tab strip.
- Mobile/short-screen scroll:
.settings-cardis height-capped (max-height: calc(100vh - 100px),dvhon phones) and the panels scroll internally (.settings-panels { overflow-y: auto }, layoutflex: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 isgrid-template-rows: auto minmax(0,1fr)so the panels row is the scroller. - Add
data-settings-keywordswhen a setting or panel should be discoverable by broader user language such as performance, mechanics, textures, weather, or model. - Preserve the existing
data-settings-tab/data-settings-panelwiring, ARIA roles, keyboard tab navigation, and search-count chips. - Search should route broad category terms to the right panel without hiding the controls in that panel.
Organization guidance:
- App/Workspace owns the UI theme selector (
ui-theme-mode).Autofollows live UK/BST time-of-day,Darkforces dark chrome, andLightforces light chrome without auto-darkening after-hours. - Rendering: keep image/render-cost controls grouped by intent.
Qualitycovers shadow quality, Resolution, Dynamic resolution, and Target FPS; dynamic resolution treats the Resolution slider as a ceiling and only changes a transient effective scale.Lightingcovers lighting and fill controls;Image effectscovers brightness, saturation, contrast, pixelation, shader AA, and tilt-shift. - World: preview/ghost controls are intentionally removed and forced to zero; do not reintroduce distance/window/opacity controls unless Preview rendering is explicitly brought back. Terrain style covers voxel bevel, landscape/planet toggles, voxel/cottage, and terrain voxel resolution.
Voxel gapandShow crownsare also intentionally removed from the UI and forced off for render stability/performance. - Time & weather popup: the time-of-day range is editable only in Build mode for local lighting previews. Play/Tinyverse/no-edit modes follow live UK/BST time and disable the range; do not persist manual build-time overrides to localStorage.
- Environment owns the
Planescheckbox (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. - Environment owns the admin-only Watcher controls (
watcher-*). The Watcher visual is sourced fromengine/world/assets/god-face_15.html, rendered byengine/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. - Material wear defaults to 100% (
materialWear: '1'and shippedtinyworld:render:materialWear=1.00). When changing shipped render defaults that must override older browser localStorage, bumpRENDER_SETTINGS_VERSIONand updatetinyworld-defaults.jsontogether. - Materials, Environment, Crowd, and AI can be improved independently, but keep their current control IDs and listener wiring intact.
Validation:
- Run the inline script syntax check,
npm test, andnpm run build. - Browser-check Settings opens, every tab can be selected, only one panel is visible, search routes to matching sections and clears cleanly, Arrow/Home/End navigation works, command-palette-style tab clicks still work, and the console has no app errors.
- For responsive settings changes, also check desktop and mobile widths: no horizontal page overflow, tab text does not overflow, search switches to expected panels, and console has no fresh warnings/errors.
Version History
- 2ffaf91 Current 2026-07-06 00:20


