AgentSkillsCN

orchestrating-feature-adoption

为 32Gamers 门户网站规划功能发现、提示与采纳流程。 当用户需要设计用户引导流程、实施功能提示、添加应用内引导、创建空白状态、规划采纳指标，或构建渐进式披露模式时，可使用此技能。

SKILL.md
--- frontmatter
name: orchestrating-feature-adoption
description: |
  Plans feature discovery, nudges, and adoption flows for the 32Gamers portal.
  Use when: designing user onboarding, implementing feature tooltips, adding in-app guidance, creating empty states, planning adoption metrics, or building progressive disclosure patterns.
allowed-tools: Read, Edit, Write, Glob, Grep, Bash, mcp__serena__find_symbol, mcp__serena__get_symbols_overview, mcp__serena__search_for_pattern, mcp__chrome-devtools__take_screenshot, mcp__chrome-devtools__evaluate_script

Orchestrating Feature Adoption

The 32Gamers portal is discovery-light: a single admin icon plus Ctrl+Alt+A keyboard shortcut are the only entry points to management. This skill documents how to plan and implement feature adoption flows in vanilla JS with Firebase backend.

Quick Start

Adding Feature Discovery (Tooltip Pattern)

javascript
// scripts/app.js - Add tooltip to existing element
const adminIcon = document.querySelector('.admin-icon');
adminIcon.setAttribute('title', 'Admin Access [CTRL+ALT+A]');
adminIcon.setAttribute('aria-label', 'Open admin panel with Ctrl+Alt+A');

Creating Empty States with CTAs

javascript
// When no apps exist, guide user to action
if (apps.length === 0) {
    container.innerHTML = `
        <div class="empty-state">
            <p>No apps found. Add your first app above!</p>
        </div>
    `;
    return;
}

Tracking Feature Engagement

javascript
// app.js pattern - conditional analytics
trackAppClick(appId, appName) {
    if (typeof gtag !== 'undefined') {
        gtag('event', 'app_click', {
            'app_id': appId,
            'app_name': appName
        });
    }
}

Key Concepts

ConceptLocationPattern
Admin discoveryindex.html:46-52Icon + keyboard shortcut + title tooltip
Search activationapp.js:158-196Hidden by default, Ctrl+F activates
Empty statefirebase-admin.html:267-269Clear CTA when no data
Status messagesfirebase-admin.html:289-293Auto-dismiss feedback
Auth state UIfirebase-admin.html:94-103Show/hide sections based on login

Current Product Surfaces

SurfaceStatusGap
First-run welcomeAbsentNo onboarding
Feature tooltipsMinimalOnly admin icon has title
Keyboard hintsHiddenCtrl+F/Ctrl+Alt+A not visible
Progress indicatorsNoneNo setup completion tracking
AnalyticsPartialgtag hook exists, not configured

Adoption Flow Decision Tree

code
User lands on portal
├── First visit?
│   └── [GAP] No welcome/onboarding → Implement first-run detection
├── Wants to manage apps?
│   └── Discover admin icon (visual) OR Ctrl+Alt+A (keyboard)
├── Searching for app?
│   └── [GAP] No hint about Ctrl+F → Add search hint in UI
└── Admin panel empty?
    └── "Add your first app above!" CTA exists ✓

See Also

Related Skills

  • •vanilla-javascript skill for DOM manipulation and event handling
  • •firebase skill for auth state and Firestore operations
  • •css skill for styling tooltips, modals, and status messages
  • •frontend-design skill for cyberpunk-themed UI components
  • •google-oauth skill for admin access control patterns
  • •instrumenting-product-metrics skill for tracking adoption events
  • •designing-onboarding-paths skill for first-run flow design