AgentSkillsCN

frontend

在开发仪表盘及各类前端React代码时，掌握相应的规则与最佳实践。

SKILL.md
--- frontmatter
name: frontend
description: Rules and best practices when working on the dashboard and elements React frontend codebases
metadata:
  relevant_files:
    - "client/dashboard/**"
    - "elements/**"

React & Frontend Coding Guidelines

General Guidelines

  • •Use the pnpm package manager
  • •When interacting with the server, prefer the @gram/sdk package (sourced from workspace at ./client/sdk)
  • •The document client/sdk/REACT_QUERY.md is very helpful for understanding how to use React Query hooks that come with the SDK.
  • •For data fetching and server state, use @tanstack/react-query instead of manual useEffect/useState patterns
  • •When invalidating React Query caches after mutations, invalidate ALL relevant query keys — not just the most specific one. Different hooks may use different query key prefixes for the same data (e.g., queryKeyInstance vs toolsets.getBySlug). Use broad invalidation helpers like invalidateAllToolset(queryClient) to ensure all consumers refresh.

Styling and Design System

  • •ALWAYS use Moonshine design system utilities from @speakeasy-api/moonshine instead of hardcoded Tailwind color values
  • •NEVER use hardcoded Tailwind colors like bg-neutral-100, border-gray-200, text-gray-500, etc.