Skills
.Work. You
Rest

recovery-app-ui

Community

UI components for 12-step recovery apps.

Software Engineering#accessibility#React Native#Expo#milestones#check-in#progress-tracker#recovery-ui
AuthorRipKDR
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Developers building recovery-focused apps often reinvent common UI patterns for sobriety tracking, check-ins, and milestones. This Skill provides a library of reusable, accessible UI components that align with recovery-focused design.

Core Features & Use Cases

  • Clean Time Tracker: displays sobriety duration with live updates and readable time units.
  • Daily Check-In Card: lightweight mood and symptom capture with an encouraging UI.
  • Milestone Celebration: celebratory visuals for anniversaries and achievements.
  • Step Work Progress: progress indicators for completing 12 steps.
  • Emergency Support Button: prominent access to help when needed.
  • Theming & Accessibility: consistent color system, larger tap targets, and screen-reader friendly markup.

Quick Start

Import the recovery-app-ui components into your React Native project and compose screens using CleanTimeTracker, DailyCheckInCard, MilestoneCard, and StepWorkProgress. Customize colors and typography to match your app’s branding. Then render within your screens to accelerate UI development.

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: recovery-app-ui
Download link: https://github.com/RipKDR/Steps-to-recovery/archive/main.zip#recovery-app-ui

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.