New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Essentials

by trycompai in trycompai/comp

Critical rules that must always be followed. An agent skill from trycompai/comp.

AGPL-3.0Auto-check passedFrontend & Design

Install Essentials

skills CLI
$ npx skills add trycompai/comp --skill essentials -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install trycompai/comp essentials --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/trycompai/comp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/essentials .claude/skills/essentials && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
essentials
GitHub stars
2k
Token cost
~583 tokens
SKILL.md length
89 words
Files
1
Skills in repo
31
Repo updated
First seen
Licence
AGPL-3.0

At a glance

Critical rules that must always be followed. An agent skill from trycompai/comp.

  • Frontend & Design work in your project
  • SKILL.md covers Package Manager, Components, TypeScript and Data Fetching, plus 2 more sections
  • Calls bun and bunx

What it does

Essentials is an agent skill from trycompai/comp. Critical rules that must always be followed

Its SKILL.md is about 580 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. The repository describes itself as: AI Native platform to get companies compliant - Vanta & Drata Alternative. The licence is AGPL-3.0.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/essentials”

What it can do on your machine

Read from SKILL.md and the folder at commit 0117612. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • bun
    • bunx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use bunx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Essentials loads about 583 tokens when it runs. Until then it costs about 14 tokens; SKILL.md has 89 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~14
When it runs · the whole SKILL.md, loaded when a task matches
~583

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from trycompai/comp at commit 0117612, republished under its AGPL-3.0 licence (© trycompai). 89 words, ~583 tokens.

Download SKILL.mdSave it as .claude/skills/essentials/SKILL.md (or your agent's skills folder).
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.

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.

© trycompai, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/essentials of trycompai/comp.

Open the folder on GitHubat commit 0117612

Compare with similar skills

Essentials next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Essentials compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Essentials this skilltrycompai/comp2k—~583Automated safety check: PassAGPL-3.0
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k98 repos~308Automated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

More from trycompai/comp

All 31 skills in this repo

  • API Endpoint Contract

    trycompai/comp

    The contract every new or modified API endpoint must follow so it is correct for the public OpenAPI spec, the MCP server (npm @trycompai/mcp-server), the ValidationPipe, and the docs.

    2k GitHub stars~2.7k tokensUpdated today
    Auto-check passed

  • Check Results Service

    trycompai/comp

    How to reuse ANY integration check's results in a feature via the universal CheckResultsService (apps/api integration-platform).

    2k GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • Data

    trycompai/comp

    A skill your agent uses when implementing data fetching, API calls, server/client components, or SWR hooks

    2k GitHub stars~955 tokensUpdated today
    Auto-check passed

  • Diagnose Generation Failure

    trycompai/comp

    A skill your agent uses when SDK generation failed or seeing errors.

    2k GitHub stars~938 tokensUpdated today
    Auto-check passed

  • Forms

    trycompai/comp

    A skill your agent uses when building forms - covers React Hook Form, Zod validation, and form patterns

    2k GitHub stars~1k tokensUpdated today
    Auto-check passed

  • Code

    trycompai/comp

    A skill your agent uses when writing TypeScript/React code - covers type safety, component patterns, and file organization

    2k GitHub stars~909 tokensUpdated today
    Auto-check: warnings

Categories

Questions about Essentials

What does Essentials do?

Critical rules that must always be followed. An agent skill from trycompai/comp. Essentials is an agent skill from trycompai/comp.

When should I use Essentials?

Essentials fits situations like: frontend & Design work in your project.

How do I install Essentials in Claude Code?

Run `npx skills add trycompai/comp --skill essentials -a claude-code`. Or copy the skill folder (.agents/skills/essentials in trycompai/comp) into .claude/skills/essentials in your project. Claude Code loads it when a task matches its description.

How do I install Essentials in Codex?

Run `npx skills add trycompai/comp --skill essentials -a codex`. Or copy the skill folder (.agents/skills/essentials in trycompai/comp) into .agents/skills/essentials in your project. Codex loads it when a task matches its description.

Can I use Essentials in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add trycompai/comp --skill essentials -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/essentials, .gemini/skills/essentials, .github/skills/essentials and .opencode/skills/essentials in your project.

What does Essentials need to run?

Going by SKILL.md and its folder, Essentials needs the command-line tools its instructions call (bun and bunx).

Does Essentials access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Essentials safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Essentials use?

Essentials is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Essentials use?

About 583 tokens (SKILL.md is roughly 2.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Essentials?

Skills that share tags, products or a category with Essentials: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Essentials?

trycompai (a GitHub organization) maintains it in trycompai/comp, which has 2,018 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on October 7, 2026.

Source: trycompai/comp on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.