aj-geddes/wireframe-prototyping
skills/wireframe-prototyping/SKILL.md
Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.
$ install --global
skillsauthnpx skillsauth add aj-geddes/useful-ai-prompts wireframe-prototypingInstall 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 2, 2026, 3:49 AM57.3s5 files scanned
SKILL.md
- name:
- wireframe-prototyping
- description:
- >
Wireframe Prototyping
Table of Contents
- Overview
- When to Use
- Quick Start
- Reference Guides
- Best Practices
Overview
Wireframes and prototypes bridge the gap between ideas and implementation, enabling teams to test concepts, get feedback, and refine designs before costly development.
When to Use
- Early concept validation
- Stakeholder alignment
- User testing and feedback
- Developer handoff
- Feature exploration
- UX problem-solving
- Rapid iteration
Quick Start
Minimal working example:
Wireframe Principles:
Low Fidelity (Sketches):
Tools: Paper, whiteboard, Balsamiq
Time: 30 minutes - 2 hours
Detail: Basic layout, no colors/fonts
Best For: Brainstorming, exploration
Cost: Free
Medium Fidelity:
Tools: Figma, Sketch, Adobe XD
Time: 2-8 hours
Detail: Layout, content, basic interaction
Best For: Team alignment, feedback
Cost: Low
High Fidelity:
Tools: Figma, Framer, web dev tools
Time: 8+ hours
Detail: Visual design, interactions, animations
Best For: Developer handoff, user testing
Cost: Medium
---
## Wireframe Components
// ... (see reference guides for full implementation)
Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents | |---|---| | Prototyping Tools & Techniques | Prototyping Tools & Techniques | | Wireframe Examples | Wireframe Examples | | Prototype Testing | Prototype Testing |
Best Practices
✅ DO
- Start with low-fidelity sketches
- Get feedback early and often
- Test with real users
- Iterate based on feedback
- Use consistent grids and spacing
- Document interaction flows
- Include edge cases (empty states, errors)
- Create mobile-first wireframes
- Share prototypes for collaboration
- Keep wireframes simple and focused
❌ DON'T
- Jump directly to high-fidelity
- Over-design before validation
- Ignore mobile/responsive needs
- Create wireframes without user input
- Leave interactions undefined
- Make wireframes too detailed
- Test only with team members
- Ignore accessibility
- Lock into designs too early
- Create unrealistic user flows
Related Skills
aj-geddes/zero-trust-architecture
development
VerifiedTrustedCommunity
Implement Zero Trust security model with identity verification, microsegmentation, least privilege access, and continuous monitoring. Use when building secure cloud-native applications.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/xss-prevention
development
VerifiedTrustedCommunity
Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/websocket-implementation
development
VerifiedTrustedCommunity
Implement real-time bidirectional communication with WebSockets including connection management, message routing, and scaling. Use when building real-time features, chat systems, live notifications, or collaborative applications.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/webhook-integration
development
VerifiedTrustedCommunity
Implement secure webhook systems for event-driven integrations, including signature verification, retry logic, and delivery guarantees. Use when building third-party integrations, event notifications, or real-time data synchronization.
154SKILL.mdUpdated Apr 1, 2026