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

0•

개발자 도구

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.

주요 기능

01Standardized Redux Thunk pattern using createAppAsyncThunk and axiosWrapper

02Mandatory Redux Reducer patterns using createReducer with automatic state cleanup

030 GitHub stars

04Strict UI development guidelines prohibiting Material-UI in favor of custom SCSS modules

05Automated success and error notification patterns for API interactions

06Unified Next.js API route configuration with built-in middleware and error handling

사용 사례

01Implementing complex Redux state management for dashboard data fetching and mutations

02Refactoring legacy components to align with the 'No Material-UI' design policy

03Building new merchant or channel dashboard features within the Violet ecosystem

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add violetio/violet-ai-plugins violet-dashboard

For use in Claude.ai and ChatGPT

Download Skill