一键在 Manus 中运行任何 Skill

coding-conventions

星标44

分支27

更新时间2026年5月19日 05:26

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

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

divinevideo

divinevideo/divine-web

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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.

同仓库更多 Skills

同仓库

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.

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