skills.rest
RipKDR
RipKDRCOMMUNITY
Explore all skills by this author →
GitHub

recovery-app-ui

Provide reusable React Native UI components for recovery companion apps.

2|1|Updated Dec 30, 2025
Search Tags:#accessibility#React Native#Expo#milestones#check-in#progress-tracker#recovery-ui
One-click install
npx skills add https://github.com/RipKDR/Steps-to-recovery --skill recovery-app-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: recovery-app-ui
Source: https://github.com/RipKDR/Steps-to-recovery/tree/main/.claude/skills/recovery-app-ui
Command: npx skills add https://github.com/RipKDR/Steps-to-recovery --skill recovery-app-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about recovery-app-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a sobriety counter UI in React Native?▼

A daily check-in card for recovery apps captures mood and symptoms with an encouraging UI. It provides a lightweight interface for users to record their daily recovery status within React Native and Expo projects.

Can I use Expo to build accessible 12-step recovery app components?▼

Yes, Expo supports accessible 12-step recovery app components built with React Native. The components feature consistent color theming, larger tap targets, and screen-reader friendly markup to ensure accessibility for users in recovery.

What is the best way to display recovery milestones in a mobile app?▼

The best way to display recovery milestones in a mobile app is using celebratory visual components designed specifically for anniversaries and achievements. These UI elements provide quick integration within React Native projects.

How do I add an emergency support button to a recovery companion app?▼

To add an emergency support button to a recovery companion app, implement a prominent UI component that provides immediate access to help. This pattern is part of standard recovery-focused UI libraries for React Native.

Do I need external data dependencies to use recovery progress tracker components?▼

No, you do not need external data dependencies to use recovery progress tracker components. The UI library is designed for quick integration with minimal setup, allowing you to focus on frontend patterns and theming.

Related Skills

Explore More Software Engineering Skills→
beemanbeeman
12

heroui-native

Integrate HeroUI Native components into React Native apps with Uniwind theming.

Community
Intermediate
adiytharpansaadiytharpansa

habit-tracker

Track daily habits, streaks, and goal progress with structured analytics.

Community
Intermediate
p-o-ke-naep-o-ke-nae

react-native-architecture

Design React Native app architecture with Expo Router, authentication, and offline data.

Community
Advanced
SeemSeamSeemSeam
17

mobile-component-system

Select and apply mobile component systems and design tokens for UI development.

Community
Intermediate