Can I use Material-UI with this skill?

No, the skill strictly enforces a 'No Material-UI' policy to maintain visual consistency with the custom design system using SCSS modules and CSS variables.

Is this skill compatible with the Next.js App Router?

This skill is specifically optimized for Next.js 12.x patterns, focusing on the Pages directory API routes and subdomain routing architectures.

Does this work with standard Redux Slices?

No, it mandates the use of createReducer with the builder.addCase() pattern and requires separating thunks and actions into their respective directories.

How does this skill handle API errors?

It uses a standardized axiosWrapper and nextConnect middleware to pass errors to a central handler and trigger automated snackbar notifications via Redux meta properties.

Why use createAppAsyncThunk instead of the standard version?

createAppAsyncThunk is a project-specific wrapper that integrates with the dashboard's notification system, enabling automated success and error snackbars through metadata.

Violet Dashboard Patterns

Name: Violet Dashboard Patterns
Author: violetio

byvioletio

개발자 도구

Standardizes code patterns and conventions for VioletDashboard Next.js applications using Redux Toolkit and custom SCSS styling.

소개

This skill provides Claude Code with a comprehensive set of mandatory implementation patterns for the VioletDashboard ecosystem. It enforces specific Redux Thunk and Reducer architectures, standardized Next.js API route configurations using nextConnect, and strict UI component guidelines that favor custom SCSS modules over external libraries like Material-UI. It is essential for developers maintaining or extending the VioletDashboard to ensure codebase consistency, automated notification handling, and adherence to the project's specific design system.

주요 기능

Standardized Redux Thunk pattern using createAppAsyncThunk and axiosWrapper
Mandatory Redux Reducer patterns using createReducer with automatic state cleanup
0 GitHub stars
Strict UI development guidelines prohibiting Material-UI in favor of custom SCSS modules
Automated success and error notification patterns for API interactions
Unified Next.js API route configuration with built-in middleware and error handling

사용 사례

Implementing complex Redux state management for dashboard data fetching and mutations
Refactoring legacy components to align with the 'No Material-UI' design policy
Building new merchant or channel dashboard features within the Violet ecosystem

소개

주요 기능

Standardized Redux Thunk pattern using createAppAsyncThunk and axiosWrapper
Mandatory Redux Reducer patterns using createReducer with automatic state cleanup
0 GitHub stars
Strict UI development guidelines prohibiting Material-UI in favor of custom SCSS modules
Automated success and error notification patterns for API interactions
Unified Next.js API route configuration with built-in middleware and error handling

사용 사례

Implementing complex Redux state management for dashboard data fetching and mutations
Refactoring legacy components to align with the 'No Material-UI' design policy
Building new merchant or channel dashboard features within the Violet ecosystem