Skills
.Work. You
Rest

use-design-system/Stack

Community

Build consistent layouts with Stack.

Design & Creative#layout#react#design system#css#ui components#flexbox
Authortokijh
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill simplifies the creation of consistent and maintainable layouts by providing reusable Stack components, reducing the need for repetitive flexbox CSS.

Core Features & Use Cases

  • VerticalStack: A flex flex-col wrapper for vertical spacing and alignment.
  • HorizontalStack: A flex flex-row wrapper for horizontal spacing and alignment.
  • Configurable Gaps: Easily control spacing between child elements using a gap prop.
  • Alignment Control: Fine-tune alignment with align and justify props.
  • Use Case: Quickly arrange icons and text side-by-side with consistent spacing and vertical centering using HorizontalStack.

Quick Start

Use VerticalStack with a gap of 4 to arrange three items vertically.

Dependency Matrix

Required Modules

None required

Components

references

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

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.