How do I install the Ns Code Built View Styling skill?

Run npx skillmds@latest add nativescript/ns-code-built-view-styling in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Ns Code Built View Styling safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Ns Code Built View Styling?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Ns Code Built View Styling free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under Apache-2.

Who published Ns Code Built View Styling?

nativescript (@nativescript) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Ns Code Built View Styling by nativescript

Name: Ns Code Built View Styling
Author: nativescript

Ns Code Built View Styling

Use when building views in TypeScript with new Label()/new StackLayout() (RootLayout overlays, programmatic dialogs/toasts) or when such a view renders unstyled or ignores dark mode — Tailwind utility classes can be purged when they appear only in code, and dark mode needs an explicit Application.systemAppearance() check.

nativescript 7254d04 3.1 KB Updated Sep 17, 2026

File contents

Styling views built in code

Views constructed imperatively (new StackLayout(), new Label(), …) and opened via getRootLayout().open(...) or attached manually sit outside your templates, and two things that "just work" in templates silently don't:

1. Tailwind utility classes may not exist

@nativescript/tailwind generates CSS only for class names that appear in scanned template/source content. A utility used only from code-built views (view.className = 'rounded-t-3xl bg-slate-800') may be purged from the emitted CSS — the view renders unstyled, and only in builds where no template happens to use the same class. That coupling is invisible.

Fix: style code-built views with inline properties, taking hex values from your palette (tailwind.config.js):

import { Color, StackLayout } from '@nativescript/core';

const card = new StackLayout();
// inline because these views are built outside any template and utility classes may be purged
card.backgroundColor = new Color('#161C26');
card.borderTopLeftRadius = 28;
card.borderTopRightRadius = 28;

App-level component classes that are definitely emitted (used in templates, or defined as plain CSS rules rather than utilities) are safe — but inline-from-palette is the predictable default.

2. Dark mode is your job

Template views inherit theme via .ns-dark CSS scoping; a code-built view with inline colors gets whatever you set. Pick the palette at build time:

import { Application } from '@nativescript/core';

const PALETTE = {
  light: { surface: '#FFFFFF', ink: '#111827' },
  dark: { surface: '#161C26', ink: '#F3F4F6' },
};
const theme = Application.systemAppearance() === 'dark' ? PALETTE.dark : PALETTE.light;
card.backgroundColor = new Color(theme.surface);

This is correct for short-lived overlays (they're rebuilt per showing). A long-lived code-built view must re-apply colors on Application.systemAppearanceChangedEvent. And read systemAppearance() lazily at show time, not at module load — very early in boot it can report the wrong appearance before the first trait collection lands.

3. Framework change-detection wrappers are not needed

Updating a code-built view's properties (progress value, label text) touches no framework bindings — call them directly. In Angular apps that still run zones, no ngZone.run wrapper is needed for these native property ticks.

Verify

Show the view in both light and dark themes (toggle while the app runs), in a release-mode build (Tailwind purging differs from dev), and confirm every color and radius survives.

Verified 2026-08: iOS 26 simulator + Android 15 emulator, @nativescript/core 9.1.0-alpha.11 with @nativescript/tailwind, in a production app (release-build purge behavior observed first-hand).

---name: ns-code-built-view-stylingdescription: Use when building views in TypeScript with new Label()/new StackLayout() (RootLayout overlays, programmatic dialogs/toasts) or when such a view renders unstyled or ignores dark mode — Tailwind utility classes can be purged when they appear only in code, and dark mode needs an explicit Application.systemAppearance() check.license: Apache-2.0---# Styling views built in codeViews constructed imperatively (`new StackLayout()`, `new Label()`, …) and opened via `getRootLayout().open(...)` or attached manually sit outside your templates, and two things that "just work" in templates silently don't:## 1. Tailwind utility classes may not exist`@nativescript/tailwind` generates CSS only for class names that appear in scanned template/source content. A utility used *only* from code-built views (`view.className = 'rounded-t-3xl bg-slate-800'`) may be purged from the emitted CSS — the view renders unstyled, and only in builds where no template happens to use the same class. That coupling is invisible.**Fix:** style code-built views with inline properties, taking hex values from your palette (`tailwind.config.js`):```tsimport { Color, StackLayout } from '@nativescript/core';const card = new StackLayout();// inline because these views are built outside any template and utility classes may be purgedcard.backgroundColor = new Color('#161C26');card.borderTopLeftRadius = 28;card.borderTopRightRadius = 28;```App-level *component* classes that are definitely emitted (used in templates, or defined as plain CSS rules rather than utilities) are safe — but inline-from-palette is the predictable default.## 2. Dark mode is your jobTemplate views inherit theme via `.ns-dark` CSS scoping; a code-built view with inline colors gets whatever you set. Pick the palette at build time:```tsimport { Application } from '@nativescript/core';const PALETTE = { light: { surface: '#FFFFFF', ink: '#111827' }, dark: { surface: '#161C26', ink: '#F3F4F6' },};const theme = Application.systemAppearance() === 'dark' ? PALETTE.dark : PALETTE.light;card.backgroundColor = new Color(theme.surface);```This is correct for short-lived overlays (they're rebuilt per showing). A long-lived code-built view must re-apply colors on `Application.systemAppearanceChangedEvent`. And read `systemAppearance()` lazily at show time, not at module load — very early in boot it can report the wrong appearance before the first trait collection lands.## 3. Framework change-detection wrappers are not neededUpdating a code-built view's properties (progress value, label text) touches no framework bindings — call them directly. In Angular apps that still run zones, no `ngZone.run` wrapper is needed for these native property ticks.## VerifyShow the view in both light and dark themes (toggle while the app runs), in a release-mode build (Tailwind purging differs from dev), and confirm every color and radius survives.Verified 2026-08: iOS 26 simulator + Android 15 emulator, @nativescript/core 9.1.0-alpha.11 with @nativescript/tailwind, in a production app (release-build purge behavior observed first-hand).

Frequently asked questions