Why create a custom APL layout for the Tic-Tac-Toe skill?

Handling nine positions for all the markers in the Tic-Tac-Toe skill board becomes challenging on all the Alexa-enabled devices, unless your design strategy treats the marker as a visual entity by using a layout. If you place an AlexaImage component inside a Frame, and define their combination as a Marker layout, you can write a readable APL document, while avoiding redundancy in your code.

Why use a Frame?

A Frame holds a single child and has a border and background color. Keeping it would help implementation of a nice future features. For example, you can use a Frame if you want to change the background color of any marker on the Tic-Tac-Toe board, such as when the user states a move that was already played. In addition, when you nest the AlexaImage in a Container or a Frame, you can use their spacing base parameter to @spacingLarge for better visual results when you display the markers in a row. Other than that, as a general rule, avoid nesting.