use-design-system/Top
CommunityBuild consistent headers and navigation.
Authortokijh
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a standardized and flexible way to create top navigation bars and headers within an application, ensuring consistency in layout, typography, and interactive elements.
Core Features & Use Cases
- Structured Header Layout: Offers predefined slots for titles, subtitles, right-aligned actions, and lower content like CTAs.
- Component-Based Design: Includes specialized sub-components for buttons, arrows, text, and selectors, promoting reusability.
- Use Case: Implementing a consistent header across a web application, from simple page titles to complex views with action buttons and dropdown selectors.
Quick Start
Use the Top skill to create a header with the title "Settings" and a "Save" button on the right.
Dependency Matrix
Required Modules
None requiredComponents
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/Top Download link: https://github.com/tokijh/minapp/archive/main.zip#use-design-system-top Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.