Skills
.Work. You
Rest

mobile-first-web-app

Community

Design web apps for iPhone first

Software Engineering#responsive design#mobile-first#ios#progressive enhancement#canvas editor#bottom navigation#safe areas
AuthorTitoPrausee
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you design web applications that feel native on iPhone, with interfaces that stay usable in tight mobile viewports, respect safe areas, and support touch-first interaction patterns without sacrificing desktop usability.

Core Features & Use Cases

  • Mobile-first layout guidance that prioritizes bottom-tab navigation, full-screen panels, and scrollable content areas.
  • iOS-specific implementation details such as safe-area spacing, viewport settings, tap-target sizing, and prevention of unwanted zoom.
  • Canvas and editor patterns for image workflows, including pointer-based input, undo and redo history, and slide-up tool sheets.
  • Progressive enhancement for desktop layouts so the same app can adapt cleanly from phone to larger screens.
  • Use cases include private internal tools, mobile web editors, gallery apps, and proxy-hosted web apps that need relative API paths.

Quick Start

Create a mobile-first web app that uses iPhone-safe layout rules, bottom tabs, and desktop progressive enhancement following this pattern.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mobile-first-web-app
Download link: https://github.com/TitoPrausee/nexus-toti/archive/main.zip#mobile-first-web-app

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 536,000+ vetted skills library on demand.