Does this skill support the latest Tailwind CSS version?

Yes, it is specifically configured for Tailwind v4, enforcing new syntax like parentheses for CSS variables and the suffix-based important modifier.

Can I use this skill to check my existing code for errors?

Yes, the skill includes a detailed pre-commit verification section with bash commands to scan your source directory for architectural and syntax violations.

What happens if I try to write a manual fetch in a useEffect?

The protocol flags this as a violation and directs the developer to use TanStack Query hooks to ensure proper caching, invalidation, and state management.

How does this skill improve React performance?

It mandates the use of Zustand selectors and useShallow hooks, which prevents components from re-rendering unnecessarily when unrelated parts of the state change.

React Architecture & Styling Guardrails

Name: React Architecture & Styling Guardrails
Author: fiatkongen

byfiatkongen

0•

Design Tools

Enforces strict architectural patterns and styling best practices for modern React applications using Zustand, TanStack Query, and Tailwind v4.

This skill provides a rigorous enforcement protocol for building high-quality React frontends with a modern tech stack. It eliminates common anti-patterns by mandating selector-only access for Zustand, custom hook patterns for TanStack Query, and the latest Tailwind v4 syntax conventions. By implementing these constraints alongside shadcn/ui standards and feature-based file organization, the skill ensures that Claude maintains a production-grade codebase with consistent state management, accessibility baselines, and automated pre-commit verification checks.

Key Features

01Automated Tailwind v4 syntax validation and migration

02Strict Zustand selector-only access enforcement

03Mandatory TanStack Query custom hook and key factory patterns

04Standardized shadcn/ui and CVA component architecture

050 GitHub stars

06Comprehensive pre-commit verification script generation

Use Cases

01Migrating existing CSS-in-JS or Tailwind v3 codebases to the Tailwind v4 specification

02Establishing a professional-grade folder structure and accessibility baseline for new frontend projects

03Standardizing state management and data fetching patterns across a large React team

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fiatkongen/saurun-marketplace react-enforcement

For use in Claude.ai and ChatGPT

Key Features

01Automated Tailwind v4 syntax validation and migration

02Strict Zustand selector-only access enforcement

03Mandatory TanStack Query custom hook and key factory patterns

04Standardized shadcn/ui and CVA component architecture

050 GitHub stars

06Comprehensive pre-commit verification script generation

Use Cases

01Migrating existing CSS-in-JS or Tailwind v3 codebases to the Tailwind v4 specification

02Establishing a professional-grade folder structure and accessibility baseline for new frontend projects

03Standardizing state management and data fetching patterns across a large React team

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fiatkongen/saurun-marketplace react-enforcement

For use in Claude.ai and ChatGPT