skills.rest
Vinicius-B-Leite
Vinicius-B-LeiteCOMMUNITY
Explore all skills by this author →
GitHub

create-core-components

Create React Native core UI components using TypeScript namespaces and Context API.

Updated Jun 12, 2025
Search Tags:#typescript#react-native#design-system#component-patterns#core-components#namespace-pattern
One-click install
npx skills add https://github.com/Vinicius-B-Leite/blcalisteniaV2 --skill create-core-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-core-components
Source: https://github.com/Vinicius-B-Leite/blcalisteniaV2/tree/main/.cursor/skills/create-core-components
Command: npx skills add https://github.com/Vinicius-B-Leite/blcalisteniaV2 --skill create-core-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating consistent core UI components for React Native projects is often tedious and error-prone without a standardized pattern. This skill provides a blueprint to implement core components using a namespace-based TypeScript API, a Context API for state sharing, a variants system for theming, and a cohesive design-system integration.

Core Features & Use Cases

  • Compound components pattern to compose complex UI and enable flexible composition.
  • TypeScript namespaces to organize types and expose a clean public API.
  • Context API to share state across root and content components.
  • Variants system to support multiple visual styles driven by design tokens and themes.
  • Theme integration with useAppTheme and tokens to ensure consistent styling across components.
  • Guidance for creating new components or refactoring existing ones with project patterns.

Quick Start

Create a new core component following the namespace pattern, generate Root, Content (if needed), Context, Types, and an index export, and wire it with the project's theme and token system.

Frequently Asked Questions about create-core-components

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

FAQPage Schema
How do I standardize React Native core components across a project?▼

Use the namespace pattern with TypeScript to organize types and expose a clean public API for React Native core components. This ensures consistent styling and state sharing across your project via Context API.

What is the namespace pattern for React Native UI components?▼

The namespace pattern uses TypeScript namespaces to organize component types and expose a clean public API. It pairs with compound components to enable flexible composition of complex UI structures.

How do I create scalable core UI components with a variants system?▼

Implement a variants system driven by design tokens and themes to support multiple visual styles. Integrate useAppTheme and tokens to ensure consistent styling across your scalable core UI components.

Can I use Context API to share state in React Native compound components?▼

Yes, the Context API is used to share state across root and content components in React Native. This compound components pattern enables flexible composition for complex UI structures.

How do I refactor existing React Native components to follow project conventions?▼

Refactor existing React Native components by applying the namespace pattern, integrating theme tokens, and restructuring files into Root, Content, Context, and Types modules to match project architecture.

Do I need TypeScript to implement a design system in React Native?▼

TypeScript is required to enforce the namespace pattern and organize types for a clean public API. It ensures the design system integration and variants system remain type-safe and scalable.

Related Skills

Explore More Software Engineering Skills→
Ayub-KhanAyub-Khan

typescript-frontend

Scaffold TypeScript frontend applications for React, Next.js, and Vue.

Community
Intermediate
quanngynxquanngynx

ai-elements

Create AI chat interface components for Next.js and shadcn/ui projects.

Community
Basic
CharitablebusinessroninCharitablebusinessronin

figma-generate-design

Build full-page Figma screens from a published design system.

Community
Advanced
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced