skills.rest
alejandro-technology
alejandro-technologyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-components

Validate React Native component tier placement and theme token usage.

Updated Feb 27, 2026
Search Tags:#theming#architecture#react-native#ui-components#enforce#component-tiering
One-click install
npx skills add https://github.com/alejandro-technology/react-native-template --skill ui-components-alejandro-technology
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-components
Source: https://github.com/alejandro-technology/react-native-template/tree/main/.claude/skills/enforcement/ui-components
Command: npx skills add https://github.com/alejandro-technology/react-native-template --skill ui-components-alejandro-technology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces a standardized 3-tier UI component approach (core, form, layout) and theme-aware usage across shared components, preventing style drift and ensuring consistency across a React Native codebase.

Core Features & Use Cases

  • Enforces the 3-tier component system (core, form, layout)
  • Encourages use of theme tokens and component style factories
  • Provides guidelines for barrel exports and API consistency across components

Quick Start

Audit your project’s components to ensure they are correctly tiered and theme-integrated.

Frequently Asked Questions about ui-components

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

FAQPage Schema
How do I enforce consistent UI component architecture in a React Native codebase?▼

Enforce consistent UI component architecture in React Native by validating a 3-tier system of core, form, and layout components, checking theme token usage, style factories, and barrel exports to prevent style drift across shared libraries.

What is the 3-tier component system for React Native UI libraries?▼

The 3-tier component system for React Native UI libraries organizes components into core, form, and layout tiers, establishing a cohesive architecture that guides component creation and review to ensure API consistency and theme-aware usage.

How do I audit React Native components for correct tier placement and theme integration?▼

Audit React Native components by validating their tier placement within the core, form, and layout system, then check for proper theme token usage and verify component style factories to ensure complete theme integration across the codebase.

Does this component architecture approach work with shared UI libraries and barrel exports?▼

Yes, this component architecture approach works with shared UI libraries by validating barrel exports and enforcing API consistency across components, guiding developers during creation and review to maintain a cohesive component system.

Why does style drift happen in React Native component libraries and how do I prevent it?▼

Style drift happens in React Native component libraries when developers bypass standardized tiers and theme tokens, prevented by enforcing a 3-tier core, form, and layout system that validates theme token usage and style factories.

Can I use this to review React Native component tier placement during code review?▼

Yes, you can use this during code review to validate React Native component tier placement, checking that components correctly sit within core, form, or layout tiers and adhere to theme-aware style factories and barrel export guidelines.

Related Skills

Explore More Software Engineering Skills→
JewelsHovanJewelsHovan

component-organization

Organize React TypeScript codebases into barrel-exported src/ directory structures.

Community
Basic
TheOrcDevTheOrcDev
2.0k

bundle-barrel-imports

Replace barrel exports with direct source imports in React projects.

Community
Basic
schalkneethlingschalkneethling
7

css-tokens

Generate a tokens.css file with CSS custom properties for theming and dark mode.

Community
Basic
wjyugutouwjyugutou

web-design-guidelines

Automate UI code review against Web Interface Guidelines for accessibility and consistency.

Community
Intermediate