arndvs/ux-high-level-sketches
skills/ux-high-level-sketches/SKILL.md
Step 6.2 of Sketch the Solution. Create high-level component layout specs for each screen. Use when asked to 'sketch screens', 'high-level wireframes', 'rough sketches', 'layout specs', or 'component layout'.
tools
Updated Apr 30, 2026
$ install --global
skillsauthnpx skillsauth add arndvs/ctrlshft ux-high-level-sketchesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 30, 2026, 2:37 AM17.3s1 file scanned
SKILL.md
- name:
- ux-high-level-sketches
- description:
- Step 6.2 of Sketch the Solution. Create high-level component layout specs for each screen. Use when asked to 'sketch screens', 'high-level wireframes', 'rough sketches', 'layout specs', or 'component layout'.
UX Step 6.2 — High-Level Sketches
Output "Read UX High-Level Sketches skill." to chat to acknowledge you read this file.
Phase: /ux-interface-design → Step 2 of 3
Create component-level layout specifications for each screen. Design in chunks: individual components first, then assemble into full screen layouts. ~1 minute per screen — speed over polish.
Process
-
Break each screen into chunks (components):
- Navigation (header, sidebar, breadcrumbs)
- Content area (list, detail, form)
- Actions (buttons, CTAs, toolbars)
- Filters/search (if applicable)
- Footer/secondary navigation
-
For each chunk, define:
- What component type (card grid, table, form, modal, sidebar)
- What data it displays (from attributes)
- What actions it supports (from screen requirements B)
- Where it sits in the layout (top, left, center, bottom)
-
Generate component layout spec:
### [Screen Name] — Layout
**Header:** Logo | Nav: [Dashboard, Profile, Settings] | User menu
**Filters:** [Search bar] [Skill dropdown] [Location dropdown] [Clear]
**Content:** 2-column card grid
- Each card: [Avatar | Name, Location | Skills tags | View button]
**Pagination:** [Previous] [1] [2] [3] [Next]
**Footer:** [About] [Help] [Terms]
- Create multiple variations for high-impact screens (landing pages, dashboards):
#### Variation A — Card Grid
[layout description]
#### Variation B — Table List
[layout description]
#### Variation C — Map + Sidebar
[layout description]
- Apply the "sellable UI" filter — only design value-demonstrating screens:
- ✓ Design: landing, dashboard, browse, profiles, content
- ✗ Skip: login, signup, admin, settings, user management
Rules
- Design in chunks — components → screens → flows
- Speed over polish — ~1 minute per screen, iterate later
- Sellable UI only — skip screens that don't demonstrate value
- Create 2-3 variations for landing pages and core screens
- Include notes about design rationale alongside specs
- "If you catch yourself getting too detailed, do 10 pushups"
Output
Append to interface-design.md: Per-screen component layout specs with variations.
Related Skills
arndvs/visual-feedback
development
VerifiedTrustedCommunity
Use when implementing UI, checking dark/light mode, or validating animations — adds a visual feedback loop via browser screenshots so frontend changes are verified, not assumed.
SKILL.mdUpdated May 21, 2026
arndvs/press1-check
development
VerifiedTrustedCommunity
Use when Claude Code sessions had many manual approval ("press 1") prompts or when auditing hook permissions; identifies which Bash commands required approval.
SKILL.mdUpdated May 21, 2026
arndvs/plan-archive
tools
VerifiedTrustedCommunity
Use after merging a PR or during periodic cleanup to archive plan-mode files by linking them to merged PRs.
SKILL.mdUpdated May 21, 2026
arndvs/grill-with-docs
testing
VerifiedTrustedCommunity
Use when stress-testing a plan against the project's domain model — grills the design, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise.
SKILL.mdUpdated May 21, 2026