# Essentials

> Critical rules that must always be followed

- Skill: `trycompai/essentials` (Agent Skill)
- Install (CLI): `npx skillmds@latest add trycompai/essentials`
- Raw SKILL.md: https://api.skillmd.com/api/skills/trycompai/essentials/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: trycompai (https://skillmd.com/u/trycompai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/trycompai/essentials

---


Source Cursor rule: `.cursor/rules/essentials.mdc`.
Original file scope: `**/*.{ts,tsx}`.
Original Cursor alwaysApply: `true`.

# Essentials

## Package Manager

Use `bun`, never npm/yarn/pnpm.

```bash
bun install          # Install deps
bun add <pkg>        # Add package
bun run <script>     # Run script
bunx <cmd>           # Execute binary
```

## Components

**Use `@trycompai/design-system` first**, `@trycompai/ui` only as fallback.

```tsx
// ✅ Design system
import { Button, Card, Input, Select } from '@trycompai/design-system';
import { Add, Close } from '@trycompai/design-system/icons';

// ❌ Don't use when DS has the component
import { Button } from '@trycompai/ui/button';
import { Plus } from 'lucide-react';
```

**No `className` on DS components** - use variants and props only.

```tsx
// ✅ Use variants
<Button variant="destructive" size="sm">Delete</Button>

// ❌ No className overrides
<Button className="bg-red-500">Delete</Button>
```

## TypeScript

**No `any`. No unsafe type assertions.**

```tsx
// ✅ Validate external data with zod
const TaskSchema = z.object({ id: z.string(), title: z.string() });
const task = TaskSchema.parse(response.data);

// ❌ Never
const data: any = fetchData();
const task = response as Task;
```

## Data Fetching

**Get `organizationId` from URL params, not session.**

```tsx
// ✅ From params
export default async function Page({ params }: { params: Promise<{ orgId: string }> }) {
  const { orgId } = await params;
}

// ❌ Not from session
const session = await auth.api.getSession();
const orgId = session?.session?.activeOrganizationId;
```

**Server components fetch, pass to client with SWR `fallbackData`.**

```tsx
// Server page
const data = await fetchData(orgId);
return <ClientComponent initialData={data} />;

// Client component
const { data } = useSWR(key, fetcher, { fallbackData: initialData });
```

## State Management

**No `nuqs`** - use React `useState` for UI state, Next.js for URL state.

```tsx
// ✅ React state for UI
const [isOpen, setIsOpen] = useState(false);

// ❌ No nuqs
import { useQueryState } from 'nuqs';
```

## After Changes

**Always run checks after code changes:**

```bash
bun run typecheck
bun run lint
```

Fix all errors before committing.