arndvs/ux-interface-design
skills/ux-interface-design/SKILL.md
Phase 6 of Sketch the Solution. Create wireframe variations per screen from screen requirements. Use when asked to 'design interface', 'wireframes', 'create UI', 'interface design', or 'sketch screens'.
content-media
Updated Apr 30, 2026
$ install --global
skillsauthnpx skillsauth add arndvs/ctrlshft ux-interface-designInstall 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 AM15.6s1 file scanned
SKILL.md
- name:
- ux-interface-design
- description:
- Phase 6 of Sketch the Solution. Create wireframe variations per screen from screen requirements. Use when asked to 'design interface', 'wireframes', 'create UI', 'interface design', or 'sketch screens'.
UX Phase 6 — Interface Design
Output "Read UX Interface Design skill." to chat to acknowledge you read this file.
Pipeline position: /ux-user-stories → /ux-system-map → /ux-flow-diagram → /ux-model-attributes → /ux-screen-requirements → /ux-interface-design → /ux-test-driven-design
Create variations of each screen based on screen requirements.
Transform screen requirements into visual interface specs. Focus on "sellable UI" — only design screens that demonstrate value to the customer. Skip admin, login, and user management for now.
Prerequisites
screen-requirements.mdfrom Phase 5flow-diagram.mdfrom Phase 3attributes.mdfrom Phase 4
Steps
Step 1 — Get Inspired from UI Patterns
Invoke /ux-get-inspired
Research established UI patterns relevant to each screen type. Reference Pattern Tap, Dribbble, competitor products.
Step 2 — High-Level Sketches
Invoke /ux-high-level-sketches
Create component layout specs for each screen (~1 minute per screen). Design in chunks: individual components first, then assemble into screens.
Step 3 — Detailed Sketches
Invoke /ux-detailed-sketches
Develop detailed screen specs with specific UI controls, component types, and interaction patterns.
Output
Generate interface-design.md containing:
- Per-screen inspiration references
- Per-screen component layout (high-level)
- Per-screen detailed specification with UI control types
- EGHC simplification notes (what was Eliminated, Grouped, Hidden, Contextualized)
- Multiple variations for key screens (especially landing pages)
Rules
- Sellable UI only — design value-demonstrating screens, skip admin/login
- Design in chunks — components → screens → flows (not full pages at once)
- Apply EGHC simplification: Eliminate (remove what's not used 80% of the time), Group (combine related), Hide (collapse into menus), Contextualize (show only when needed)
- Create multiple variations for landing pages and high-impact screens
- Speed over polish — "the name of the game is speed"
- Notes about design decisions alongside specs
Handoff
After completion, offer:
/ux-test-driven-design— proceed to Phase 7/sketch-the-solution— return to orchestrator
If context is high, follow the standard handoff protocol (@~/dotfiles/instructions/handoff.instructions.md).
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