Snowman
An advanced Twine 2 story format designed for people who already know JavaScript and CSS
Install / Use
/learn @videlais/SnowmanREADME
Snowman
Snowman is an advanced Twine 2 story format designed for people who already know JavaScript and CSS. It was originally created by Chris Klimas and is currently maintained by Dan Cox.
Want to learn more?
The official Snowman documentation has more details.
What does Snowman offer?
Snowman does not use macros as found in sister story formats Harlowe and SugarCube. Instead, it provides template tags, <% ... %>, and a JavaScript API for accessing and manipulating the current story and its passages.
It also includes the JavaScript library jQuery.
Installing Snowman in Twine
To use Snowman as a story format in Twine 2:
- Open Twine 2.
- Go to Twine in the top-level menu.
- Click on Story Formats.
- In the sidebar, click on Add.
- Enter the JSONP URL for the version you want to use from the builds page
For example, to install the latest 2.X version, use:
https://videlais.github.io/snowman/builds/2.X/format.js
Major Branches
Snowman development is organized into major version branches:
- 1.X Branch - Legacy version
- 2.X Branch - Current stable version
- Main Branch - Development version
Building Snowman
To create a new build of Snowman from this repository:
-
Install dependencies:
npm install -
Run the build process:
npm run build -
Package the story format:
npm run package
The compiled story format will be available in the dist/ directory as format.js.
Development Workflow
For a complete build including linting and testing, use:
npm run all
For validation without coverage (faster):
npm run validate
For complete validation with coverage:
npm run validate:full
Testing
Run unit tests:
npm test
Run end-to-end tests (requires compiled HTML files):
npm run test:e2e
Compile e2e test files and run tests in one command:
npm run test:e2e:compile
Run all tests with coverage:
npm run test:all
End-to-End Testing
The e2e tests require HTML files to be compiled from .twee source files using ExTwee. The repository includes a compilation script:
bash compile-e2e-tests.sh
This script compiles all .twee files in the test/e2e/ directory to HTML files using the current story format. The test:e2e:compile npm script combines this compilation step with test execution for convenience.
Related Skills
diffs
338.0kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
1.8kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
ui-ux-designer
Use this agent when you need to design, implement, or improve user interface components and user experience flows. Examples include: creating new pages or components, improving existing UI layouts, implementing responsive designs, optimizing user interactions, building forms or dashboards, analyzing existing UI through browser snapshots, or when you need to ensure UI components follow design system standards and shadcn/ui best practices.\n\n<example>\nContext: User needs to create a new dashboard page for team management.\nuser: "I need to create a team management dashboard where users can view team members, invite new members, and manage roles"\nassistant: "I'll use the ui-ux-designer agent to design and implement this dashboard with proper UX considerations, using shadcn/ui components and our design system tokens."\n</example>\n\n<example>\nContext: User wants to improve the user experience of an existing form.\nuser: "The signup form feels clunky and users are dropping off. Can you improve it?"\nassistant: "Let me use the ui-ux-designer agent to analyze the current form UX and implement improvements using our design system and shadcn/ui components."\n</example>\n\n<example>\nContext: User wants to evaluate and improve existing UI.\nuser: "Can you take a look at our pricing page and see how we can make it more appealing and user-friendly?"\nassistant: "I'll use the ui-ux-designer agent to take a snapshot of the current pricing page, analyze the UX against Notion-inspired design principles, and implement improvements using our design tokens."\n</example>
