---

name: project-context description: Loads project structure, tech stack, and coding conventions for the Photography Order Management ERP. Use when understanding the codebase, onboarding, or needing project context.

Project Context Skill

Provides quick access to project structure and conventions without reading full documentation.

Tech Stack

Directory Structure

Copysrc/
├── components/         # PascalCase: OrderInfo.tsx, ServiceConfigCard.tsx
├── data/               # kebab-case: mock-order.ts
├── hooks/              # camelCase: useOrder.ts, useProjectPage.ts
├── providers/          # QueryProvider.tsx
├── router.tsx          # TanStack Router configuration
├── App.tsx             # Entry point
└── index.css           # Tailwind v4 + HeroUI styles

Key Conventions

1. Named exports only: export function ComponentName() {}
2. HeroUI compound components: <Card.Content>, <Modal.Body>
3. Use onPress for interactions (not onClick)
4. Direct imports from @heroui/react — no wrappers
5. TanStack Router for navigation: <Link to="/path">
6. TanStack Query for data: useQuery({ queryKey, queryFn })

MCP Tools

Before creating any UI component or implementing new logic, use these tools:

• HeroUI:
  • mcp_heroui-react_list_components — Check availability
  • mcp_heroui-react_get_component_docs — Full anatomy, props, and examples
  • mcp_heroui-react_get_component_source_code — Understand internal logic
• Documentation:
  • mcp_context7_resolve-library-id — Find library ID (e.g., TanStack, React 19)
  • mcp_context7_query-docs — Query latest documentation and code snippets

References

For full details, read these files:

• dev_instruction_v3.md — Primary source of truth
• package.json — All dependencies
• .agent/workflows/onboarding.md — Onboarding process