AgentSkillsCN

frontend-guardrails

为本仓库的前端开发设立防护准则。在编辑或新增前端代码时使用,以确保代码的一致性与可维护性。

SKILL.md
--- frontmatter
name: frontend-guardrails
description: "Frontend development guardrails for this repo. Use when editing or adding frontend code to ensure consistency and maintainability."

Goals

  • Keep SWR keys and config centralized
  • Enforce UI settings access through the hook

SWR keys / config

  • When adding a key or config, update frontend/src/lib/swr-keys.ts and/or frontend/src/lib/swr-config.ts
  • When using SWR, always import keys/config from those files; never define inline keys or configs elsewhere
  • If reusable logic is needed, extend those files instead of duplicating

UI settings

  • When reading or writing UI settings, use frontend/src/hooks/use-ui-settings.ts
  • When adding a UI setting, extend the hook's types, defaults, and persistence logic; do not add a new store or access storage directly

Settings

You should use help prop of the form components to provide users with information about what a setting does. If the setting is not self-explanatory, you should also provide a link to the documentation.

The content of the help you provide should be stored in a split file.

  • example: frontend/src/modules/servers/lib/server-form-content.ts

Example

ts
import { swrKeys } from "@/lib/swr-keys";
import { swrConfig } from "@/lib/swr-config";
import { useUiSettings } from "@/hooks/use-ui-settings";

const settings = useUiSettings();
const key = swrKeys.userProfile();
const config = swrConfig.default;