Use when adding new error messages to React, or seeing "unknown error code" warnings.
npx skills add featbit/featbit-skills --skill "featbit-getting-started"
Install specific skill from multi-skill repository
# Description
Step-by-step guide for getting started with FeatBit including creating feature flags, interactive demos, multi-variant flags, and SDK integration
# SKILL.md
name: featbit-getting-started
description: Step-by-step guide for getting started with FeatBit including creating feature flags, interactive demos, multi-variant flags, and SDK integration
appliesTo:
- "**"
FeatBit Getting Started Guide
Complete hands-on guide to getting started with FeatBit, covering environment initialization, creating boolean and multi-variant feature flags, interacting with the Dino Game demo, and integrating FeatBit SDKs into your applications.
Overview
This skill provides practical, step-by-step guidance for new FeatBit users to quickly understand core concepts through the interactive "Getting Started" experience in the FeatBit portal. You'll learn to create feature flags, see them in action with the Dino Game demo, and integrate FeatBit into your applications using SDKs.
Core Knowledge Areas
1. Environment Initialization
First-Time Login Setup:
- Log in to FeatBit Cloud or your self-hosted instance
- Specify your organization name on initial login
- Define your project name
- Click "Get Started" button to proceed to the onboarding flow
Prerequisites:
- Access to FeatBit Cloud account, or
- Self-hosted FeatBit instance via Docker Installation
2. Creating Boolean Feature Flags
Basic Feature Flag Creation:
The simplest feature flag type is boolean (true/false). The "game runner" flag demonstrates this:
Steps:
1. Navigate to Feature Flags page
2. Click "+ Add" button (top right)
3. Enter flag name: "game runner"
4. Keep default boolean type
5. Configure variations:
- OFF β returns false (disables feature)
- ON β returns true (enables feature)
6. Set initial state to OFF
7. Click "Save"
Understanding Boolean Flags:
- Boolean flags control binary feature states (on/off, enabled/disabled)
- SDK evaluates flag and returns boolean value to application
- Application code determines what happens based on the returned value
- Turning flag ON typically enables the feature; OFF disables it
3. Interactive Demo - Dino Game
Accessing the Demo:
1. Click "Try interacting with the demo" button on Getting Started page
2. Dino Game loads in demo area
Initial State:
- Game is hidden by default
- Message displays: "Switch 'game-runner' feature flag to ON to release Dino Game"
Making the Game Appear:
1. Go to Feature Flags page
2. Find "game runner" flag
3. Click on flag item or "Detail" button
4. Toggle flag to ON
5. Return to demo page
6. Dino Game now appears and is playable
Key Concept:
This demonstrates real-time feature control - changing flag state in the portal immediately affects the application behavior without code deployment or restart.
4. Creating Multi-Variant Feature Flags
Beyond Boolean - Multiple Variations:
Multi-variant flags allow more than two states, perfect for A/B/C testing, configuration values, or progressive rollouts.
Example: Difficulty Mode Flag
Steps:
1. Navigate to Feature Flags page
2. Click "+ Add" button
3. Name: "difficulty mode"
4. Choose string as variation type
5. Add three variants:
- easy
- normal
- hard
6. Configure serving rules:
- When flag is OFF β serves easy
- When flag is ON β serves normal
- Default: OFF
7. Click "Save"
Demo Interaction:
1. In demo page, click "Next Task" button
2. Dino Game shows difficulty adjustment controls
3. Change targeting rules in flag detail page
4. Observe game difficulty change in real-time
Multi-Variant Use Cases:
- Configuration values (API endpoints, feature limits)
- UI themes or styling options
- Algorithm variations for A/B testing
- Progressive feature rollouts (phases: alpha β beta β stable)
5. SDK Integration
Portal-Guided Integration:
FeatBit provides automatically generated starter code for quick SDK integration.
Integration Steps:
Step 1 - Select Feature Flag:
- Choose one of your created feature flags
- Click "Next" to proceed
Step 2 - Choose SDK and Copy Code:
- Select your programming language/framework
- Portal generates complete starter code including:
- SDK installation command
- SDK initialization with server URL and environment key
- User identification with custom properties
- Feature flag evaluation
- Flag update listener (for real-time changes)
- Basic usage examples
Step 3 - Verify Connection:
- Run the starter code in your IDE
- Portal displays testing results
- Confirms SDK successfully connected to FeatBit
Supported SDKs:
- JavaScript (Client & Server)
- React & React Native
- .NET (Server & Client)
- Python
- Java
- Go
- Node.js
- OpenFeature integrations
See SDK Overview for complete list.
Best Practices
-
Start with Boolean Flags: When learning FeatBit, begin with simple boolean flags before moving to multi-variant flags. This helps you understand the core concepts without complexity.
-
Use the Interactive Demo: The Dino Game demo is designed to provide immediate visual feedback. Use it to experiment with flag changes and understand the impact in real-time before implementing in your application.
-
Follow the Portal Guidance: The Getting Started wizard in the portal provides automatically generated, environment-specific code. This eliminates configuration errors and ensures correct setup.
-
Test Flag Changes: Before implementing flags in production applications, verify behavior in the demo environment or development environment to understand how flag evaluation works.
-
Understand Flag States: Remember that boolean flags have two states (ON/OFF) but multi-variant flags can serve different values in each state. Plan your flag variations based on your use case requirements.
-
SDK Connection Verification: Always verify SDK connection in the portal's Step 3 before proceeding to production integration. This confirms proper configuration and network connectivity.
-
User Context Matters: When evaluating flags, provide meaningful user context (user ID, attributes). This enables advanced targeting and segmentation later.
-
Real-Time Updates: FeatBit SDKs support real-time flag updates via WebSocket. Leverage this for instant feature control without application restarts.
Common Integration Patterns
Pattern 1: Simple Feature Toggle
Use Case: Show/hide a feature based on flag state
// After SDK initialization
const isGameEnabled = await client.boolVariation('game-runner', false);
if (isGameEnabled) {
// Render game component
renderDinoGame();
} else {
// Show placeholder or nothing
showPlaceholder('Feature not available');
}
Pattern 2: Configuration via Multi-Variant Flag
Use Case: Adjust application behavior based on flag variation
// Get difficulty mode
const difficulty = await client.variation('difficulty-mode', 'easy');
// Configure game based on difficulty
switch(difficulty) {
case 'easy':
setGameSpeed(1.0);
break;
case 'normal':
setGameSpeed(1.5);
break;
case 'hard':
setGameSpeed(2.0);
break;
}
Pattern 3: Real-Time Flag Updates
Use Case: React to flag changes without page reload
// Listen for flag changes
client.on('update', (changes) => {
if (changes.includes('difficulty-mode')) {
const newDifficulty = client.variation('difficulty-mode', 'easy');
updateGameDifficulty(newDifficulty);
}
});
Next Steps After Getting Started
After completing the Getting Started guide, explore these topics:
Immediate Next Steps:
1. Testing in Production - Learn how to safely test features in production environments
2. Targeted Progressive Delivery - Roll out features to specific user segments
3. User Targeting - Create targeting rules based on user attributes
4. Percentage Rollouts - Gradually release features to percentage of users
Advanced Topics:
5. Experimentation & A/B Testing - Measure feature impact with metrics
6. Entitlement Management - Control feature access based on subscription tiers
7. Remote Configuration - Use feature flags for dynamic configuration
8. Feature Workflow - Implement scheduled flag changes and triggers
Troubleshooting Common Issues
Issue: Demo doesn't show flag changes
- Verify flag is saved properly in portal
- Check browser console for WebSocket connection errors
- Refresh demo page if connection was interrupted
Issue: SDK connection fails in Step 3
- Verify environment key is correct (check for copy/paste errors)
- Ensure server URL is accessible from your network
- Check firewall settings if using self-hosted instance
Issue: Flag evaluation returns default value
- Confirm flag name matches exactly (case-sensitive)
- Verify SDK is initialized before evaluation
- Check that environment key corresponds to correct environment
Documentation Reference
Official Getting Started Documentation:
- Create a Feature Flag
- Try Interacting with the Demo
- Create a Multi-Variant Feature Flag
- Connect an SDK
Additional Resources:
- SDK Overview
- Feature Flags Management
- User Targeting Documentation
Related Topics
- FeatBit SDK Integration (language-specific skills)
- Feature Flag Management and Organization
- User Targeting and Segmentation
- A/B Testing and Experimentation
- FeatBit Deployment Options
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.