skills.rest
nuclia
nucliaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-system

Document Nuclia design system components, SCSS tokens, and UI patterns.

56|18|Updated Apr 26, 2022
Search Tags:#ui#design system#components#angular#styling#tokens#pastanaga#sistema
One-click install
npx skills add https://github.com/nuclia/frontend --skill design-system-nuclia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/nuclia/frontend/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/nuclia/frontend --skill design-system-nuclia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides expert guidance on using and implementing the Nuclia design system, ensuring consistent, high-quality UI development across all applications.

Core Features & Use Cases

  • Component Usage: Understand how to use all @nuclia/sistema and @guillotinaweb/pastanaga-angular components.
  • Styling & Theming: Learn how to leverage design tokens (colors, spacing, typography) and SCSS variables for consistent styling.
  • Service Integration: Correctly use SisModalService and SisToastService for user feedback and interactions.
  • Use Case: When building a new settings page, this Skill helps you select the right components (like nsi-two-columns-configuration-item), apply correct spacing and colors, and implement features like toggles and inputs according to the design guidelines.

Quick Start

Use the design-system skill to find the correct component for adding a new status indicator to a table row.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I use Angular UI components from the Nuclia design system in my dashboard?▼

To use Nuclia design system Angular UI components in your dashboard, reference the `@nuclia/sistema` or `@guillotinaweb/pastanaga-angular` libraries for detailed API references, implementation patterns, and component usage guidelines.

What's the best way to apply consistent styling and design tokens across Nuclia frontend applications?▼

The best way to apply consistent styling across Nuclia frontend applications is by leveraging SCSS design tokens for color palettes, typography, spacing, and Z-index management, ensuring high-quality UI development.

How do I add a status indicator to a table row using the pastanaga-angular library?▼

Adding a status indicator to a table row using the pastanaga-angular library involves selecting the correct component, applying the appropriate design tokens for spacing and colors, and following the detailed API references provided.

Can I use SisModalService and SisToastService for user feedback in manager-v2 and nucliadb-admin?▼

Yes, you can use SisModalService and SisToastService for user feedback and interactions in manager-v2 and nucliadb-admin, following the service integration guidelines provided within the design system.

When do I need to use the nsi-two-columns-configuration-item component for a settings page?▼

You need to use the nsi-two-columns-configuration-item component when building a new settings page, selecting the right components, applying correct spacing and colors, and implementing toggles and inputs according to design guidelines.

Related Skills

Explore More Design & Creative Skills→
jbaranskijbaranski

jeff-skill-angular-project

Install or update the Angular CLI globally and verify with ng version.

Community
Intermediate
sonetasoneta
9

soneta-ui-style

Define a unified design system with CSS/SCSS tokens for Soneta/Enova365 applications.

Official
Advanced
nanorepublicananorepublica
61

Global Tech Stack

Validate code against centralized global tech stack standards.

Community
Basic
eserlaneserlan
2

web-component-design

Standardize cross-framework UI component design across React, Vue, and Svelte.

Community
Advanced