Designing Onboarding Paths

This skill covers first-run experiences, checklists, and guided UI for the 32Gamers cyberpunk portal. The codebase uses vanilla JavaScript with Firebase Auth for user state detection.

Quick Start

First-Visit Detection

javascript
1// scripts/app.js - Add to PortalManager class
2checkFirstVisit() {
3    const hasVisited = localStorage.getItem('32gamers_visited');
4    if (!hasVisited) {
5        this.showWelcomeModal();
6        localStorage.setItem('32gamers_visited', 'true');
7    }
8}

Admin First-Login Detection

javascript
1// firebase-admin.html - After successful auth
2firebase.auth.onAuthStateChanged((user) => {
3    if (user) {
4        const adminKey = `32gamers_admin_${user.uid}`;
5        if (!localStorage.getItem(adminKey)) {
6            showAdminOnboarding();
7            localStorage.setItem(adminKey, 'true');
8        }
9    }
10});

Key Concepts

Existing Patterns

Loading State (Already Implemented)

html
1<!-- index.html lines 64-80 -->
2<div class="loading-placeholder">
3    <div class="spinner-container">
4        <div class="spinner"></div>
5    </div>
6    <p class="loading-text">[INITIALIZING NEURAL LINK]</p>
7</div>

Status Messages (Admin Panel)

javascript
1// firebase-admin.html - 5-second auto-dismiss
2function showStatus(message, type = 'info') {
3    statusDiv.innerHTML = `<div class="status-message ${type}">${message}</div>`;
4    setTimeout(() => statusDiv.innerHTML = '', 5000);
5}

Keyboard Shortcuts (Discoverable)

Common Patterns

Welcome Modal Structure

html
1<div class="onboarding-modal hidden" id="welcomeModal">
2    <div class="modal-content cyber-border">
3        <h2 class="glitch-text">WELCOME, OPERATOR</h2>
4        <div class="onboarding-steps">
5            <div class="step active" data-step="1">Browse Apps</div>
6            <div class="step" data-step="2">Use Search</div>
7            <div class="step" data-step="3">Admin Access</div>
8        </div>
9        <button class="cyber-btn" onclick="dismissWelcome()">BEGIN</button>
10    </div>
11</div>

Empty State with Guidance

javascript
1// When no apps exist in Firebase
2if (apps.length === 0) {
3    container.innerHTML = `
4        <div class="empty-state">
5            <p class="neon-text">NO APPS DETECTED</p>
6            <p>Press <kbd>Ctrl+Alt+A</kbd> to access admin and add your first app.</p>
7        </div>
8    `;
9}

See Also

• activation-onboarding - First-run flows and welcome screens
• engagement-adoption - Feature discovery and nudges
• in-app-guidance - Tooltips and contextual help
• product-analytics - Tracking onboarding completion
• roadmap-experiments - Feature rollouts
• feedback-insights - User signals and improvements

Related Skills

• See the vanilla-javascript skill for DOM manipulation and event handling
• See the firebase skill for auth state detection
• See the css skill for modal animations and cyberpunk styling
• See the google-oauth skill for admin authentication flows