skills.rest
tokijh
tokijhCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/tokijh/minapp --skill use-design-system-screencontainer
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
MyHeavenDyfMyHeavenDyf

mobile-onboarding

Design a three-screen mobile onboarding flow with status bars, hero elements, typography, and CTAs.

Community
Intermediate
vabolevabole
299

ios-design-consultant

Guide iOS 26+ interface design using Liquid Glass principles.

Community
Advanced
DayoptDayopt

a11y

Apply ARIA labeling and semantic markup to React UI components.

Official
Advanced
dylantarredylantarre
38

layout-primitives

Create reusable layout primitives with CSS flexbox, grid, and React components.

Community
Basic