Skip to content

barun355/nativecn

unversioned · 9e9702c47ac8

Build Expo apps with nativecn: the five nativecn Skills and the local nativecn MCP server.

nativecn-build-screen

Build Screens in a nativecn Expo app from Blocks and Components. Use when the user asks to build, add or design a screen or flow, such as "build a login screen", "add a sign-up flow", "make a settings screen", "profile screen", "add a drawer", "add bottom tabs", or "wire up navigation" in a project with a nativecn components.json.

nativecn-component-authoring

Write or change nativecn Components so they follow the Component contract. Use when the user asks for a "new component", "custom component", "reusable component", "add a variant", "add a size", "make this pressable", or to edit a Component in src/components of a nativecn app, or when contributing a Component or Primitive to the nativecn repo.

nativecn-setup

Set up nativecn in an Expo app. Use when the user wants to start a new app with nativecn, add nativecn to an existing Expo app, pick a Preset (Style, colours, radius, fonts), or configure agents for nativecn. Triggers include "start a new app", "create an Expo app with nativecn", "add nativecn", "set up nativecn", "init nativecn", "use Nova with violet", "Lora headings", and any project where nativecn Skills are installed but there is no components.json or no AGENTS.md yet.

nativecn-theme

Change the look of a nativecn Expo app through its Theme. Use when the user asks to "change colours", "change the primary colour", "add a brand colour", "dark mode", "light mode", "add a theme switcher", "use a different font", "change spacing or radius", or to replace or migrate Expo's default theme files (constants/theme.ts, themed-text, themed-view, use-theme) in a project with a nativecn components.json.

nativecn-visual-qa

Run the Visual QA Loop on a running nativecn Expo app - navigate Screens and User Flows on an Android device or iOS Simulator, screenshot them, judge them against the Reference Design at the design-system level, trace each problem to the code, fix small safe problems and report the rest. Use when the user says "match the design", "compare with Figma", "screenshot and fix", "check the screens", "visual QA", "does this look right", "test the flow on my phone", or "check dark mode on device".