styling-guide

Define styling patterns for Gluestack UI, NativeWind/Tailwind, and BRAND_COLORS with Arabic font classes.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/AhmedAGadir/arabybuddy --skill styling-guide
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: styling-guide
Source: https://github.com/AhmedAGadir/arabybuddy/tree/main/.claude/skills/styling-guide
Command: npx skills add https://github.com/AhmedAGadir/arabybuddy --skill styling-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides clear guidelines and best practices for styling components within the ArabyBuddy application, ensuring visual consistency and proper handling of Arabic typography.

Core Features & Use Cases

  • Component Styling: Standardizes the use of Gluestack UI components, NativeWind/Tailwind classes, and semantic theme colors.
  • Brand Color Usage: Ensures consistent application of brand colors via the BRAND_COLORS constant.
  • Arabic Font Integration: Provides specific classes for applying Arabic fonts to headings and body text.
  • Use Case: A developer needs to create a new button component. This Skill's documentation will guide them on using the correct Gluestack UI component, applying appropriate Tailwind classes for styling, and ensuring the text color adheres to the brand's palette.

Quick Start

Refer to this guide for instructions on applying Arabic fonts to text elements.

Frequently Asked Questions about styling-guide

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

FAQPage Schema
How do I apply Arabic fonts to text elements in a React Native component?

This guide provides specific Arabic font classes for headings and body text within ArabyBuddy components. Apply these designated classes to ensure proper Arabic typography integration and meet internationalization requirements for component development.

What is the best way to maintain UI consistency when styling Gluestack UI components?

To maintain UI consistency, use semantic theme colors and the BRAND_COLORS constant for styling Gluestack UI components. This approach enforces semantic theming and discourages hardcoded styles, ensuring visual consistency and maintainability across your application.

Can I use NativeWind and Tailwind classes with Gluestack UI components?

Yes, NativeWind and Tailwind classes can be used with Gluestack UI components. The styling guide standardizes this combination, ensuring you apply appropriate Tailwind classes while adhering to the brand's semantic color palette for maintainable styling.

Why should I avoid hardcoded styles in my component library?

You should avoid hardcoded styles to ensure maintainability and visual consistency. The styling guide enforces semantic theming and the use of the BRAND_COLORS constant instead, preventing style fragmentation and ensuring consistent branding across your application.

Does this styling guide address internationalization for component development?

Yes, the styling guide addresses internationalization requirements by providing specific classes for applying Arabic fonts to headings and body text. This ensures proper Arabic typography handling and internationalization support within the ArabyBuddy application components.