Skills
.Work. You
Rest

use-design-system/ScreenContainer

Community

Build consistent app screens.

Software Engineering#ui#layout#react#design system#component#screen
Authortokijh
Version1.0.0
Installs0

System Documentation

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.

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: use-design-system/ScreenContainer
Download link: https://github.com/tokijh/minapp/archive/main.zip#use-design-system-screencontainer

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 223,000+ vetted skills library on demand.