From titools
Use when working with, reviewing, analyzing, or examining Titanium SDK UI/UX patterns and components — Titanium layouts, ListView/TableView performance optimization, event handling and bubbling, gestures (swipe, pinch), animations, accessibility (VoiceOver/TalkBack), orientation changes, custom fonts/icons, app icons/splash screens, or platform-specific UI (Action Bar, Navigation Bar). AUTO-DETECT: If tiapp.xml exists, invoke BEFORE creating or modifying any UI view, window, or layout. Titanium layouts (composite, vertical, horizontal) differ from web/CSS — never assume web layout behavior.
How this skill is triggered — by the user, by Claude, or both
Slash command
/titools:ti-ui [component][component]This skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
A practical guide to Titanium SDK UI. Covers layouts, event handling, animations, performance, and platform-specific components for iOS and Android.
references/accessibility-deep-dive.mdreferences/animation-and-matrices.mdreferences/application-structures.mdreferences/custom-fonts-styling.mdreferences/event-handling.mdreferences/gestures.mdreferences/icons-and-splash-screens.mdreferences/layouts-and-positioning.mdreferences/listviews-and-performance.mdreferences/orientation.mdreferences/platform-ui-android.mdreferences/platform-ui-ios.mdreferences/scrolling-views.mdreferences/tableviews.mdA practical guide to Titanium SDK UI. Covers layouts, event handling, animations, performance, and platform-specific components for iOS and Android.
️ℹ️ auto-detects titanium projects This skill detects Titanium projects and provides UI guidance.
Detection happens automatically. You do not need to run a command.
Titanium project indicator:
tiapp.xml(required for all Titanium projects)Applicable to both:
- Alloy projects (app/ folder structure)
- Classic projects (Resources/ folder)
Behavior based on detection:
- Titanium detected: Provide UI guidance for Alloy and Classic, ListView/TableView patterns, and platform differences
- Not detected: State this is for Titanium projects only and skip UI guidance
| Topic | Reference |
|---|---|
| App structures | application-structures.md |
| Layouts, positioning, units | layouts-and-positioning.md |
| Events, bubbling, lifecycle | event-handling.md |
| ScrollView vs ScrollableView | scrolling-views.md |
| TableView | tableviews.md |
| ListView templates, performance | listviews-and-performance.md |
| Touch, swipe, pinch, gestures | gestures.md |
| Orientation handling | orientation.md |
| Custom fonts, attributed strings | custom-fonts-styling.md |
| Animations, 2D/3D matrices | animation-and-matrices.md |
| Icons, splash screens, densities | icons-and-splash-screens.md |
| Android action bar, themes | platform-ui-android.md |
| iOS navigation, 3D Touch | platform-ui-ios.md |
| VoiceOver, TalkBack, a11y | accessibility-deep-dive.md |
Ti.UI.SIZE in ListViews. It causes jerky scrolling. Use fixed heights.applyProperties to reduce bridge overhead.accessibilityLabel on text controls on Android. It overrides visible text.dp units for cross-platform consistency.scrollType.🚨 critical: platform-specific properties require modifiers Using
Ti.UI.iOS.*orTi.UI.Android.*properties without platform modifiers will crash cross-platform compilation.Example of the damage:
// Wrong: adds Ti.UI.iOS to an Android build const win = Ti.UI.createWindow({ statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT })Correct approaches:
Option 1: TSS modifier (Alloy projects):
"#mainWindow[platform=ios]": { statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT }Option 2: Conditional code:
if (OS_IOS) { $.mainWindow.statusBarStyle = Ti.UI.iOS.StatusBar.LIGHT_CONTENT }Properties that always require platform modifiers:
- iOS:
statusBarStyle,modalStyle,modalTransitionStyle, anyTi.UI.iOS.*- Android:
actionBarconfig, anyTi.UI.Android.*constantFor platform-specific UI patterns, see platform-ui-ios.md and platform-ui-android.md.
Ti.App, Ti.Gesture, Ti.Accelerometer) on pause to save battery.androidback to prevent unexpected exits.| Feature | iOS | Android |
|---|---|---|
| 3D Matrix | Full support | No support |
| Pinch gesture | Full support | Limited |
| ScrollView | Bidirectional | Unidirectional |
| TableView | Full support | Full support |
| ListView | Full support | Full support |
| Default template image | Left side | Right side |
| ListView action items | Swipe actions | No |
| Modal windows | Fills screen, covers tab bar | No effect (always full) |
| Navigation pattern | NavigationWindow | Back button + Menu |
SIZE or FILL based on component defaultsWhen you need specific patterns, grep these terms in the reference files:
TabGroup, NavigationWindow, modal, execution context, androidbackdp, Ti.UI.SIZE, Ti.UI.FILL, composite, vertical, horizontaladdEventListener, cancelBubble, bubbling, Ti.App.fireEventTableView, TableViewRow, setData, appendRow, classNameItemTemplate, bindId, setItems, updateItemAt, markerswipe, pinch, longpress, shake, accelerometeranimate, create2DMatrix, create3DMatrix, autoreversefontFamily, PostScript, createAttributedString, ATTRIBUTE_DefaultIcon, appicon, nine-patch, drawable, splash, iTunesArtwork, adaptiveAction Bar, onCreateOptionsMenu, theme, Material3, talkback3D Touch, Popover, SplitWindow, badge, NavigationWindowaccessibilityLabel, VoiceOver, TalkBack, accessibilityHiddenFor work beyond UI components, use these skills:
| Task | Use this skill |
|---|---|
| Project architecture, services, memory cleanup | ti-expert |
| Native features (camera, location, push, media) | ti-howtos |
| Alloy MVC, data binding, widgets | alloy-guides |
npx claudepluginhub maccesar/titools --plugin titoolsProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.