skills.rest
doubleG7
doubleG7COMMUNITY
Explore all skills by this author →
GitHub

design-system

Guide UI development with the Nirvana design system and Trimble brand tokens.

Updated Jun 10, 2026
Search Tags:#branding#design system#ui design#trimble#nirvana
One-click install
npx skills add https://github.com/doubleG7/nirvana --skill design-system-doubleg7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/doubleG7/nirvana/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/doubleG7/nirvana --skill design-system-doubleg7

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to the Nirvana UI design system, ensuring consistency and adherence to the Trimble brand across all UI components.

Core Features & Use Cases

  • Design Principles: Outlines the key principles guiding the design, such as density, scannability, and AI integration.
  • Brand Tokens: Defines color schemes, surface systems, typography, and shadows adhering to the Trimble brand.
  • AppShell Layout: Describes the fixed shell layout with TopBar, Sidebar, Main Content Area, and Footer.
  • Navigation Pattern: Explains the structure and behavior of NavGroups, NavItems, and Navigation groups.
  • Component Patterns: Details the patterns for StatCards, DashboardModuleCards, Data tables, Forms, Charts, AI Insight cards, StatusBadges, Modals/Dialogs, and UI utility classes.
  • Animation Patterns: Provides examples of staggered list entrance, hover scale on cards, dropdown menu entrance, page transitions, and loading skeleton pulse.
  • Responsive Design: Discusses breakpoints, grid patterns, and sidebar behavior for different devices.
  • Common Mistakes: Lists best practices and common pitfalls to avoid in design implementation.

Quick Start

To start using the Nirvana Design System, review the provided documentation and integrate the design principles and components into your UI development process.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I maintain brand consistency for Trimble construction software UI?▼

The Nirvana design system defines UI component patterns like StatCards, dashboard module cards, data tables, forms, charts, and AI insight cards. These patterns ensure consistent data display and interaction within the construction software suite.

How do I structure layout and navigation for a construction software interface?▼

Structure the layout using a fixed AppShell with a TopBar, Sidebar, Main Content Area, and Footer. Navigation behavior is controlled through structured NavGroups and NavItems to organize application routes effectively.

What are the UI design principles for integrating AI features in construction software?▼

UI design principles for AI integration focus on density, scannability, and seamless AI component behavior. The system provides specific AI Insight card patterns and animation guidelines to standardize artificial intelligence interactions.

How do I apply color schemes and typography using Trimble brand tokens?▼

Apply Trimble brand tokens by referencing predefined color schemes, surface systems, typography scales, and shadows. These tokens provide the foundational visual variables required for consistent interface development.

What are common UI design mistakes to avoid in construction software development?▼

Common UI design mistakes include misusing responsive breakpoints, ignoring sidebar behavior rules, and implementing inconsistent animations. The design system documentation lists these pitfalls to ensure layout and component best practices are followed.

Related Skills

Explore More Design & Creative Skills→
sonle0311sonle0311

ckm:design-system

Manage design token architecture and generate CSS variables from JSON files.

Community
Advanced
hueyexehueyexe
3

design-systems-frontend-architecture

Plans scalable frontend systems with tokens, components, and governance.

Community
Advanced
MayandevMayandev
3.2k

frontend-design

Automate creation of production-grade frontend interfaces with structured design systems.

Community
Basic
tyronerosstyroneross
1

design-guidance

Resolve design system tokens and structural constraints for UI components.

Community
Advanced