ui-craft

Name: ui-craft
Author: mofirojean

27stars2forks

How to install ui-craft?

mofirojean/angular-ui-skills/ui-craft

$npx -y skills add mofirojean/angular-ui-skills --skill ui-craft

Installs into the current project.

Summary

Cross-cutting UI quality and dashboard-design skill. Covers the three tells of an amateur dashboard (data shapes the UI, progressive disclosure, hidden UI), plus the Refactoring UI principles (hierarchy, spacing, typography, color, depth, finishing touches) and how to apply each

Files · 1

View on GitHub

SKILL.md

1	# UI Craft
2
3	> Cross-cutting skill. Pair this with one of the library-specific skills (`spartan-ng-developer`, `primeng-developer`, `ng-zorro-developer`, `angular-material-developer`) plus the base `angular-developer`. This skill teaches what good looks like and why. The library skill teaches which component to reach for. Both load together when the user wants polished UI.
4
5	## When this skill should fire
6
7	Activate eagerly when the user says any of:
8
9	- "Make this look better / cleaner / more polished"
10	- "This feels generic" / "looks like a template"
11	- "Improve the dashboard" / "redesign this page"
12	- "Why does this look amateur"
13	- Specific topics: "hierarchy", "spacing", "typography", "color palette", "shadows", "empty state", "tooltip", "hover state", "loading state"
14
15	Also activate proactively (without being asked) when you see:
16
17	- A dashboard or data-heavy surface being built
18	- A table with all-grey text, no alignment, no muted/active distinction
19	- Form labels in the same weight and color as the values
20	- Color used as the only signal (no icon, no text, no shape backup)
21	- Hover-only actions with no affordance hinting at them
22	- Zero empty states / zero loading states for an async surface
23
24	## The three tells of an amateur dashboard
25
26	These are the patterns that immediately give away a UI built without intent. Each gets its own reference file because each is a discipline, not a single rule.
27
28	1. Data drives the UI. Not the other way around. The shape, density, alignment, color, and chart-vs-table choice all come from the data being displayed, not from a default table template. Read [data-driven-ui.md](references/data-driven-ui.md).
29
30	2. Progressive disclosure. Most actions, controls, and metadata don't belong permanently on screen. They belong tucked behind hover, popover, sheet, or context menu, with a clear affordance. The "spectrum of explicitness" runs from always-visible global actions to on-hover row actions to right-click-revealed power-user actions. Read [progressive-disclosure.md](references/progressive-disclosure.md).
31
32	3. UI is what you can't see. Tooltips on every icon-only button, hover affordances on every clickable area, empty states, loading states, error states, the right-click menu, the keyboard shortcut, the toast on save. These hidden surfaces are most of the actual UI. Read [hidden-ui.md](references/hidden-ui.md).
33
34	## The Refactoring UI principles
35
36	The book Refactoring UI by Adam Wathan and Steve Schoger gives the vocabulary for why a layout feels right. Each chapter maps to a reference here.
37
38	- Hierarchy, Not all elements are equal. Emphasize by de-emphasizing. Labels are a last resort. Separate visual from document hierarchy. Read [hierarchy.md](references/hierarchy.md).
39	- Spacing, Start with too much whitespace, then use a sizing system. Don't fill the screen for the sake of filling it. Avoid ambiguous gaps. Read [spacing.md](references/spacing.md).
40	- Typography, Establish a type scale. Keep line-length in check (45-75ch). Line-height is proportional to font-size. Baseline-align, not center. Read [typography.md](references/typography.md).
41	- Color, Ditch hex for HSL or OKLCH. Define a 9-step shade system per hue. Don't let lightness kill saturation. Greys don't have to be neutral. Color is never the only signal. Read [color.md](references/color.md).
42	- Depth, Emulate a light source. Shadows convey elevation. Two-part shadows (close + ambient). Flat designs can still have depth via overlap and value contrast. Read [depth.md](references/depth.md).
43	- Finishing touches, Supercharge defaults. Add accent borders. Decorate empty backgrounds. Never skip empty states. Use fewer borders, more value contrast. Read [finishing.md](references/finishing.md).
44
45	## Dashboard-specific patterns
46
47	When you're building or improving a dashboard, table, KPI surface, or data-heavy view, also read [dashboard-patterns.md](refere

People who liked this also viewed

6 picks

Type

ui-craft

27stars2forks

View on GitHub

How to install ui-craft?

mofirojean/angular-ui-skills/ui-craft

$npx -y skills add mofirojean/angular-ui-skills --skill ui-craft

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# UI Craft
2
3	> Cross-cutting skill. Pair this with one of the library-specific skills (`spartan-ng-developer`, `primeng-developer`, `ng-zorro-developer`, `angular-material-developer`) plus the base `angular-developer`. This skill teaches what good looks like and why. The library skill teaches which component to reach for. Both load together when the user wants polished UI.
4
5	## When this skill should fire
6
7	Activate eagerly when the user says any of:
8
9	- "Make this look better / cleaner / more polished"
10	- "This feels generic" / "looks like a template"
11	- "Improve the dashboard" / "redesign this page"
12	- "Why does this look amateur"
13	- Specific topics: "hierarchy", "spacing", "typography", "color palette", "shadows", "empty state", "tooltip", "hover state", "loading state"
14
15	Also activate proactively (without being asked) when you see:
16
17	- A dashboard or data-heavy surface being built
18	- A table with all-grey text, no alignment, no muted/active distinction
19	- Form labels in the same weight and color as the values
20	- Color used as the only signal (no icon, no text, no shape backup)
21	- Hover-only actions with no affordance hinting at them
22	- Zero empty states / zero loading states for an async surface
23
24	## The three tells of an amateur dashboard
25
26	These are the patterns that immediately give away a UI built without intent. Each gets its own reference file because each is a discipline, not a single rule.
27
28	1. Data drives the UI. Not the other way around. The shape, density, alignment, color, and chart-vs-table choice all come from the data being displayed, not from a default table template. Read [data-driven-ui.md](references/data-driven-ui.md).
29
30	2. Progressive disclosure. Most actions, controls, and metadata don't belong permanently on screen. They belong tucked behind hover, popover, sheet, or context menu, with a clear affordance. The "spectrum of explicitness" runs from always-visible global actions to on-hover row actions to right-click-revealed power-user actions. Read [progressive-disclosure.md](references/progressive-disclosure.md).
31
32	3. UI is what you can't see. Tooltips on every icon-only button, hover affordances on every clickable area, empty states, loading states, error states, the right-click menu, the keyboard shortcut, the toast on save. These hidden surfaces are most of the actual UI. Read [hidden-ui.md](references/hidden-ui.md).
33
34	## The Refactoring UI principles
35
36	The book Refactoring UI by Adam Wathan and Steve Schoger gives the vocabulary for why a layout feels right. Each chapter maps to a reference here.
37
38	- Hierarchy, Not all elements are equal. Emphasize by de-emphasizing. Labels are a last resort. Separate visual from document hierarchy. Read [hierarchy.md](references/hierarchy.md).
39	- Spacing, Start with too much whitespace, then use a sizing system. Don't fill the screen for the sake of filling it. Avoid ambiguous gaps. Read [spacing.md](references/spacing.md).
40	- Typography, Establish a type scale. Keep line-length in check (45-75ch). Line-height is proportional to font-size. Baseline-align, not center. Read [typography.md](references/typography.md).
41	- Color, Ditch hex for HSL or OKLCH. Define a 9-step shade system per hue. Don't let lightness kill saturation. Greys don't have to be neutral. Color is never the only signal. Read [color.md](references/color.md).
42	- Depth, Emulate a light source. Shadows convey elevation. Two-part shadows (close + ambient). Flat designs can still have depth via overlap and value contrast. Read [depth.md](references/depth.md).
43	- Finishing touches, Supercharge defaults. Add accent borders. Decorate empty backgrounds. Never skip empty states. Use fewer borders, more value contrast. Read [finishing.md](references/finishing.md).
44
45	## Dashboard-specific patterns
46
47	When you're building or improving a dashboard, table, KPI surface, or data-heavy view, also read [dashboard-patterns.md](refere

People who liked this also viewed

6 picks

Type