rakovi4/mockups
.claude/skills/mockups/SKILL.md
Generate HTML interface mockups for user stories. Use when user wants to create UI mockups, prototypes, or mentions /mockups command.
$ install --global
skillsauthnpx skillsauth add rakovi4/continue-example mockupsInstall 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 17, 2026, 1:49 AM5.7s1 file scanned
SKILL.md
- name:
- mockups
- description:
- Generate HTML interface mockups for user stories. Use when user wants to create UI mockups, prototypes, or mentions /mockups command.
Generate Interface Mockups
Create production-quality HTML mockups for a user story with mandatory desktop/mobile parity.
Usage
/mockups "Story name"
/mockups 5 # By MVP story number
/mockups # Interactive selection
Phase 1: Context Gathering
Read these files before generating anything:
- Conventions:
ProductSpecification/ui/ui-conventions.md(the single authority for all design rules) - Templates:
ProductSpecification/ui/templates/(browse what's available) ProductSpecification/BriefProductDescription.txtProductSpecification/stories.md(story number lookup)- Story spec:
ProductSpecification/stories/NN-story-name/NN_StoryName.md - Landing page:
Landing/index.html(brand reference) - If exists:
ProductSpecification/stories/NN-story-name/interview.md
Phase 2: Story Selection
Parse user input (by name, by number, or interactive).
Phase 3: Screen Plan (MANDATORY GATE)
You MUST complete this phase fully before writing any HTML file.
- Extract all screen states from the story spec's "Screen States" section. MUST include every state (never skip, merge, or combine).
- Map states to filenames for BOTH desktop AND mobile. Every desktop file MUST have a mobile counterpart.
- Parity check — desktop files = N, mobile files = N. Fix if counts differ.
NEVER proceed to Phase 4 until the Screen Plan table is complete with equal counts.
Phase 4: Generate Mockups
Load .claude/templates/ui/mockup-generation-rules.md for all generation rules, output location, template usage, format, and completion check.
Phase 5: Screenshots
Run /screenshot for both desktop and mobile directories.
Phase 6: Summary
Report: Screen Plan table, total files, screenshot locations, design decisions, whether conventions were updated.
Pre-flight Checklist
- [ ] Every screen state from the spec has a mockup
- [ ] Desktop file count equals mobile file count
- [ ] All patterns match
ui-conventions.md - [ ] Sidebar matches
sidebar.htmltemplate exactly - [ ] Interface text is in Russian
- [ ] Screenshots generated for both desktop and mobile
- [ ] Existing mockups checked (ask user before overwriting)
- [ ] If new UI patterns introduced,
ui-conventions.mdupdated
Templates
.claude/templates/ui/mockup-generation-rules.md— generation rules, format, templates, completion check.claude/templates/ui/icon-reference.md— icon name lookup
Related Skills
rakovi4/test-usecase
testing
VerifiedTrustedCommunity
Run use-case module tests quickly. Use when user wants to run use-case tests or mentions /test-usecase command.
2SKILL.mdUpdated Apr 16, 2026
rakovi4/test-spec
development
VerifiedTrustedCommunity
Generate BDD test specifications for story in 6 categories (API, UI, Load, Infrastructure, Security, Integration). Use when user wants to create test cases or mentions /test-spec command.
2SKILL.mdUpdated Apr 16, 2026
rakovi4/test-review
testing
VerifiedTrustedCommunity
Review tests to replace loose validation (contains, isNotNull, isNotEmpty) with strict validation (isEqualTo on parsed fields). Use when user wants to improve test assertions or mentions /test-review command.
2SKILL.mdUpdated Apr 16, 2026
rakovi4/test-frontend
development
VerifiedTrustedCommunity
Run frontend tests. Use when user wants to run frontend unit tests or mentions /test-frontend command.
2SKILL.mdUpdated Apr 16, 2026