Does it handle state management?

Yes, it implements Redux Toolkit with Redux Persist and provides standardized Thunk patterns for async operations.

Is TypeScript strict mode required?

Yes, the skill is designed to work within a strict TypeScript environment to ensure maximum type safety and catch errors during development.

What tech stack does this skill support?

It is optimized for Next.js 12.x, React 17, Redux Toolkit, and SCSS modules.

What testing frameworks are included?

The skill includes conventions for unit testing with Jest/React Testing Library and E2E testing with Playwright.

Can I use relative imports?

No, this skill enforces the use of path aliases (e.g., @/components) to ensure cleaner and more maintainable imports across the project.

TypeScript React Dashboard Architect

Name: TypeScript React Dashboard Architect
Author: violetio

byvioletio

•

デザインツール

Standardizes TypeScript and React development for professional dashboards using Next.js and Redux Toolkit.

This skill provides Claude with a comprehensive set of conventions and best practices for building enterprise-grade dashboards. It enforces a strict TypeScript environment, Next.js 12.x architecture, and Redux Toolkit state management. By codifying path aliases, SCSS module patterns, and testing protocols with Jest and Playwright, it ensures that generated code is consistent, maintainable, and production-ready. It is particularly useful for teams looking to maintain high code quality across complex frontend applications with persistent state requirements.

主な機能

01Provides integrated testing scaffolding for Jest, React Testing Library, and Playwright.

02Implements robust state management patterns using Redux Toolkit and Redux Persist.

03Enforces strict TypeScript and React 17 conventions for Next.js 12.x environments.

04Standardizes UI architecture through SCSS modules and predefined path aliases.

051 GitHub stars

06Automates boilerplate generation for components, thunks, and API interfaces.

ユースケース

01Building complex administrative dashboards with persistent state requirements.

02Enforcing coding standards and testing protocols across a distributed development team.

03Migrating legacy React applications to a structured Next.js and TypeScript architecture.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add violetio/violet-ai-plugins typescript-react

For use in Claude.ai and ChatGPT

Download Skill