Agent Skills
› trycompai/comp
› essentials
essentials
GitHub定义前端开发核心规范，强制使用 bun、特定设计系统组件及 TypeScript 类型安全规则。规定数据获取与状态管理最佳实践，并集成代码检查流程以确保提交质量。
Trigger Scenarios
需要遵循项目基础编码规范时
初始化或配置前端开发环境时
Install
npx skills add trycompai/comp --skill essentials -g -y
SKILL.md
Frontmatter
{
"name": "essentials",
"description": "Critical rules that must always be followed"
}
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.
Version History
- 0ccfcc2 Current 2026-09-27 10:24
