How does this skill fix 'generic UI syndrome' better than standard AI prompting?

This skill audits your codebase to replace web-focused CSS habits with native-compliant patterns, enforcing platform-specific constraints like safe area handling and Android edge-to-edge rendering that standard AI prompts often miss.

Which React Native versions and styling libraries are supported?

The skill is compatible with React Native 0.82+ (including the New Architecture) and Expo, supporting styling libraries like NativeWind, Restyle, Styled Components, and standard StyleSheets.

Does this skill handle animations or just static layouts?

While the skill focuses on UI/UX, it utilizes `reanimated` and `expo-blur` to design high-performance, native-feel interactions and state-based views like skeleton screens and error states.

What is included in the purchase of the React Native Design Pro skill?

You receive the specialized design agent skill, a suite of automated audit scripts for contrast and grid verification, and pre-configured templates for various aesthetic directions.

How does the skill ensure my mobile app remains accessible and WCAG compliant?

The skill automatically generates full dark and light mode token sets from your brand colors, mathematically verifying that every surface and text pair meets WCAG AA contrast standards.

Are there any specific technical tasks this skill does NOT perform?

The skill focuses exclusively on the presentation layer; it does not handle data fetching, state management logic, or the wiring of navigation libraries.

react native design pro

Example session with this skill installed

Create a dark mode theme for a fitness app using the brand color #D0FD3E (Electric Lime). Ensure high contrast for gym environments and use an 8pt grid.

Read your context and instructions
Compiled the react native design

I have generated a high-contrast dark mode theme for your fitness app. The system uses #D0FD3E as the primary accent, paired with deep charcoal surfaces to minimize glare in gym settings. I verified the contrast ratios using scripts/contrast.mjs to ensure readability.

Fitness App Dark Theme (Tokens)

// theme/tokens.ts
export const tokens = {
  colors: {
    brand: {
      primary: '#D0FD3E', // Electric Lime (Accent)
      onPrimary: '#000000', // Contrast ratio 13.5:1 (Pass)
    },
    surface: {
      base: '#121212',
      raised: '#1C1C1E',
      overlay: '#2C2C2E',
    },
    text: {
      highContrast: '#FFFFFF', // Contrast on base: 15.8:1 (Pass)
      mediumContrast: '#A1A1AA',
      lowContrast: '#71717A',
    },
    status: {
      error: '#FF453A',
      success: '#32D74B',
    }
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
    xxl: 64,
  },
  radius: {
    sm: 4,
    md: 8,
    lg: 16,
    full: 9999,
  }
};

Next steps

Run node scripts/audit.mjs src --grid 8 to check if your existing components align with the new 8pt spacing tokens.
Apply the surface.raised token to card components to create depth against the #121212 background.
Load a heavy display font like Inter_900Black for headlines to match the high-energy fitness aesthetic.

Connects securely to your tools. The creator never sees your data.

About this skill

Design React Native and Expo screens that don't look AI-made, with contrast that is measured and a codebase audit that catches what code review misses.

Your agent reads the project first (Expo or bare, React Native version, styling stack, existing theme), commits to one visual direction for this specific app, builds it on design tokens, and verifies the result with bundled tools before handing it over.

Pro tools (Node, no dependencies, read-only):

Codebase audit: hardcoded colors outside the theme, spacing off the 4/8pt grid, touch targets under 44pt, and web-only CSS that React Native ignores. File and line for every finding.
WCAG contrast checker: blends transparency over the real background, so rgba text is measured as users see it.
Theme templates: a complete dark + light token set where every text color passes AA on every surface, typed, with ready adapters for StyleSheet and styled-components.

What it does

Theme from scratch, or a full palette from 1-3 brand colors
Audit of an existing UI: baseline counts, then the 3 issues with the most visual impact, with before/after values and measured ratios
Screen design including loading, empty, error and offline states
Platform rules current for React Native 0.82+ and Expo SDK 54+: boxShadow, Android 16 edge-to-edge, safe areas, BlurView on Android, iOS 26 Liquid Glass, keyboard, lists, custom fonts

Works with StyleSheet, NativeWind, styled-components and Restyle. It follows your conventions and asks before extending your design system.

A free core version (guidelines and contrast checker) is on GitHub at github.com/brunoviews/agent-skills. Pro adds the codebase audit and the measured theme templates.

How to use

Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

Reviews

No reviews yet

Be one of the first to try it. Every listed skill passes our trust checks below.

Security scanned

Passed our 8-point scan before listing

Fresh listing

Recently published to Agensi

30-day refund

Not a fit? Get your money back

react native design pro