How do I install the UI Arch skill?

Run npx skillmds@latest add crozzbite/ui-arch 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.

What does the UI Arch skill do?

SkullRender Visual & Structural UI Standards. It is listed under Coding & Dev Tools on SkillMD.

Is UI Arch 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 UI Arch?

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 UI Arch free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI Arch?

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

UI Arch by crozzbite — Agent Skill

Name: UI Arch
Author: crozzbite

File contents

🎨 SkullRender UI: The Bone Architecture (v19+)

[!CAUTION] INTERNAL USE ONLY: This skill contains SkullRender IP (Intellectual Property). DO NOT commit this skill or its assets to public repositories.

0. Branding Assets (PI - Private Intellectual Property)

Logo: src/assets/sr/logo-bones.svg (The central skull/vertebrae symbol).
Icon: src/assets/sr/favicon-blood.ico (The red accent favicon).
Background: src/assets/sr/void-bg.webp (Custom neural-noise dark background).
Typography:
- Headers: 'Outfit' (Bold)
- Code/Data: 'JetBrains Mono' (Custom build for SR).

1. Design Tokens (The Skull Palette)

Primary: #000000 (Deep Bone Black)
Secondary: #FFFFFF (Pure Marrow White)
Accent: #FF0000 (Vital Blood Red)
Surface: Glassmorphism (Background blur: 12px, opacity: 0.7, border: 1px solid rgba(255,255,255,0.1))

2. Structural Hierarchy (The Angular Way)

Following the Bone Hierarchy (Clean Logic -> Structural Bones -> Technical Brain):

Level 1: Structure (Scope Rule)

Core: App-wide singletons (Auth, Interceptors, ThemeEngine).
Shared: Atomic reusable UI components (Buttons, Modals, Loaders).
Features: Business modules (Swarm-Control, Knowledge-Base, Audit-View).

Level 2: Radical Naming

No suffixes in filenames (e.g., theme.ts instead of theme.service.ts).
Folder names determine the context.

3. Visual Excellence Mandate

Typography: 'JetBrains Mono' for technical data, 'Outfit' for UI labels.
Micro-animations: Any interactive element MUST have a subtle hover/active state (0.2s duration).
Responsive: Grid-based layouts (CSS Grid) with mobile-first priority.

4. Performance (Skull Speed)

Signals: Mandatory for all component state.
@defer: Required for all non-critical heavy components (Charts, Large Maps).
OnPush: Default ChangeDetectionStrategy for every component.

STATUS: ACTIVE 💀🦾🎨

---name: ui-archdescription: SkullRender Visual & Structural UI Standards.---# 🎨 SkullRender UI: The Bone Architecture (v19+)> [!CAUTION]> **INTERNAL USE ONLY**: This skill contains SkullRender IP (Intellectual Property). > **DO NOT** commit this skill or its assets to public repositories.## 0. Branding Assets (PI - Private Intellectual Property)- **Logo**: `src/assets/sr/logo-bones.svg` (The central skull/vertebrae symbol).- **Icon**: `src/assets/sr/favicon-blood.ico` (The red accent favicon).- **Background**: `src/assets/sr/void-bg.webp` (Custom neural-noise dark background).- **Typography**: - Headers: 'Outfit' (Bold) - Code/Data: 'JetBrains Mono' (Custom build for SR).## 1. Design Tokens (The Skull Palette)- **Primary**: `#000000` (Deep Bone Black)- **Secondary**: `#FFFFFF` (Pure Marrow White)- **Accent**: `#FF0000` (Vital Blood Red)- **Surface**: Glassmorphism (Background blur: 12px, opacity: 0.7, border: 1px solid rgba(255,255,255,0.1))## 2. Structural Hierarchy (The Angular Way)Following the **Bone Hierarchy** (Clean Logic -> Structural Bones -> Technical Brain):### Level 1: Structure (Scope Rule)- **Core**: App-wide singletons (Auth, Interceptors, ThemeEngine).- **Shared**: Atomic reusable UI components (Buttons, Modals, Loaders).- **Features**: Business modules (Swarm-Control, Knowledge-Base, Audit-View).### Level 2: Radical Naming- No suffixes in filenames (e.g., `theme.ts` instead of `theme.service.ts`).- Folder names determine the context.## 3. Visual Excellence Mandate- **Typography**: 'JetBrains Mono' for technical data, 'Outfit' for UI labels.- **Micro-animations**: Any interactive element MUST have a subtle hover/active state (0.2s duration).- **Responsive**: Grid-based layouts (CSS Grid) with mobile-first priority.## 4. Performance (Skull Speed)- **Signals**: Mandatory for all component state.- **@defer**: Required for all non-critical heavy components (Charts, Large Maps).- **OnPush**: Default `ChangeDetectionStrategy` for every component.---**STATUS: ACTIVE** 💀🦾🎨

Frequently asked questions

UI Arch