Skills
.Work. You
Rest

use-design-system/BottomCTA

Community

Sticky footer for CTAs

Software Engineering#ui#react#design system#component#cta#button
Authortokijh
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a standardized and accessible way to implement Call-to-Action (CTA) buttons at the bottom of a screen, ensuring they are always visible and correctly positioned, especially on mobile devices with safe areas.

Core Features & Use Cases

  • Flexible Layouts: Supports both single-button and double-button (left/right) configurations.
  • Fixed Positioning: Ensures CTAs remain visible at the bottom of the viewport, optionally respecting safe area insets.
  • Content Integration: Allows for additional content like accessory views or explanatory text above or below the buttons.
  • Use Case: Implementing a "Save" button at the bottom of a form that stays visible as the user scrolls, or a "Cancel" and "Confirm" pair for a modal dialog.

Quick Start

Use the BottomCTA.Single component with a Button inside to create a fixed call to action at the bottom of the screen.

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

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