skills.rest
kimjuyoung1127
kimjuyoung1127COMMUNITY
Explore all skills by this author →
GitHub

dangapp-app-shell

Apply a mobile app shell with fixed top and bottom navigation bars.

Updated Feb 28, 2026
Search Tags:#ui#layout#frontend#navigation#mobile#app shell
One-click install
npx skills add https://github.com/kimjuyoung1127/dangapp --skill dangapp-app-shell
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dangapp-app-shell
Source: https://github.com/kimjuyoung1127/dangapp/tree/main/.claude/skills/dangapp-app-shell
Command: npx skills add https://github.com/kimjuyoung1127/dangapp --skill dangapp-app-shell

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of ensuring consistent layout and preventing content overlap in mobile applications by providing a standardized app shell.

Core Features & Use Cases

  • Fixed Navigation: Maintains a consistent top app bar and bottom navigation across main routes.
  • Content Spacing: Ensures content is correctly padded to avoid clipping under fixed UI elements.
  • Use Case: When building a new feature within a mobile app, use this Skill to integrate it seamlessly into the existing navigation structure without re-implementing shell components or dealing with layout issues.

Quick Start

Apply the dangapp-app-shell skill to the main route layout, ensuring content avoids overlap with fixed chrome.

Frequently Asked Questions about dangapp-app-shell

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent mobile app content from overlapping fixed top and bottom navigation bars?▼

To prevent mobile app content overlap, apply a mobile app shell pattern that manages content spacing and safe-area constraints. This ensures content is correctly padded and routed, avoiding clipping under fixed UI chrome elements across shared mobile routes.

What is a mobile app shell pattern for standardizing frontend UI layout?▼

A mobile app shell pattern is a standardized layout structure that applies fixed top and bottom navigation bars to route content. It maintains consistent navigation affordances and layout behavior across main mobile routes without re-implementing shell components.

How do I add new features to existing mobile app navigation without layout issues?▼

To add new features without layout issues, apply an app shell skill to the main route layout. This integrates new content seamlessly into the existing fixed navigation structure while automatically handling content spacing and safe-area constraints.

Does a mobile app shell handle safe-area constraints for fixed UI navigation elements?▼

Yes, a mobile app shell handles safe-area constraints for fixed UI navigation elements. It manages content spacing to prevent overlap with fixed top app bars and bottom navigation, ensuring consistent layout behavior across shared mobile routes.

When should I use a standardized app shell for mobile frontend navigation?▼

Use a standardized app shell for mobile frontend navigation when building new features within a mobile app. It provides fixed top and bottom navigation bars, ensuring consistent navigation affordances and preventing content overlap without re-implementing shell components.

Related Skills

Explore More Software Engineering Skills→
DVNghiemDVNghiem
20

app-shell-design

Build reusable app-shell blueprints defining structure, navigation, and surface patterns.

Community
Intermediate
comeritocomerito

system-extension

Extend core modules with UMES enrichers, widgets, interceptors, and guards.

Official
Advanced
zomeruzomeru

mobile-responsiveness

Create responsive mobile-first web interfaces with CSS and Tailwind breakpoints.

Community
Intermediate
christophevgchristophevg

vuetify-v4

Fix Vuetify 4 page layouts in Baseweb projects with correct component hierarchy and layout props.

Community
Intermediate