Modern Web Guidance

Modern Web Guidance provides token-efficient guides for cutting-edge web platform features. The content is organized into several core disciplines:

• User Experience: Focuses on smooth visual states (e.g., View Transitions, entry/exit animations, parallax scroll, and scrollbar-color).
• CSS Layout: Covers modern layout systems (e.g., container queries, subgrid, modern color spaces like oklch, text-wrap tuning, and line-height trimming).
• Performance: Includes speed optimizations (e.g., instant preloading, Interaction to Next Paint (INP) diagnostics, and task scheduling via scheduler.yield).
• Forms & UI: Covers native components (e.g., Anchor Positioning for tooltips, Popover API, dialogs, :user-invalid validation, and auto-sizing fields).
• Accessibility: Focuses on screen reader and keyboard operability, content navigation, and discoverability.
• Built-in AI: Covers local client models (e.g., native translation, summarization, and language detection APIs).

The modern-web-guidance repository provides a collection of specialized guides for implementing modern web features. The User Experience (UX) category includes guides for:

• Accessibility & Themes: adapt-scrollbar-to-contrast-preferences, dark-mode, component-specific-light-dark-theme.
• Animations & Transitions: animate-element-entry-exit, animate-to-from-top-layer, animate-to-intrinsic-sizes, carousel-slide-effects, cross-document-transitions, directional-navigation-transitions, dynamic-sibling-animations, group-element-transitions.
• Layout & Styling: anchor-positioning-tab-underline, child-state-based-styling, complex-shapes, content-based-styling, dynamic-sibling-styling, fluid-scaling.
• Data & Logic: calculate-event-differentials, capture-location-agnostic-data, coordinate-global-events, format-human-readable-durations.
• Interactive Components: carousel-snap-highlights, custom-button-actions, declarative-dialog-popover-control.
• Media & Canvas: apply-webgl-shaders, deliver-optimized-decorative-images, export-html-media-from-canvas, expose-canvas-content-to-browser-features.
• Performance & Optimization: flicker-free-client-side-ab-testing, consistent-cross-document-transitions.

Each guide provides specific implementation patterns and best practices for these modern web capabilities.

When implementing customizable selects, follow these strategic guidelines:

• Use @starting-style: Essential for triggering animations when an element transitions from display: none to visible.
• Avoid ad-hoc scroll locking: Top-layer elements managed by base-select should allow natural backdrop dismiss behaviors.
• Respect motion preferences: Always wrap animation constraints in a prefers-reduced-motion media query to ensure accessibility.
• Test layout behavior: appearance: base-select removes default browser sizing based on the longest option. You may need to set a fixed width or use flex/grid to prevent layout shifts.
• Maintain accessibility: Ensure your <select> has a name attribute and an associated <label>.
• Provide multiple indicators: For the :checked state, do not rely on color alone; use additional indicators like bold font or distinct backgrounds to avoid color-only state communication.

Cloning Sessions

Use session.clone() to create parallel conversations that share the same initial context (like a system prompt) without re-initializing. It is a best practice to call destroy() on the base session after cloning if the clones will manage their own context.

Restoring Sessions

To recreate a session from previous history, pass an array of {role, content} objects to the initialPrompts option in LanguageModel.create().

Privacy Note: If using localStorage to persist history, be aware that it is unencrypted and may contain user PII.

// Cloning
const mainSession = await LanguageModel.create({
	initialPrompts: [{ role: 'system', content: 'You speak like a pirate.' }],
});
const branchA = await mainSession.clone();
mainSession.destroy();

// Restoring
const history = JSON.parse(localStorage.getItem('chat_history') || '[]');
const session = await LanguageModel.create({
	initialPrompts: history,
});