laboratory-ui

Standardize Angular multi-tenant UI components with CSS tokens and adaptive patterns.

1|Updated May 6, 2026
One-click install
npx skills add https://github.com/TUP-TESIS-LAB/FRONTEND-LABORATORIO --skill laboratory-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: laboratory-ui
Source: https://github.com/TUP-TESIS-LAB/FRONTEND-LABORATORIO/tree/main/.claude/skills/laboratory-ui
Command: npx skills add https://github.com/TUP-TESIS-LAB/FRONTEND-LABORATORIO --skill laboratory-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Este Skill resuelve la inconsistencia visual y la falta de escalabilidad en aplicaciones SaaS multi-tenant, permitiendo que cada laboratorio cliente mantenga su identidad visual sin sacrificar la consistencia del producto.

Core Features & Use Cases

  • White-labeling dinámico: Configuración centralizada de colores de marca y logos por tenant.
  • Arquitectura adaptativa: Implementación de una única base de código que se adapta automáticamente a experiencias mobile (app-like) y desktop (portal).
  • Uso: Ideal para equipos que necesitan desarrollar componentes Angular/PrimeNG consistentes, accesibles y responsive para portales de pacientes y administrativos.

Quick Start

Aplica el design system laboratory-ui para crear un nuevo componente de tarjeta de estadísticas que respete los tokens de marca y los breakpoints definidos.

Frequently Asked Questions about laboratory-ui

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

FAQPage Schema
How do I implement white-labeling for an Angular multi-tenant SaaS portal?

White-labeling for Angular multi-tenant SaaS portals is implemented through centralized configuration of brand colors and logos per tenant using CSS tokens. This allows each client laboratory to maintain its visual identity without sacrificing product consistency.

What is the best way to build responsive PrimeNG components for clinical laboratory portals?

Building responsive PrimeNG components for clinical laboratory portals utilizes an adaptive architecture with CSS tokens and defined breakpoints. This ensures consistent accessibility and adaptive behavior across mobile and desktop devices from a single codebase.

Can I use a single Angular codebase for both mobile and desktop patient portals?

Yes, you can use a single Angular codebase for both mobile and desktop patient portals by applying adaptive architecture patterns. The codebase automatically adapts to provide app-like mobile experiences and desktop portal interfaces.

How do I standardize UI components like tables and forms across multiple SaaS tenants?

Standardizing UI components like tables and forms across multiple SaaS tenants involves applying a unified design system with CSS tokens. This guarantees visual consistency, accessibility, and responsive behavior for shells, tables, forms, and loading states.

Does this design system approach work for administrative portals and patient portals simultaneously?

Yes, this design system approach works simultaneously for administrative and patient portals in clinical laboratories. It provides consistent Angular/PrimeNG components, shells, and forms that adapt responsively while respecting each tenant's brand tokens.