essentials
SkillDev toolsGives your agent a set of critical rules it must always follow.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the essentials skill
About this capability
Critical rules that must always be followed
What this skill tells your AI
The instructions your AI receives, as published by trycompai/comp in .agents/skills/essentials/SKILL.md and read by ahel’s review.
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.
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.
// ✅ 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.
// ✅ 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.
// ✅ 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.
// ✅ 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.
// 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.
// ✅ React state for UI
const [isOpen, setIsOpen] = useState(false);
// ❌ No nuqs
import { useQueryState } from 'nuqs';
After Changes
Always run checks after code changes:
bun run typecheck
bun run lint
Fix all errors before committing.
Signals
- GitHub stars
- 2k
- Forks
- 412
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
essentials- Source
- github.com/trycompai/comp