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.

主な機能

Provides integrated testing scaffolding for Jest, React Testing Library, and Playwright.
Implements robust state management patterns using Redux Toolkit and Redux Persist.
Enforces strict TypeScript and React 17 conventions for Next.js 12.x environments.
Standardizes UI architecture through SCSS modules and predefined path aliases.
1 GitHub stars
Automates boilerplate generation for components, thunks, and API interfaces.

ユースケース

Building complex administrative dashboards with persistent state requirements.
Enforcing coding standards and testing protocols across a distributed development team.
Migrating legacy React applications to a structured Next.js and TypeScript architecture.

概要

主な機能

Provides integrated testing scaffolding for Jest, React Testing Library, and Playwright.
Implements robust state management patterns using Redux Toolkit and Redux Persist.
Enforces strict TypeScript and React 17 conventions for Next.js 12.x environments.
Standardizes UI architecture through SCSS modules and predefined path aliases.
1 GitHub stars
Automates boilerplate generation for components, thunks, and API interfaces.

ユースケース

Building complex administrative dashboards with persistent state requirements.
Enforcing coding standards and testing protocols across a distributed development team.
Migrating legacy React applications to a structured Next.js and TypeScript architecture.