AgentSkillsCN

qovery-console-standards

Qovery Console 的编码规范、架构指南、命名约定、测试实践以及开发工作流。当您在 Qovery Console 单体仓库中编写、审查或重构代码时，这一技能应被广泛应用，以确保代码的一致性与高质量。

SKILL.md
--- frontmatter
name: qovery-console-standards
description: Qovery Console coding standards, architecture guidelines, naming conventions, testing practices, and development workflows. This skill should be used when writing, reviewing, or refactoring code in the Qovery Console monorepo to ensure consistency and quality.
license: MIT
metadata:
  author: qovery
  version: '1.0.0'

Qovery Console Standards

Comprehensive coding standards for the Qovery Console React/TypeScript monorepo. Contains 7 rules covering architecture, React patterns, styling, testing, naming, development workflow, and pre-commit quality gates.

When to Apply

Reference these guidelines when:

  • •Writing new components, hooks, or utilities in the Console
  • •Reviewing or refactoring existing Console code
  • •Setting up tests for business logic
  • •Making styling decisions (Tailwind, Radix, accessibility)
  • •Running development commands or preparing commits
  • •Creating new Nx libraries or components

Rule Categories

RuleFileScope
Project Architectureproject-architecture.mdNx monorepo structure, lib organization, layer boundaries
React & TypeScriptreact-typescript-standards.mdImport rules, component patterns, state management
Stylingstyling-standards.mdTailwindCSS, Radix UI, responsive design, accessibility
Testingtesting-standards.mdTest setup, structure, mocking, coverage
Naming Conventionsnaming-conventions.mdFile, variable, component, and constant naming
Development Commandsdevelopment-commands.mdDaily workflow, Nx commands, package management, git
Pre-commit Workflowpre-commit-workflow.mdConventional commits, format/test/lint checks

Quick Reference

Architecture

  • •Nx monorepo: apps/ and libs/ (domains, pages, shared)
  • •data-access = API logic, feature = business components, ui = reusable presentation
  • •No circular imports; use Nx generators for new libs

React & TypeScript

  • •Inline type imports: import { type Foo, bar } from './module'
  • •Functional components only, no React.FC, destructure props in signature
  • •React Query for server state, clsx/twMerge for conditional classes

Styling

  • •TailwindCSS only, mobile-first, Radix UI for accessibility
  • •No inline styles, consistent spacing via Tailwind scale

Testing

  • •renderWithProviders from @qovery/shared/util-tests
  • •userEvent over fireEvent, Arrange-Act-Assert pattern
  • •Cover success, error, and edge states

Naming

  • •Snake-case files (user-profile.tsx), PascalCase components
  • •Props suffix for interfaces, UPPER_SNAKE_CASE for constants

Workflow

  • •Yarn Berry only (never npm), nvm use 23
  • •Conventional commits: feat|fix|chore(scope): message
  • •Pre-commit: format -> test -> snapshot review -> lint

How to Use

Read individual rule files for detailed guidelines:

code
rules/project-architecture.md
rules/react-typescript-standards.md
rules/styling-standards.md

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md