use-design-system/ScreenContainer

Structure React application screens with navigation, scrollable content, and fixed bottom actions.

Updated Aug 23, 2026

Search Tags:#ui #layout #react #design system #component #screen

Ready to run

npx skills add https://github.com/tokijh/minapp --skill use-design-system-screencontainer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: use-design-system/ScreenContainer
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/use-design-system/subskills/ScreenContainer
Command: npx skills add https://github.com/tokijh/minapp --skill use-design-system-screencontainer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized and robust layout component for building consistent and user-friendly application screens, ensuring a predictable structure for navigation, content, and interactive elements.

Core Features & Use Cases

Unified Screen Structure: Enforces a consistent layout with optional top navigation, scrollable main content, and fixed bottom call-to-action buttons.
Flexible Content Integration: Easily incorporates custom navigation bars, CTAs, and overlay providers like drawers or dialogs.
Use Case: When developing a new feature that requires a specific header, scrollable content area, and a persistent "Save" button at the bottom, ScreenContainer ensures these elements are laid out correctly and responsively across all devices.

Quick Start

Use the ScreenContainer component to build a basic screen with a title and scrollable content.

Frequently Asked Questions about use-design-system/ScreenContainer

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

FAQPage Schema

How do I structure a React app screen with fixed navigation and bottom CTAs?▼

Structure React app screens by using a unified layout component that defines dedicated areas for top navigation, scrollable main content, and fixed bottom call-to-action buttons to enforce UI consistency.

What is the best way to maintain consistent UI layout across multiple React screens?▼

Maintain consistent UI layout by enforcing a standardized screen structure with predefined areas for navigation, scrollable content, and interactive elements, preventing layout drift across different application features.

Can I integrate custom navigation bars and overlay dialogs into a design system screen layout?▼

You can integrate custom navigation bars and overlay providers like drawers or dialogs into the screen layout, allowing flexible content injection while maintaining the overall structural consistency.

Do I need specific UI library components to build a screen layout with fixed bottom actions in React?▼

Building this screen layout requires React and specific UI library components to properly render navigation bars, CTAs, and overlay elements within the defined structural areas of the screen container.