stn
Screen Tree Notation (STN)
STN is a notation for representing screen, global layout, and component element trees using Markdown lists.
Use this skill as the canonical syntax reference. Other skills should make product or rendering decisions themselves, then use these rules to keep STN files valid and interoperable.
File Layout
Use this default structure:
design/
GLOBAL.md
ProductList.md
components/
ProductCard.md
FilterBar.md
More from m00nlygreat/picky-ux-skills
ia
Generate an Information Architecture (IA) document from a service plan, PRD, or product idea. Outputs a structured screen hierarchy as Markdown nested lists and saves to SCREENS.md.
19screen-design
Design a screen's element tree in Screen Tree Notation (STN) format. Uses ./design/GLOBAL.md and reusable STN components from ./design/components.
14wireframe
Generate ./wireframe.html directly from STN Markdown files in ./design. Use when Codex needs to turn STN screen/component trees into a GUI-like wireframe prototype without using a generator script; use $stn as the canonical STN syntax reference while parsing.
10startup-advisor
>
8survey-advisor
>
8design
Design product screens and shared layouts as STN files under ./design. Use when Codex needs to turn SCREENS.md entries, IA, PRDs, or screen requirements into UX element trees, decide layout/content/actions/responsive behavior, create or reuse components, and save screen design Markdown.
5