Storyline Interactive Builder

$20 - One-time purchase

Buy on Gumroad →

---

🎯 Overview

This skill transforms Claude into an expert Storyline interactive developer, automatically generating production-ready HTML5 activities with:

• ✅ Auto-generated Storyline variables with proper naming conventions
• ✅ Complete project structure (HTML/CSS/JS files)
• ✅ WCAG 2.1 AA accessibility built-in
• ✅ Cross-browser compatibility tested
• ✅ StorylineVariableManager class for handling cross-origin issues
• ✅ 8+ activity templates (games, decision trees, flip cards, and more)
• ✅ Comprehensive debugging guide
• ✅ Full documentation for every generated project

---

🚨 What You're Buying

This is a self-service digital product:

• ✅ Instant download via Gumroad
• ✅ Lifetime access to the skill file
• ✅ Use in unlimited projects
• ✅ Comprehensive documentation included
• ❌ NO ongoing support (docs are excellent)
• ❌ NO guaranteed updates (but free if I release them)
• ❌ NO refunds (digital product, instant delivery)

Buy only if you're comfortable with self-service.

---

🚀 Quick Start

Installation

1. Purchase on Gumroad
2. Download .skill file (instant)
3. In Claude.ai: Settings → Skills → Upload Skill
4. Select the downloaded .skill file
5. Start creating!

Usage

Simply ask Claude to create an interactive:

Create a decision tree activity for customer service training

Claude will:

1. Ask about your style guide (colors, fonts, brand)
2. Confirm technical specifications (resolution, browsers)
3. Auto-generate Storyline variables with proper naming
4. Build complete project structure with all files
5. Include comprehensive documentation

---

🎨 What You Can Build

Enhanced Interactions

• Interactive menus with smooth animations
• Flip cards with 3D effects
• Accordion panels
• Timeline navigation
• Image hotspots

Learning Games

• Word puzzles (crossword, word search, scramble)
• Hangman
• Snake game
• Memory match
• Drag-and-drop sorting

Decision-Based Activities

• Decision trees with branching logic
• Interactive flowcharts
• Choose-your-path narratives
• Risk matrices

---

📦 What's Included

Core Skill File

• Complete Claude.ai skill with specialized instructions
• Project initialization workflow
• Activity type templates
• Variable naming system

Bundled Resources

Scripts:

• storyline-integration.js - StorylineVariableManager class for Storyline communication

References:

• variable-documentation.md - Template for STORYLINE_VARIABLES.md files
• wcag-checklist.md - Complete WCAG 2.1 AA compliance guide
• activity-patterns.md - Code patterns for 8+ activity types
• debugging-guide.md - Comprehensive troubleshooting guide

Assets:

• Complete project template with HTML/CSS/JS structure
• All starter files ready to customize

---

💡 Key Features

Smart Requirements Gathering

The skill systematically collects:

• Activity details (name, type, objectives)
• Technical specs (resolution, browsers, performance)
• Style guide (prompts for brand colors, fonts, screenshots)
• Accessibility requirements (WCAG level, keyboard nav)
• Storyline variable strategy

Auto-Generated Variables

Follows pattern: [ActivityName][Element][Number]

Example for "CustomerService" activity:

• CustomerServiceComplete (True/False) - completion status
• CustomerServiceScore (Number) - progress tracking
• CustomerServiceChoice1 (Text) - user input

Built-in Accessibility

Every project includes:

• Full keyboard navigation
• ARIA labels and screen reader support
• Focus indicators (3px outline, 2px offset)
• Color contrast compliance (4.5:1 for text)
• Reduced motion support
• High contrast mode compatibility

Cross-Browser Tested

All generated code works in:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

---

🎓 Requirements

• Claude.ai: Pro or Team plan (for Skills feature)
• Articulate Storyline: 360 (may work with Storyline 3 but not officially supported)
• Basic knowledge: HTML/CSS/JS helpful but not required (skill generates everything)

---

📖 Documentation

Included Guides

• Quick Start Guide - Get started in 5 minutes
• Variable Documentation Template - How to set up Storyline variables
• WCAG Checklist - Ensure accessibility compliance
• Activity Patterns - Code examples for common interactions
• Debugging Guide - Troubleshoot common issues

Generated for Each Project

• README.md - Setup and integration instructions
• STORYLINE_VARIABLES.md - Complete variable reference
• StyleGuide.md - Design specifications

---

🛠️ How It Works

1. Project Initialization

Claude asks systematic questions to gather all requirements without assuming anything (resolution, style guide, etc.)

2. Variable Generation

Automatically creates properly-named Storyline variables following best practices and industry standards.

3. Project Creation

Generates complete file structure:

ActivityName/
├── index.html
├── css/
│   ├── reset.css
│   ├── variables.css
│   ├── base.css
│   ├── components.css
│   └── activity.css
├── js/
│   ├── storyline-integration.js
│   └── activity.js
├── assets/
│   └── images/
├── STORYLINE_VARIABLES.md
├── README.md
└── StyleGuide.md

4. Documentation

Every project includes comprehensive setup instructions, variable references, and troubleshooting guides.

---

🎯 Why This Skill?

Built by eLearning Professionals

Created by developers who build Storyline interactives daily. Solves real pain points:

• ✅ Cross-origin iframe errors
• ✅ Variable type mismatches
• ✅ Accessibility compliance
• ✅ Browser compatibility
• ✅ Articulate Review issues

Proven in Production

Based on real client projects. Patterns and code have been battle-tested in:

• Corporate training courses
• Government eLearning
• Healthcare education
• Financial services training

---

⚠️ Important - Read Before Buying

NO SUPPORT

This is a $20 self-service product. Documentation is comprehensive - that's your support. No email/chat support provided.

NO GUARANTEED UPDATES

You get v1.0.0. If I release updates, you'll get them free. But no promises.

NO REFUNDS

Digital product with instant delivery. All sales final.

SOLD AS-IS

No warranty. Use at your own risk. Works as described in documentation.

If you're not okay with these terms, don't buy.

---

🚀 Purchase

Ready to save hours on every Storyline project?

Buy Now on Gumroad - $20 →

Instant download. Lifetime access.

---

❓ FAQ

Q: Do I get support?
A: No. Documentation is included - that's your support.

Q: Will you update it?
A: Maybe! If I do, you'll get updates free. But no guarantee.

Q: Can I get a refund?
A: No. Digital product, instant delivery, all sales final.

Q: What if it doesn't work?
A: Follow the documentation. It's based on production code that works.

Q: Do I need coding skills?
A: Basic HTML/CSS/JS helps. The skill generates everything for you.

Q: Can I use for client projects?
A: Yes! Generated code is yours. Use commercially.

Q: Can I share the skill file?
A: No. One license per person.

---

📧 Questions?

Before buying: Read the FAQ above.

After buying: The documentation is your support.

Critical bugs only: Report via GitHub Issues (no guarantee of response time)

---

📝 License

Single user license. See LICENSE.md for full terms.

Summary:

• ✅ Use in unlimited projects
• ✅ Modify generated code
• ✅ Commercial use allowed
• ❌ Cannot redistribute skill file
• ❌ Cannot resell

---

© 2025 | License | Changelog