/application-design: dense, always-on product screens

This skill holds the application layer of the design method. It builds on the design foundation owned by agentic-auto-improve:website-design (references/foundation.md) and never restates it. A marketing or content page is designed with website-design alone.

The ui-ux-designer agent keeps one step this skill does not repeat: Step 0, the ui-evolution journal lessons. When you run this skill on its own, do that step first (grep .claude/registries/JOURNAL.md and .claude/registries/JOURNAL/*.md for Tags:.*ui-evolution, apply each lesson whose Apply when: matches, treat recurring-mistake as load-bearing), exactly as Step 0 of agents/ui-ux-designer.md words it.

Project Context

App type: Real-time algorithmic trading terminal — data-dense, always-on Stack: Angular 21 + Angular Material 21 (MDC) + TailwindCSS 4 Users: Power traders who need maximum information density and zero cognitive friction

This is trading-terminal guidance. For a project that is not a trading one, keep the density and always-on posture and read the trading wording as the project's own domain.

Step 1 - Read the project profile (halt on anything unusable)

The profile is <project root>/.claude/project-profile.md, where the project root is CLAUDE_PROJECT_DIR when set, else the repository holding the files being designed. Never read the plugin's own copy: it is a template. Read the slots frontend.roots, frontend.theme-polarity and review.documents.

Condition	Outcome	You do
The project root cannot be determined (no CLAUDE_PROJECT_DIR, and no target file yet to locate a repository)	root-undeterminable	Halt and ask which project. Do not search.
Profile file absent at the project root	file-missing	Halt: "no project profile at <path>; run /auto-improve-finish-install".
frontend.roots, frontend.theme-polarity or review.documents row absent	row-missing	Halt, naming the slot.
Any of the three holds template *(...)* prose or is empty	placeholder	Halt, naming the slot. Never guess a theme.
frontend.roots is none	none-authored	Halt: the project declares no frontend to design for.
Target application has no frontend.theme-polarity entry	row-missing (per app)	Halt, naming the application.
Polarity none for the target (a library)	usable	Use token utilities only.
review.documents is none	none-authored	Continue, and say no authoritative documents exist, so the foundation and advisory sources are the only sources.

No colour class is chosen before the target application is matched to a frontend.roots entry and its polarity is read.

Step 2 - Load the foundation (halt if absent)

Read ../website-design/references/foundation.md, the sibling skill's file, in full. If that file is absent, say which path you looked for (resolved against this skill's folder) and halt. Do not continue with the application layer alone. Then read the paths the review.documents slot lists; they are authoritative.

Step 3 - Load the application patterns

Read references/application-patterns.md (in this skill's folder) and apply it on top of the foundation: density, the typography scale, metric grids, badges, cards, skeletons, empty states, value flashes, live regions and the app shell.

Advisory sources

• dataviz (a host built-in skill, not from a plugin): advisory only. Covers chart form heuristic, colour formula and validator, mark specs, stat tiles, dashboard layout, light/dark and accessibility. This plugin's rules and the project's review.documents win over it where they conflict. If it is absent, continue without it.