@maccesar/titools 2.0.6 → 2.2.0

package/skills/alloy-howtos/references/config_files.md

@@ -1,18 +1,5 @@
 # Alloy Configuration Files Reference
 
-## Table of Contents
-
-- [Alloy Configuration Files Reference](#alloy-configuration-files-reference)
-  - [Table of Contents](#table-of-contents)
-  - [Build Configuration File (alloy.jmk)](#build-configuration-file-alloyjmk)
-    - [Compiler Tasks (Event Names)](#compiler-tasks-event-names)
-    - [Event Object](#event-object)
-    - [Logger Object](#logger-object)
-    - [Objects](#objects)
-    - [Keys](#keys)
-
----
-
 ## Build Configuration File (alloy.jmk)
 
 Alloy provides hooks to customize compilation using a JS Makefile (JMK).
@@ -55,7 +42,64 @@ task('post:compile', (event, logger) => {
 | `appJSFile`    | String  | *(compile:app.js only)* Absolute path to `app.js`                                                                                                                                                                   |
 
 ### Logger Object
-...
+
+The `logger` object provides methods and properties to control compilation log output.
+
+#### Properties
+
+| Property        | Type    | Description                                     |
+| --------------- | ------- | ----------------------------------------------- |
+| `DEBUG`         | Number  | READONLY. Output all log messages.              |
+| `INFO`          | Number  | READONLY. Output all except debug messages.     |
+| `WARN`          | Number  | READONLY. Output only warning and error.        |
+| `ERROR`         | Number  | READONLY. Output only error messages.           |
+| `NONE`          | Number  | READONLY. Disable log messages.                 |
+| `logLevel`      | Number  | Sets which log messages to output.              |
+| `showTimestamp` | Boolean | If `true`, outputs timestamp with log messages. |
+| `stripColors`   | Boolean | If `true`, suppresses color output.             |
+
+#### Methods
+
+| Method               | Description                    |
+| -------------------- | ------------------------------ |
+| `debug(msg: String)` | Outputs a debug log message.   |
+| `info(msg: String)`  | Outputs an info log message.   |
+| `warn(msg: String)`  | Outputs a warning log message. |
+| `error(msg: String)` | Outputs an error log message.  |
+
+---
+
+## Global Initializer (alloy.js)
+
+**Location:** `app/alloy.js`
+
+Executed before any controllers load. Use it to set up globals and singletons.
+
+**Common uses:**
+- Creating `Alloy.Collections` (e.g., `Alloy.Collections.myModel = Alloy.createCollection('myModel');`)
+- Setting up `Alloy.Globals` (shared references, utility functions)
+- Initializing singletons (analytics, logging, network managers)
+- Configuring global event listeners
+
+**Example:**
+```javascript
+// app/alloy.js
+Alloy.Globals.loading = Alloy.createWidget('com.example.loading');
+Alloy.Collections.users = Alloy.createCollection('user');
+
+// Global utility
+Alloy.Globals.alert = (title, message) => {
+    Ti.UI.createAlertDialog({ title, message }).show();
+};
+```
+
+---
+
+## Project Configuration File (config.json)
+
+**Location:** `app/config.json`
+
+Alloy uses `config.json` to specify global values, conditional environment and platform values, and widget dependencies.
 ### Objects
 
 | Object            | Description                                                 |
@@ -71,7 +115,34 @@ task('post:compile', (event, logger) => {
 | `backbone`        | Backbone.js version: `0.9.2` (default), `1.1.2`, or `1.3.3` |
 
 **Precedence:** `os` > `env` > `global`. Combinations (e.g., `os:ios env:production`) override single values.
-...
+
+**Runtime Access:** Values are accessible at runtime via `Alloy.CFG.<key>`.
+
+**Example:**
+
+```json
+{
+    "global": { "foo": 1 },
+    "env:development": { "foo": 2 },
+    "env:test": { "foo": 3 },
+    "env:production": { "foo": 4 },
+    "os:ios env:production": { "foo": 5 },
+    "os:ios env:development": { "foo": 6 },
+    "os:ios env:test": { "foo": 7 },
+    "os:android": { "foo": 8 },
+    "dependencies": {
+        "com.foo.widget": "1.0"
+    }
+}
+```
+
+Accessing values: `Ti.API.info(Alloy.CFG.foo)` — on iPhone simulator this returns `6`.
+
+---
+
+## Widget Configuration File (widget.json)
+
+**Location:** Root directory of the widget. Follows the npm `package.json` format with a few exceptions.
 ### Keys
 
 | Key                    | Type   | Required | Description                           |

package/skills/alloy-howtos/references/custom_tags.md

@@ -2,19 +2,6 @@
 
 Custom tags allow you to create reusable UI components without the overhead of widgets. They are an incredibly fast way to build a suite of controls that are as easy to use as dropping a file into the `app/lib` folder.
 
-## Table of Contents
-
-- [Creating Custom Tags in Titanium with Alloy](#creating-custom-tags-in-titanium-with-alloy)
-  - [Table of Contents](#table-of-contents)
-  - [Why Use Custom Tags?](#why-use-custom-tags)
-  - [Basic Setup](#basic-setup)
-  - [Robust Example: CheckBox](#robust-example-checkbox)
-  - [Global Module Override](#global-module-override)
-  - [Key Points](#key-points)
-  - [Custom Tags vs Widgets](#custom-tags-vs-widgets)
-
----
-
 ## Why Use Custom Tags?
 
 When building cross-platform applications, you often need specific UI controls (like a web-style checkbox) that don't exist natively. You have three main approaches:
@@ -137,6 +124,20 @@ This is powerful for adding default colors or properties (like a black default c
 | Return value  | Must return a `Ti.UI.*` component (View, Button, Label, etc.) |
 | Arguments     | Receives all XML/TSS attributes in a single `args` object     |
 
+## Using Custom Tags Without Alloy XML
+
+You can also use custom tags from plain JavaScript via `require()`:
+
+```javascript
+const checkbox = require("checkbox").createCheckBox({
+    caption: "I agree",
+    underline: true
+});
+win.add(checkbox);
+```
+
+This works because custom tags are standard CommonJS modules — the `module` attribute in XML is just a convenience.
+
 ## Custom Tags vs Widgets
 
 | Custom Tags                           | Widgets                                  |

package/skills/alloy-howtos/references/debugging_troubleshooting.md

@@ -1,24 +1,5 @@
 # Alloy Debugging and Troubleshooting
 
-## Table of Contents
-
-- [Alloy Debugging and Troubleshooting](#alloy-debugging-and-troubleshooting)
-  - [Table of Contents](#table-of-contents)
-  - [Overview](#overview)
-  - [Debugging](#debugging)
-    - [Compiler Error Messages](#compiler-error-messages)
-  - [Troubleshooting](#troubleshooting)
-    - [Error: No app.js Found](#error-no-appjs-found)
-    - [Android: Images, HTML and Assets Not Displaying](#android-images-html-and-assets-not-displaying)
-    - [Android Runtime Error: Cannot Call Method of Undefined](#android-runtime-error-cannot-call-method-of-undefined)
-    - [Android Runtime Error: Alloy is Not Defined](#android-runtime-error-alloy-is-not-defined)
-    - [iOS Application Error: Invalid Method Passed to UIModule](#ios-application-error-invalid-method-passed-to-uimodule)
-    - [iOS Application Error: Undefined is Not an Object](#ios-application-error-undefined-is-not-an-object)
-  - [Getting Help](#getting-help)
-  - [Submitting a Bug Report](#submitting-a-bug-report)
-
----
-
 ## Overview
 
 This guide covers debugging and troubleshooting Alloy applications.
@@ -61,7 +42,7 @@ alloy compile --config platform=<platform>
 
 **Error:** `Uncaught ReferenceError: Alloy is not defined`
 
-**Cause:** Non-controller JavaScript files are not automatically wrapped by Alloy.
+**Cause:** Non-controller JavaScript files are not automatically wrapped by Alloy. See [best_practices.md](best_practices.md) for the safe require pattern for non-controller files.
 
 **Solution:** Require the 'alloy' module:
 ```javascript
@@ -86,14 +67,14 @@ const Alloy = require('alloy');
 
 ## Getting Help
 
-Use the [Titanium Community Questions and Answers Forum](https://developer.axway.com/develop-apps#DevelopApps_Engage):
+Use the [TiDev Community Slack](https://slack.tidev.io/) or [GitHub Discussions](https://github.com/tidev/titanium-sdk/discussions):
 - Include 'alloy' as a tag
 - Include the Alloy version (run `alloy --version`)
 - Include platform information
 
 ## Submitting a Bug Report
 
-Use [GitHub Issues](https://github.com/tidev/alloy/issues):
+Search [existing issues](https://github.com/tidev/alloy/issues) first to avoid duplicates. If none match, create a new issue:
 - Select 'Alloy' as the component
 - Include Alloy version (`alloy --version`)
 - Include environment information

package/skills/alloy-howtos/references/samples.md

@@ -1,19 +1,5 @@
 # Alloy Samples
 
-## Table of Contents
-
-- [Alloy Samples](#alloy-samples)
-  - [Table of Contents](#table-of-contents)
-  - [Kitchen Sink](#kitchen-sink)
-  - [Controller Sample](#controller-sample)
-  - [Conditional Statements in Views](#conditional-statements-in-views)
-    - [The Problem with Traditional Approaches](#the-problem-with-traditional-approaches)
-    - [The Solution: IF Attributes in XML](#the-solution-if-attributes-in-xml)
-    - [Conditional Queries in TSS](#conditional-queries-in-tss)
-    - [Data-Binding with Conditional Queries](#data-binding-with-conditional-queries)
-
----
-
 ## Kitchen Sink
 
 See the [KitchenSink-v2 application on GitHub](https://github.com/tidev/kitchensink-v2) for Alloy samples in a real app.
@@ -70,6 +56,10 @@ if (!ENV_PROD) {
 
 Alloy separates business logic (controllers) from UI definition (XML/TSS). A common challenge is showing/hiding content based on app state (e.g., login status).
 
+:::tip TSS DEFAULTS
+The samples below assume some additional TSS: views and windows use a vertical layout, and the `View` tag has a default height and width of `Ti.UI.SIZE`.
+:::
+
 ### The Problem with Traditional Approaches
 
 **Approach 1: show/hide (in controller)**

package/skills/purgetss/SKILL.md

@@ -27,38 +27,6 @@ This skill automatically detects PurgeTSS usage when invoked and provides utilit
 - **Not detected** → Does NOT suggest PurgeTSS utility classes, does NOT recommend `$.UI.create()`, does NOT reference PurgeTSS-specific patterns
 :::
 
-## Table of Contents
-
-- [PurgeTSS Expert](#purgetss-expert)
-  - [Project Detection](#project-detection)
-  - [Table of Contents](#table-of-contents)
-  - [Core Workflow](#core-workflow)
-  - [Project Structure](#project-structure)
-    - [Understanding `app.tss` vs `_app.tss`](#understanding-apptss-vs-_apptss)
-    - [Checking for Unused/Unsupported Classes](#checking-for-unusedunsupported-classes)
-    - [How `utilities.tss` Works](#how-utilitiestss-works)
-  - [Quick Start](#quick-start)
-  - [Critical Rules (Low Freedom)](#critical-rules-low-freedom)
-    - [⭐ PREFER `$.UI.create()` for Dynamic Components](#-prefer-uicreate-for-dynamic-components)
-    - [🚨 RESPECT USER FILES](#-respect-user-files)
-    - [🚨 NO FLEXBOX - Titanium Doesn't Support It](#-no-flexbox---titanium-doesnt-support-it)
-    - [🚨 PLATFORM-SPECIFIC PROPERTIES REQUIRE MODIFIERS](#-platform-specific-properties-require-modifiers)
-    - [Other Mandatory Rules](#other-mandatory-rules)
-  - [Common Anti-Patterns](#common-anti-patterns)
-  - [Class Verification Workflow](#class-verification-workflow)
-    - [Verification Steps](#verification-steps)
-    - [What HAS Classes vs What DOESN'T](#what-has-classes-vs-what-doesnt)
-  - [Reference Guides](#reference-guides)
-    - [Essential References](#essential-references)
-    - [Setup \& Configuration](#setup--configuration)
-    - [Customization](#customization)
-    - [Layout \& Styling](#layout--styling)
-    - [Fonts \& Animations](#fonts--animations)
-  - [Examples](#examples)
-  - [Related Skills](#related-skills)
-
----
-
 ## Core Workflow
 
 1. **Setup**: `purgetss create 'name'` or `purgetss init` for existing projects
@@ -229,16 +197,15 @@ When building complex UIs, carefully choose the layout mode for each container:
 
 **`composite`** (default) - Absolute positioning with `top`, `left`, etc.:
 ```xml
-<View class="w-screen h-screen">
-  <View class="absolute top-0 left-0 bg-red-500 wh-12" />
-  <View class="absolute bottom-0 right-0 bg-blue-500 wh-12" />
+<View class="h-screen w-screen">
+  <View class="wh-12 absolute left-0 top-0 bg-red-500" />
+  <View class="wh-12 absolute bottom-0 right-0 bg-blue-500" />
 </View>
 ```
 
 **Common Issue:** If you see elements appearing in unexpected positions (e.g., a header bar "behind" content), check if parent containers have conflicting layout modes. Each container's layout affects its direct children only.
 :::
 
-
 ### 🚨 PLATFORM-SPECIFIC PROPERTIES REQUIRE MODIFIERS
 
 :::danger CRITICAL: Platform-Specific Properties Require Modifiers
@@ -395,6 +362,7 @@ Load these only when needed:
 ### Setup & Configuration
 - [Installation & Setup](references/installation-setup.md) - First run, VS Code, LiveView
 - [CLI Commands](references/cli-commands.md) - All `purgetss` commands
+- [Migration Guide](references/migration-guide.md) - Migrating existing apps from manual TSS to PurgeTSS
 
 ### Customization
 - [Deep Customization](references/customization-deep-dive.md) - config.cjs, colors, spacing, Ti Elements
@@ -411,6 +379,12 @@ Load these only when needed:
 - [Opacity Modifier](references/opacity-modifier.md) - Color transparency with /50 syntax
 - [Titanium Resets](references/titanium-resets.md) - Default styles for Ti elements
 
+### Performance
+- [Performance Tips](references/performance-tips.md) - Optimizing PurgeTSS apps (bridge crossings, ListView, animations)
+
+### Components
+- [TiKit UI Components](references/tikit-components.md) - Ready-to-use Alerts, Avatars, Buttons, Cards, Tabs built with PurgeTSS
+
 ### Fonts & Animations
 - [Icon Fonts](references/icon-fonts.md) - Font Awesome 7, Material Icons, custom icon libraries
 - [Animation Component](references/animation-system.md) - Declarative `<Animation>` API
@@ -436,7 +410,7 @@ For tasks beyond styling, use these complementary skills:
 
 | Task                                         | Use This Skill |
 | -------------------------------------------- | -------------- |
-| Project architecture, services, controllers  | `alloy-expert` |
+| Project architecture, services, controllers  | `ti-expert`    |
 | Complex UI components, ListViews, gestures   | `ti-ui`        |
 | Alloy MVC concepts, data binding, TSS syntax | `alloy-guides` |
 | Native features (camera, location, push)     | `ti-howtos`    |

package/skills/purgetss/references/EXAMPLES.md

@@ -2,23 +2,6 @@
 
 Complete examples of common patterns with anti-patterns and correct implementations.
 
-## Table of Contents
-
-- [PurgeTSS Examples - WRONG vs CORRECT](#purgetss-examples---wrong-vs-correct)
-  - [Table of Contents](#table-of-contents)
-  - [Titanium Layout Patterns](#titanium-layout-patterns)
-    - [Horizontal Row with Space Between](#horizontal-row-with-space-between)
-    - [Centered Content (Vertically and Horizontally)](#centered-content-vertically-and-horizontally)
-    - [Vertical Stack with Spacing](#vertical-stack-with-spacing)
-    - [Header with Left/Right Elements](#header-with-leftright-elements)
-    - [Available Layout Classes](#available-layout-classes)
-  - [Manual .tss Files Anti-Pattern](#manual-tss-files-anti-pattern)
-  - [Grid with Percentages](#grid-with-percentages)
-  - [Gap Usage](#gap-usage)
-  - [Layout Defaults](#layout-defaults)
-
----
-
 ## Titanium Layout Patterns
 
 :::danger NO FLEXBOX IN TITANIUM
@@ -218,6 +201,94 @@ alloy compile
 
 ---
 
+## Padding on Container Views
+
+**❌ WRONG (Padding on Views doesn't work in Titanium):**
+```xml
+<View class="p-4">
+  <Label text="Hello" />
+</View>
+```
+
+**✅ CORRECT (Use margins on children instead):**
+```xml
+<View>
+  <Label class="m-4" text="Hello" />
+</View>
+```
+
+**Why:** Titanium Views don't support padding properties. Use margins on child elements.
+
+---
+
+## `w-full` vs `w-screen`
+
+**❌ WRONG (Using percentage-based width):**
+```xml
+<View class="w-full">
+  <Label text="Full width" />
+</View>
+```
+
+**✅ CORRECT (Use Ti.UI.FILL):**
+```xml
+<View class="w-screen">
+  <Label text="Full width" />
+</View>
+```
+
+**Difference:**
+- `w-full` = `width: '100%'` (percentage of parent)
+- `w-screen` = `width: Ti.UI.FILL` (native fill constant)
+
+**Use `w-screen` for full-width elements** in Titanium.
+
+---
+
+## `rounded-full` Without Size
+
+**❌ WRONG (rounded-full alone doesn't exist):**
+```xml
+<View class="h-12 w-12 rounded-full" />
+```
+
+**✅ CORRECT (Use rounded-full-XX where XX × 4 = element size):**
+```xml
+<!-- For 48×48 circle, use rounded-full-12 (12 × 4 = 48) -->
+<View class="rounded-full-12" />
+```
+
+**Note:** `rounded-full-XX` already includes width and height. No need for separate `w-` or `h-` classes.
+
+**Examples:**
+- `rounded-full-8` = 32×32 circle
+- `rounded-full-12` = 48×48 circle
+- `rounded-full-16` = 64×64 circle
+
+---
+
+## Square Brackets for Arbitrary Values
+
+**❌ WRONG (Using square brackets like Tailwind CSS):**
+```xml
+<View class="w-[100px] bg-[#ff0000]" />
+```
+
+**✅ CORRECT (PurgeTSS uses parentheses):**
+```xml
+<View class="w-(100px) bg-(#ff0000)" />
+```
+
+**PurgeTSS syntax for arbitrary values uses `()` not `[]`.**
+
+**Examples:**
+- `w-(100px)` - Custom width
+- `bg-(#ff0000)` - Custom background color
+- `mt-(20dp)` - Custom margin top
+- `text-(#333333)` - Custom text color
+
+---
+
 ## Layout Defaults
 
 **❌ WRONG (Explicit composite class):**
@@ -245,3 +316,21 @@ alloy compile
 <!-- Omitting layout defaults to composite -->
 <View>
 ```
+
+---
+
+## Quick Reference Table
+
+| Anti-Pattern          | Why It Fails             | Correct Approach        |
+| --------------------- | ------------------------ | ----------------------- |
+| `flex-row`            | Flexbox not supported    | `horizontal`            |
+| `flex-col`            | Flexbox not supported    | `vertical`              |
+| `justify-*`           | Flexbox not supported    | Use margins/positioning |
+| `items-center`        | Flexbox not supported    | Use `center` class      |
+| `p-4` on View         | No padding on containers | `m-4` on children       |
+| `w-full`              | Percentage-based         | `w-screen` (Ti.UI.FILL) |
+| `rounded-full`        | Needs size suffix        | `rounded-full-12`       |
+| `composite` class     | Already default          | Omit it                 |
+| `w-[100px]`           | Wrong syntax             | `w-(100px)`             |
+| Manual `.tss`         | Overwritten by PurgeTSS  | Use utility classes     |
+| `gap` with `%` widths | Total exceeds 100%       | Use explicit margins    |

package/skills/purgetss/references/animation-system.md

@@ -13,73 +13,6 @@ The Animation object describes the properties of an animation. It represents:
 
 When the `play` method is called on a View, the View is animated from its current state to the state described by the `Animation` object. The properties that can be animated include the view's position, size, colors, transformation matrix, and opacity.
 
-## Table of Contents
-
-- [PurgeTSS Animation System](#purgetss-animation-system)
-  - [Table of Contents](#table-of-contents)
-  - [Installation](#installation)
-  - [Basic Usage](#basic-usage)
-  - [Available Methods](#available-methods)
-  - [The `play` Method](#the-play-method)
-    - [`play(views, [callback])`](#playviews-callback)
-    - [Play Example 1](#play-example-1)
-    - [Play Example 2: Complex Animations with States](#play-example-2-complex-animations-with-states)
-    - [`toggle(views, [callback])`](#toggleviews-callback)
-  - [The `open` and `close` Methods](#the-open-and-close-methods)
-    - [`open(views, [callback])`](#openviews-callback)
-      - [Open Method Example](#open-method-example)
-    - [`close(views, [callback])`](#closeviews-callback)
-      - [Close Method Example](#close-method-example)
-  - [The `apply` Method](#the-apply-method)
-    - [`apply(views)`](#applyviews)
-    - [Apply Example: TikTok-like Interface](#apply-example-tiktok-like-interface)
-  - [The `draggable` Method](#the-draggable-method)
-    - [Draggable Example](#draggable-example)
-    - [`drag` and `drop` Modifiers](#drag-and-drop-modifiers)
-      - [Drag \& Drop Example](#drag--drop-example)
-    - [`draggingType` Property](#draggingtype-property)
-      - [Dragging Type Example](#dragging-type-example)
-    - [`bounds` Modifier](#bounds-modifier)
-      - [Bounds Example 1: Local Bounds](#bounds-example-1-local-bounds)
-      - [Bounds Example 2: Global Bounds](#bounds-example-2-global-bounds)
-    - [`vertical` and `horizontal` Constraints](#vertical-and-horizontal-constraints)
-      - [Constraint Example](#constraint-example)
-  - [State Modifiers](#state-modifiers)
-    - [`open:` and `close:`](#open-and-close)
-    - [`complete:` Modifier](#complete-modifier)
-      - [Complete Example: Wordle Animation](#complete-example-wordle-animation)
-    - [`children:`](#children)
-    - [`child:`](#child)
-  - [Complex UI Elements](#complex-ui-elements)
-  - [Available Utilities](#available-utilities)
-    - [anchorPoint](#anchorpoint)
-    - [autoreverse](#autoreverse)
-    - [curve](#curve)
-    - [delay](#delay)
-    - [duration](#duration)
-    - [repeat](#repeat)
-    - [rotate](#rotate)
-    - [scale](#scale)
-    - [drag-apply, drag-animate](#drag-apply-drag-animate)
-    - [opacity-to-\*, toggle-visible](#opacity-to--toggle-visible)
-    - [zoom-in-*, zoom-out-*](#zoom-in--zoom-out-)
-  - [Best Practices](#best-practices)
-    - [1. Use Semantic IDs](#1-use-semantic-ids)
-    - [2. Combine Methods for Sequences](#2-combine-methods-for-sequences)
-    - [3. Use `complete:` for Post-Animation State](#3-use-complete-for-post-animation-state)
-    - [4. Leverage `children:` for Batch Animations](#4-leverage-children-for-batch-animations)
-    - [5. Use `toggle` for UI States](#5-use-toggle-for-ui-states)
-  - [Common Patterns](#common-patterns)
-    - [Modal Fade In/Out](#modal-fade-inout)
-    - [Slide Up/Down](#slide-updown)
-    - [Scale on Touch](#scale-on-touch)
-    - [Draggable Element with Bounds](#draggable-element-with-bounds)
-  - [Animation Properties Summary](#animation-properties-summary)
-    - [State Modifiers](#state-modifiers-1)
-    - [Timing and Special Classes](#timing-and-special-classes)
-
----
-
 ## Installation
 
 ```bash

package/skills/purgetss/references/apply-directive.md

@@ -1,23 +1,5 @@
 # The `apply` Directive
 
-## Table of Contents
-
-- [The `apply` Directive](#the-apply-directive)
-  - [Table of Contents](#table-of-contents)
-  - [Create Complex Classes and IDs](#create-complex-classes-and-ids)
-  - [Set Any ID, Class, or Ti Element](#set-any-id-class-or-ti-element)
-  - [Use Any of the Default Classes](#use-any-of-the-default-classes)
-  - [Use Arbitrary Values](#use-arbitrary-values)
-  - [Use Any Newly Defined Class in config.cjs](#use-any-newly-defined-class-in-configcjs)
-  - [Set a String of Classes or an Array of Classes](#set-a-string-of-classes-or-an-array-of-classes)
-  - [Combine with Any Platform, Device, or Conditional-Block Properties](#combine-with-any-platform-device-or-conditional-block-properties)
-  - [Platform-Specific Classes](#platform-specific-classes)
-    - [Omitting the Platform Variant](#omitting-the-platform-variant)
-  - [Complete Example with Platform Variants](#complete-example-with-platform-variants)
-  - [Composing Component Libraries](#composing-component-libraries)
-
----
-
 ## Create Complex Classes and IDs
 
 :::info

package/skills/purgetss/references/arbitrary-values.md

@@ -2,31 +2,6 @@
 
 Sometimes, you may need a specific value that is not included among the default values, or that you only need to use once in your project and do not want to include in the `config.cjs` file. In these cases, you can use **arbitrary values**.
 
-## Table of Contents
-
-- [Arbitrary Values in PurgeTSS](#arbitrary-values-in-purgetss)
-  - [Table of Contents](#table-of-contents)
-  - [Parentheses Notation](#parentheses-notation)
-  - [Color Properties](#color-properties)
-    - [Example with Generated Output](#example-with-generated-output)
-    - [Additional Examples](#additional-examples)
-    - [Complete List of Color Properties](#complete-list-of-color-properties)
-  - [Spacing Properties](#spacing-properties)
-    - [Example with Generated Output](#example-with-generated-output-1)
-    - [Unit Conversion Rules](#unit-conversion-rules)
-    - [Additional Examples](#additional-examples-1)
-    - [Complete List of Spacing Properties](#complete-list-of-spacing-properties)
-  - [Miscellaneous Properties](#miscellaneous-properties)
-    - [Examples](#examples)
-    - [Complete List of Miscellaneous Properties](#complete-list-of-miscellaneous-properties)
-  - [Real-World Examples](#real-world-examples)
-    - [Credit Card Component](#credit-card-component)
-    - [Front Cover Example](#front-cover-example)
-    - [Menu Bar Example](#menu-bar-example)
-  - [Tips for Using Arbitrary Values](#tips-for-using-arbitrary-values)
-
----
-
 ## Parentheses Notation
 
 :::info

package/skills/purgetss/references/class-index.md

@@ -7,52 +7,6 @@ Before suggesting ANY class, verify it exists:
 grep -E "PATTERN" ./purgetss/styles/utilities.tss
 ```
 
-## Table of Contents
-
-- [PurgeTSS Class Index](#purgetss-class-index)
-  - [Table of Contents](#table-of-contents)
-  - [PurgeTSS Naming Conventions](#purgetss-naming-conventions)
-    - [How Classes Are Generated from Titanium Properties](#how-classes-are-generated-from-titanium-properties)
-      - [1. Basic Conversion: camelCase → kebab-case](#1-basic-conversion-camelcase--kebab-case)
-      - [2. Boolean Properties: `property` and `property-false`](#2-boolean-properties-property-and-property-false)
-      - [3. Color Properties: Special Word Replacements](#3-color-properties-special-word-replacements)
-      - [4. No kebab-case Conversion](#4-no-kebab-case-conversion)
-    - [Finding Properties in utilities.tss](#finding-properties-in-utilitiestss)
-  - [Multiple Properties Grouped Together](#multiple-properties-grouped-together)
-  - [All 416 Titanium Properties with Classes](#all-416-titanium-properties-with-classes)
-    - [A-E](#a-e)
-    - [F-L](#f-l)
-    - [M-P](#m-p)
-    - [R-Z](#r-z)
-  - [Class Categories by Prefix (Complete Inventory)](#class-categories-by-prefix-complete-inventory)
-    - [Layout \& Structure](#layout--structure)
-    - [Spacing (Margins \& Padding)](#spacing-margins--padding)
-    - [Positioning](#positioning)
-    - [Colors (Background)](#colors-background)
-    - [Colors (Text \& Foreground)](#colors-text--foreground)
-    - [Borders \& Radius](#borders--radius)
-    - [Typography](#typography)
-    - [Accessibility](#accessibility)
-    - [Input \& Keyboard](#input--keyboard)
-    - [Boolean \& State Classes](#boolean--state-classes)
-    - [Text Transformation](#text-transformation)
-    - [Opacity](#opacity)
-    - [Transformation \& Animation](#transformation--animation)
-    - [Shadows \& Elevation](#shadows--elevation)
-    - [Z-Index \& Overflow](#z-index--overflow)
-    - [Status Bar \& Navigation](#status-bar--navigation)
-    - [UI Component States](#ui-component-states)
-    - [Display \& Sizing](#display--sizing)
-    - [Media \& Video](#media--video)
-    - [Other Special Prefixes](#other-special-prefixes)
-  - [PROHIBITED: CSS Classes (DO NOT EXIST)](#prohibited-css-classes-do-not-exist)
-  - [All 364 Unique Prefixes (Alphabetical)](#all-364-unique-prefixes-alphabetical)
-  - [Quick Verification Commands](#quick-verification-commands)
-  - [When to Use Direct Properties (No Classes)](#when-to-use-direct-properties-no-classes)
-  - [Key Insights from Real Data](#key-insights-from-real-data)
-
----
-
 ## PurgeTSS Naming Conventions
 
 ### How Classes Are Generated from Titanium Properties