Can I use it to manage brand styles?

Absolutely. It integrates specific Maycrest Group brand tokens, including a dark-first color palette, typography (Space Grotesk/Inter), and standardized spacing and border radii.

What is the primary role of the UX Architect skill?

It serves as a technical bridge that defines the navigation, layout foundations, and component structures developers need to build applications confidently and consistently.

How does it handle user experience edge cases?

The skill mandates the definition of empty, loading, and error states for every screen inventory item, ensuring no UX state is overlooked during the architecture phase.

Does it help with project organization?

Yes, it defines the exact file structure for your application's routing, ensuring that the directory layout matches the intended navigation architecture.

Which tech stacks are supported by this skill?

It is specifically optimized for Expo Router (mobile), Next.js App Router (web), NativeWind v4, and Tailwind CSS, utilizing a 4px grid system and dark-first design tokens.

UX Architect & Structural Foundation

Name: UX Architect & Structural Foundation
Author: coreymaypray

bycoreymaypray

0•

Design Tools

Builds technical UX foundations, navigation structures, and design system tokens to bridge the gap between design vision and developer implementation.

The UX Architect skill acts as a specialized technical lead for the Maycrest Group, focusing on the structural layer of product development. It eliminates rework by establishing clear information architecture, mapping Expo Router and Next.js App Router file structures, and defining comprehensive design system tokens using NativeWind and Tailwind CSS. By formalizing component hierarchies and user flows before a single line of feature code is written, it ensures that developers can ship production-grade interfaces with zero architectural ambiguity.

Key Features

01Comprehensive design system token generation for NativeWind and Tailwind

02User flow mapping with defined happy paths and edge cases

03Dark-first UI architecture using Maycrest Group brand standards

04Automated Expo Router and Next.js file-based navigation mapping

050 GitHub stars

06Detailed component hierarchy planning from atoms to full screens

Use Cases

01Setting up the initial routing and layout structure for a new cross-platform Expo mobile app

02Translating a visual design system into a standardized Tailwind configuration and component library

03Defining complex user pathways and state requirements (loading/error/empty) for large-scale applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add coreymaypray/sloth-skill-tree ux-architect

For use in Claude.ai and ChatGPT

Key Features

01Comprehensive design system token generation for NativeWind and Tailwind

02User flow mapping with defined happy paths and edge cases

03Dark-first UI architecture using Maycrest Group brand standards

04Automated Expo Router and Next.js file-based navigation mapping

050 GitHub stars

06Detailed component hierarchy planning from atoms to full screens

Use Cases

01Setting up the initial routing and layout structure for a new cross-platform Expo mobile app

02Translating a visual design system into a standardized Tailwind configuration and component library

03Defining complex user pathways and state requirements (loading/error/empty) for large-scale applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add coreymaypray/sloth-skill-tree ux-architect

For use in Claude.ai and ChatGPT