por/mobile-web-feel-native
agents/skills/mobile-web-feel-native/SKILL.md
Improve mobile web apps to feel native by auditing and fixing common mobile UX issues (input zooming, tap highlights, touch delays, overscroll bounce, accidental horizontal scroll, text selection, zoom behavior, viewport units/address bar issues, safe-area padding, CLS, loading feel, caching/optimistic UI, scroll traps like maps, touch target sizing). Use when asked to review, diagnose, or polish mobile web UX or interaction performance.
$ install --global
skillsauthnpx skillsauth add por/dotfiles mobile-web-feel-nativeInstall 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: Jun 3, 2026, 2:32 AM225.8s2 files scanned
SKILL.md
- name:
- mobile-web-feel-native
- description:
- Improve mobile web apps to feel native by auditing and fixing common mobile UX issues (input zooming, tap highlights, touch delays, overscroll bounce, accidental horizontal scroll, text selection, zoom behavior, viewport units/address bar issues, safe-area padding, CLS, loading feel, caching/optimistic UI, scroll traps like maps, touch target sizing). Use when asked to review, diagnose, or polish mobile web UX or interaction performance.
Mobile Web Feel Native
Quick Start
- Confirm target devices, browsers, and whether the app runs as a PWA/standalone.
- Reproduce on a real device or emulator and capture a short screen recording.
- Run the full checklist in
references/mobile-web-feel-native-checklist.mdand tag each issue as "impact" or "nice-to-have." - Provide fixes with clear tradeoffs and validation steps.
Workflow
-
Scope and constraints
- Identify the exact flows (login, feed, filters, detail view, checkout, maps).
- Note accessibility requirements, brand constraints, and app shell expectations.
-
Observe and categorize
- Classify issues using the checklist categories (input zoom, tap highlight/touch delay, overscroll, safe-area padding, selection/pointer issues, layout shift, animation jank, loading feel, scroll traps, horizontal scroll, touch targets).
- Record reproduction steps, affected devices, and visible impact.
-
Propose fixes
- Provide specific CSS/JS changes and explain why they improve native feel.
- Call out tradeoffs (e.g.,
user-select: nonescope, overscroll suppression, pinch-zoom decisions).
-
Validate
- Re-test the exact interaction after fixes and confirm no regressions.
- List any remaining risks or follow-ups.
Default Checks (Always Evaluate)
- Input auto-zoom and keyboard occlusion
- Tap highlight flash and touch delay
- Overscroll bounce and pull-to-refresh behavior
- Safe-area top/bottom clearance for sticky controls
- Accidental text selection on non-text UI
- Horizontal scroll edge cases
- Layout stability (CLS)
- Animation/transition performance
- Loading responsiveness (optimistic UI or immediate feedback)
- Scroll traps (maps, embedded scrollers)
- Touch target size (~44px)
Output Format
- Summary: 2–4 sentences on overall feel and highest-impact issues.
- Top Issues (Prioritized): Each item with reproduction, cause, fix, and tradeoff.
- Quick Wins: Low-effort/high-impact fixes.
- Follow-ups: Deeper refactors, instrumentation, or testing recommendations.
- Validation Plan: Concrete steps to confirm improvements.
References
- Use
references/mobile-web-feel-native-checklist.mdfor detailed heuristics and example fixes.
Related Skills
por/tdd
development
VerifiedTrustedCommunity
Test-driven development with red-green-refactor loop. Use when user wants to build features or fix bugs using TDD, mentions "red-green-refactor", wants integration tests, or asks for test-first development.
1SKILL.mdUpdated Jun 3, 2026
por/swiftui-liquid-glass
development
VerifiedTrustedCommunity
Implement, review, or improve SwiftUI features using the iOS 26+ Liquid Glass API. Use when asked to adopt Liquid Glass in new SwiftUI UI, refactor an existing feature to Liquid Glass, or review Liquid Glass usage for correctness, performance, and design alignment.
1SKILL.mdUpdated Jun 3, 2026
por/swiftui-expert-skill
development
VerifiedTrustedCommunity
Write, review, or improve SwiftUI code following best practices for state management, view composition, performance, modern APIs, Swift concurrency, and iOS 26+ Liquid Glass adoption. Use when building new SwiftUI features, refactoring existing views, reviewing code quality, or adopting modern SwiftUI patterns.
1SKILL.mdUpdated Jun 3, 2026
por/agents/skills/swift-animations
development
VerifiedTrustedCommunity
# SwiftUI & AppKit Animation Best Practices Comprehensive animation guide for Apple platform interfaces, adapted from Emil Kowalski's web animation principles and Framer Motion best practices. Contains 80 rules across 10 categories targeting iOS 17+, prioritized by impact. ## When to Apply Reference these guidelines when: - Adding animations to SwiftUI views - Choosing easing curves, springs, or timing values - Implementing gesture-based interactions (drag, tap, long press) - Building transit
1SKILL.mdUpdated Jun 3, 2026