rakovi4/align-design
.claude/skills/align-design/SKILL.md
Align frontend component styling to match HTML mockup pixel-for-pixel. Reads mockup CSS, compares with component, fixes all differences. Use when user wants to match a component to its mockup or mentions /align-design command.
$ install --global
skillsauthnpx skillsauth add rakovi4/continue-example align-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 24, 2026, 8:59 PM2.0s1 file scanned
SKILL.md
- name:
- align-design
- description:
- Align frontend component styling to match HTML mockup pixel-for-pixel. Reads mockup CSS, compares with component, fixes all differences. Use when user wants to match a component to its mockup or mentions /align-design command.
/align-design - Align Component to Mockup
Update a frontend component's appearance to match its HTML mockup exactly.
Usage
/align-design "Registration"
/align-design 02 # By story number
/align-design RegistrationPage.tsx # By component file
/align-design # Interactive selection
Workflow
- Load
.claude/tech/{browser-testing}/templates/align-design-checklist.md - Locate files: find mockup in
ProductSpecification/stories/NN-story-name/mockups/desktop/and component infrontend/src/features/ - Extract design tokens: work through every checklist item from the template
- Compare and fix: for each token, compare mockup value vs component value. Fix mismatches using the template's Common Mismatches table and Styling Approach.
- Verify: frontend build command, frontend test command (from
technology.mdConventions), Selenium test if exists, visual check
Key Rules
- NEVER remove
data-testidattributes — Selenium tests depend on them - NEVER change component behavior — only styling
- Match mockup exactly — use mockup's CSS values, not framework defaults (see template for specifics)
- Divider, login link, and other elements outside
<form>in mockup must be outside<form>in component
Story Mapping
Read ProductSpecification/stories.md for story number resolution.
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