skills.rest
nirukk52
nirukk52COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate React Native UI components with NativeWind styling and design system patterns.

Updated Jan 23, 2026
Search Tags:#accessibility#design system#ui design#react native#nativewind#chronic illness ux
One-click install
npx skills add https://github.com/nirukk52/visual-truth-engine --skill frontend-design-nirukk52
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/nirukk52/visual-truth-engine/tree/main/.claude-skills/frontend-design
Command: npx skills add https://github.com/nirukk52/visual-truth-engine --skill frontend-design-nirukk52

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the need for creating distinctive, production-grade frontend interfaces for the Clue Symptom Tracker, focusing on an approachable and energy-conscious design for users managing chronic illness.

Core Features & Use Cases

  • Design System Implementation: Provides a detailed color palette, typography guidelines, spacing, and visual element definitions inspired by Podia's aesthetic.
  • Component Patterns: Offers ready-to-use patterns for UI elements like pill chips, cards, chat bubbles, and focus cards, all implemented with NativeWind for React Native.
  • Energy-Conscious UX: Outlines principles for designing user-friendly interfaces that are considerate of users experiencing fatigue or brain fog.
  • Use Case: A developer needs to build a new onboarding screen for the Clue app. They can use the provided color palette, typography, and component patterns (like PrimaryButton and CardWithIcon) to quickly create a visually appealing and accessible interface that aligns with the app's established design language.

Quick Start

Use the frontend-design skill to generate a React Native component for a user profile card using the specified color palette and typography.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design React Native components for users with chronic illness?▼

Energy-conscious UX for chronic illness focuses on reducing cognitive load through warm, approachable aesthetics. It utilizes specific color palettes, typography, and spacing in React Native to accommodate users experiencing fatigue or brain fog.

How do I build a React Native UI design system using NativeWind?▼

Building a React Native UI design system with NativeWind involves defining detailed color palettes, typography guidelines, and spacing rules. You construct ready-to-use component patterns like pill chips, cards, and chat bubbles for consistent visual elements.

Can I use NativeWind to create accessible UI components for React Native?▼

Yes, NativeWind supports styling accessible UI components in React Native. It enables the creation of energy-conscious interfaces with detailed visual element definitions, ensuring components like focus cards and primary buttons are approachable for chronic illness users.

What is the best way to style a symptom tracker app interface in React Native?▼

The best way to style a symptom tracker interface is adopting a warm, approachable design system inspired by Podia. This involves using NativeWind for styling and implementing component patterns that prioritize accessibility for chronic illness users.

Does this approach provide specific UI patterns for React Native screens?▼

Yes, this approach provides specific UI patterns for React Native screens including ready-to-use elements like pill chips, cards, chat bubbles, and focus cards. These components are pre-styled with NativeWind to match an energy-conscious aesthetic.

Related Skills

Explore More Design & Creative Skills→
msichtermanmsichterman

expo-tailwind-setup

Integrates Tailwind CSS v4 with Expo using NativeWind v5 and react-native-css via Metro and PostCSS configuration.

Community
Intermediate
ouakarouakar

mobile-engineer

Build cross-platform mobile apps for iOS and Android from BRD requirements.

Community
Advanced
nirukk52nirukk52

spoonie-copywriter

Generates empathetic, energy-conscious UI copy using Language of Care principles for chronic illness users.

Community
Intermediate
expoexpo
2.4k

expo-native-ui

Build native-feeling Expo UI screens with Apple HIG and Material 3.

Official
Intermediate