design
Screen Design Skill
Design individual screen element trees using Screen Tree Notation (STN). This skill owns the UX structure decisions; $stn owns the notation rules.
Default workspace:
- Screen files live in
./design - The shared global layout is
./design/GLOBAL.md - Reusable components live in
./design/components/{ItemName}.md
Reference
Use $stn as the canonical syntax reference before writing or validating STN. Do not duplicate STN grammar in this skill; use this skill to decide what the screen should contain and how it should be structured.
Flow
Step 1: Gather Screen Requirements
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
>
8stn
Canonical reference for Screen Tree Notation (STN) syntax, validation, imports, components, GLOBAL layout, responsive annotations, and examples. Use when Codex needs to read, write, validate, refactor, render, or transform STN files in ./design, including work for $design and $wireframe.
5