coding-conventions

Name: coding-conventions
Availability: InStock
Author: Divine

Define TypeScript, React, hook, and Tailwind coding conventions for the divine-web codebase.

46|28|Updated Sep 8, 2025

Search Tags:#typescript #react #coding standards #hooks #eslint #tailwindcss

Ready to run

npx skills add https://github.com/divinevideo/divine-web --skill coding-conventions-divinevideo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: coding-conventions
Source: https://github.com/divinevideo/divine-web/tree/main/.agents/skills/coding-conventions
Command: npx skills add https://github.com/divinevideo/divine-web --skill coding-conventions-divinevideo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents style drift and slow review cycles by giving a clear, enforceable set of rules for writing TypeScript, React components, hooks, and styles in divine-web.

Core Features & Use Cases

Language & file conventions: Standardizes how TypeScript and React code is split across .ts and .tsx files, including one component and one hook per file.
Naming rules: Ensures consistent exports and predictable identifiers such as PascalCase, useX hooks, and *Page.tsx page suffixes.
Import and styling discipline: Enforces @/ import aliasing, grouped imports, Tailwind-only styling, and class conflict resolution via tailwind-merge.
Quality guardrails: Prohibits placeholder comments and unreferenced TODOs, defines linting expectations, and discourages lint bypassing.

Quick Start

Apply the divine-web coding conventions while writing a new React component in TypeScript so your code matches the expected folder layout, naming, imports, Tailwind usage, and lint requirements.

Frequently Asked Questions about coding-conventions

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

FAQPage Schema

How do I enforce consistent TypeScript and React coding standards across my project?▼

TypeScript and React coding standards are enforced by defining strict file-type conventions, naming rules, and ESLint expectations. This prevents style drift and reduces code review friction by standardizing component and hook authoring.

What's the best way to structure React hooks and components in a TypeScript codebase?▼

The best way to structure React hooks and components is to maintain a one-component, one-hook per file rule using `.ts` and `.tsx` extensions. Components use PascalCase, hooks use the `useX` naming pattern, and pages use the `*Page.tsx` suffix.

How do I manage Tailwind CSS class conflicts in a React application?▼

Tailwind CSS class conflicts are managed using `tailwind-merge` for class conflict resolution. The conventions require Tailwind-only styling to ensure consistent design implementation across components without conflicting utility classes.

Can I disable ESLint rules inline if I need to bypass a specific coding convention?▼

No, you cannot safely disable ESLint rules to bypass coding conventions. The standards discourage lint bypassing, prohibit unsafe disable directives, and enforce strict comment and TODO policies to maintain code quality and reviewability.

Why should I group imports using the `@/` alias in a TypeScript project?▼

Grouping imports using the `@/` alias enforces import discipline and predictability across the TypeScript codebase. This practice standardizes module resolution, reduces style inconsistency, and aligns with the expected ESLint configuration.

What are the limitations of using placeholder comments and unreferenced TODOs in code?▼

Placeholder comments and unreferenced TODOs are strictly prohibited by the coding conventions. This limitation ensures that all code annotations are actionable and tracked, preventing abandoned code notes from increasing review friction and causing style drift.