Does this skill support Vue 3 and the Composition API?

This skill is specifically optimized for Vue 2 and the vue-property-decorator library used in the NimbusImage project, focusing on class-style components.

How does it handle dark mode styling?

It provides four specific methods for theming: Vuetify component inheritance, SCSS theme classes, dynamic class binding, and CSS variables using Vuetify's design tokens.

Does it include support for state management?

Yes, it covers Vuex store modules using vuex-module-decorators, including patterns for actions, mutations, and specialized caching with batch loading.

Why does the skill prohibit the use of console.log?

To maintain clean production logs and catch errors effectively, this skill enforces the use of dedicated logWarning and logError utilities instead of standard console methods.

Nimbus Frontend Architect

Name: Nimbus Frontend Architect
Author: arjunrajlaboratory

byarjunrajlaboratory

•

Design Tools

Streamlines development of Vue 2 and Vuetify components for the NimbusImage platform using class-style patterns and specialized API integrations.

The Nimbus Frontend skill is a comprehensive development guide for building and maintaining the NimbusImage web interface. It enforces strict architectural standards including TypeScript class-style components via vue-property-decorator and Vuex store modules. The skill provides specific implementation patterns for Vuetify 2, covering theme-aware styling for light and dark modes, standardized dialog structures, and advanced button loading states. It also ensures code quality by mandating the use of custom logging utilities over standard console methods and provides direct guidance for interacting with specialized scientific imaging APIs like Girder and Annotations.

Key Features

01Enforces TypeScript class-style component patterns using vue-property-decorator.

02Provides ready-to-use patterns for GirderAPI and AnnotationsAPI client integration.

03Standardizes Vuex store management with specialized @Module and @Action decorators.

04Ensures production-grade logging by substituting console methods with custom error utilities.

05Implements theme-aware Vuetify 2 styling for seamless light and dark mode transitions.

0618 GitHub stars

Use Cases

01Implementing consistent, theme-responsive UI elements using Vuetify 2 design patterns.

02Migrating legacy Vue components to type-safe TypeScript class-based structures.

03Developing high-performance annotation tools for medical or scientific imaging platforms.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add arjunrajlaboratory/nimbusimage nimbus-frontend

For use in Claude.ai and ChatGPT

Download Skill