Run any Skill in Manus with one click

coding-conventions

Stars44

Forks27

UpdatedMay 19, 2026 at 05:26

Coding style and naming conventions for divine-web. Load when writing or editing TypeScript, React components, hooks, or styles.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

divinevideo

divinevideo/divine-web

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	coding-conventions
description	Coding style and naming conventions for divine-web. Load when writing or editing TypeScript, React components, hooks, or styles.

Coding Conventions

Language and File Types

TypeScript + React 18.
Components: .tsx. Utilities and non-component code: .ts.
One component per file. One hook per file.

Naming

Components: PascalCase named exports. Default exports only for page components when router lazy loading requires it.
Hooks: useX prefix. Custom hooks live in src/hooks/.
Pages: *Page.tsx suffix in src/pages/.
Test files: *.test.ts(x), colocated with the source file.

Imports

Use @/ alias for anything under src/.
Group imports: external packages first, blank line, then @/ internal imports.

Styling

TailwindCSS utility classes only.
Use tailwind-merge (twMerge) to resolve conflicting classes in composed components.
No CSS modules. No styled-components. No inline styles unless the value is dynamic (e.g., computed at runtime).

File Organization

Path	Contents
`src/components/`	Reusable UI components
`src/pages/`	Route-level page components
`src/hooks/`	Custom React hooks
`src/lib/`	Utility functions and shared logic
`src/contexts/`	React context providers
`src/types/`	Shared TypeScript type definitions
`src/test/`	Test setup and utilities

Comments and TODOs

Do not write comments unless explicitly asked.
No placeholder comments (e.g., // add logic here).
TODOs must reference an issue: TODO(#123): description. Bare TODO, FIXME, or HACK without an issue reference will fail lint.

Linting

ESLint with TypeScript, React Hooks, and HTML plugins.
Custom rules in eslint-rules/:
- no-inline-script: forbids inline <script> tags in HTML.
- no-placeholder-comments: forbids TODO/FIXME without issue reference.
- require-webmanifest: ensures public/manifest.webmanifest exists.
No inline eslint-disable comments. Fix the lint issue instead.

Exports

Prefer named exports everywhere.
Default exports are acceptable for page components when the router uses React.lazy() to load them.

More from this repository

same repository

cloudflare-agent-setup

divinevideo/divine-web

Install Cloudflare skills and MCP servers for this agent. Load when you need to set up or verify Cloudflare agent tooling. The URL below is the canonical, always-current source of truth.

2026-06-0544

pr-conventions

divinevideo/divine-web

Commit and pull request conventions for divine-web. Load when creating commits, writing PR descriptions, or preparing branches for review.

2026-05-1944

project-structure

divinevideo/divine-web

Project structure and file organization for divine-web. Load when creating new files, moving code, or navigating the codebase.

2026-05-1944

spa-subdomain-root-render

divinevideo/divine-web

Render a page component directly at subdomain root (/) without URL redirect in React Router SPAs. Use when: (1) Subdomain should show content at / instead of redirecting to /profile/id or similar, (2) User sees blank page because component relies on useParams() but there's no route param at /, (3) Want username.domain.com/ to feel like a personal website without /profile/xyz in the URL. Pattern involves edge-injected global data + component fallback to that data when route params missing.

2026-05-1944

testing-guidelines

divinevideo/divine-web

Testing conventions for divine-web. Load when writing or modifying tests, or when verifying changes with Vitest or Playwright.

2026-05-1944

Coding Conventions

Language and File Types

TypeScript + React 18.

Components: .tsx. Utilities and non-component code: .ts.

One component per file. One hook per file.

Naming

Components: PascalCase named exports. Default exports only for page components when router lazy loading requires it.

Hooks: useX prefix. Custom hooks live in src/hooks/.

Pages: *Page.tsx suffix in src/pages/.

Test files: *.test.ts(x), colocated with the source file.

Imports

Use @/ alias for anything under src/.

Group imports: external packages first, blank line, then @/ internal imports.

Styling

TailwindCSS utility classes only.

Use tailwind-merge (twMerge) to resolve conflicting classes in composed components.

No CSS modules. No styled-components. No inline styles unless the value is dynamic (e.g., computed at runtime).

File Organization

Path

Contents

src/components/

Reusable UI components

src/pages/

Route-level page components

src/hooks/

Custom React hooks

src/lib/

Utility functions and shared logic

src/contexts/

React context providers

src/types/

Shared TypeScript type definitions

src/test/

Test setup and utilities

Comments and TODOs

Do not write comments unless explicitly asked.

No placeholder comments (e.g., // add logic here).

TODOs must reference an issue: TODO(#123): description. Bare TODO, FIXME, or HACK without an issue reference will fail lint.

Linting

ESLint with TypeScript, React Hooks, and HTML plugins.

Custom rules in eslint-rules/:

no-inline-script: forbids inline <script> tags in HTML.
no-placeholder-comments: forbids TODO/FIXME without issue reference.
require-webmanifest: ensures public/manifest.webmanifest exists.

No inline eslint-disable comments. Fix the lint issue instead.

Exports

Prefer named exports everywhere.

Default exports are acceptable for page components when the router uses React.lazy() to load them.