Project Context Skill

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

Tech Stack

Directory Structure

src/
├── 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