coding-standards

Enforce CSS, TypeScript, and React coding standards for web projects.

Updated Apr 16, 2026
One-click install
npx skills add https://github.com/mozilor-technologies/mozilor-skills --skill coding-standards-mozilor-technologies
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: coding-standards
Source: https://github.com/mozilor-technologies/mozilor-skills/tree/main/skills/frontend/coding-standards
Command: npx skills add https://github.com/mozilor-technologies/mozilor-skills --skill coding-standards-mozilor-technologies

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides mandatory coding standards ensuring consistency, quality, and best practices across the Webtoffee Marketing Suite development team.

Core Features & Use Cases

  • Enforces Tailwind CSS Prefix Rules: Ensures all utility classes use the sf- prefix, preventing style conflicts.
  • TypeScript Conventions: Guides proper type definitions, file extensions, and code structure for TypeScript projects.
  • Component and Folder Patterns: Standardizes naming schemes and code organization for scalable React component architecture.
  • Form Handling and State Management: Recommends best practices for using React Hook Form, Zustand, and error handling routines.
  • Use Case: When onboarding new developers or maintaining code quality, apply these standards to promote readability and avoid bugs.

Quick Start

Follow this Skill to implement and audit coding practices in your codebase to maintain high standards.

Frequently Asked Questions about coding-standards

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce coding standards for React and TypeScript projects?

To enforce coding standards for React and TypeScript projects, apply strict guidelines covering type definitions, component patterns, and naming schemes. This ensures code quality, consistency, and scalable architecture across the development team.

What are the best practices for Tailwind CSS to prevent style conflicts?

The best practice for Tailwind CSS to prevent style conflicts is enforcing prefix rules, requiring all utility classes to use a specific prefix like `sf-`. This maintains style isolation and avoids collisions in shared codebases.

How do I standardize React component folder patterns for team onboarding?

Standardize React component folder patterns by applying rigorous coding rules that dictate naming schemes and code organization. This ensures new developers follow consistent structural conventions, promoting readability and reducing bugs during onboarding.

Does this coding guidelines skill recommend specific libraries for form handling and state management?

Yes, the coding guidelines recommend using React Hook Form for form handling and Zustand for state management. It defines best practices and error handling routines to maintain consistency across these specific libraries.

Can I use these TypeScript conventions in continuous integration workflows?

Yes, you can use these TypeScript conventions in continuous integration workflows to audit codebases automatically. The standards enforce file extensions, code structure, and type definitions to validate code quality during CI pipelines.