Agent skill

Typescript Skills

by llama-farm in llama-farm/llamafarm

Shared TypeScript best practices for Designer and Electron subsystems.

Apache-2.0Auto-check passedFrontend & Design

Install Typescript Skills

skills CLI
$ npx skills add llama-farm/llamafarm --skill typescript-skills -a claude-code

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

GitHub CLI
$ gh skill install llama-farm/llamafarm typescript-skills --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/llama-farm/llamafarm.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/typescript-skills .claude/skills/typescript-skills && 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
typescript-skills
GitHub stars
836
Token cost
~696 tokens
SKILL.md length
179 words
Files
5
Skills in repo
19
Repo updated
First seen
Licence
Apache-2.0

At a glance

Shared TypeScript best practices for Designer and Electron subsystems.

  • Works in 5 steps: Strict mode always - Never use any… → Prefer interfaces - Use interface for… → Explicit return types - Always type… → …
  • Frontend & Design work in your project
  • SKILL.md covers Overview, Tech Stack, Configuration and Core Principles, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Typescript Skills is an agent skill from llama-farm/llamafarm. Shared TypeScript best practices for Designer and Electron subsystems.

Its SKILL.md is about 700 tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files (for example `patterns.md`, `security.md` and `testing.md`).

It sits in Frontend & Design. It works with TypeScript, TanStack, Vite and Electron. The repository describes itself as: Deploy any AI model, agent, database, RAG, and pipeline locally or remotely in minutes. The licence is Apache-2.0.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/typescript-skills”

Requirements

  • Pre-approved tools (allowed-tools): Read, Grep, Glob

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Strict mode always - Never use any without explicit justification
  2. Prefer interfaces - Use interface for object shapes, type for unions/intersections
  3. Explicit return types - Always type public function returns
  4. Immutability - Use readonly and as const where applicable
  5. Null safety - Handle null/undefined explicitly, avoid non-null assertions

What it can do on your machine

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

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Grep
    • Glob

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript and json).

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

  • Network

    No URLs in SKILL.md.

    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

Typescript Skills loads about 696 tokens when it runs. Until then it costs about 22 tokens; SKILL.md has 179 words of instructions outside code blocks.

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

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 llama-farm/llamafarm at commit 6244d46, republished under its Apache-2.0 licence (© llama-farm). 179 words, ~696 tokens.

Download SKILL.mdSave it as .claude/skills/typescript-skills/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
typescript-skills
description
Shared TypeScript best practices for Designer and Electron subsystems.
allowed-tools
Read, Grep, Glob
user-invocable
false

TypeScript Skills for LlamaFarm

Shared TypeScript best practices for Designer (React) and Electron App subsystems.

Overview

This skill covers idiomatic TypeScript patterns for LlamaFarm's frontend applications:

  • designer/: React 18 + TanStack Query + TailwindCSS + Radix UI
  • electron-app/: Electron 28 + Electron Vite

Tech Stack

SubsystemFrameworkBuildKey Libraries
designerReact 18ViteTanStack Query, Radix UI, axios, react-router-dom
electron-appElectron 28electron-viteelectron-updater, axios

Configuration

Both projects use strict TypeScript:

json
{
  "strict": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "noFallthroughCasesInSwitch": true
}

Core Principles

  1. Strict mode always - Never use any without explicit justification
  2. Prefer interfaces - Use interface for object shapes, type for unions/intersections
  3. Explicit return types - Always type public function returns
  4. Immutability - Use readonly and as const where applicable
  5. Null safety - Handle null/undefined explicitly, avoid non-null assertions

Quick Reference

React Component Pattern
tsx
interface Props {
  readonly title: string
  readonly onAction?: () => void
}

function MyComponent({ title, onAction }: Props): JSX.Element {
  return <button onClick={onAction}>{title}</button>
}
TanStack Query Hook Pattern
typescript
export const projectKeys = {
  all: ['projects'] as const,
  lists: () => [...projectKeys.all, 'list'] as const,
  detail: (id: string) => [...projectKeys.all, 'detail', id] as const,
}

export function useProject(id: string) {
  return useQuery({
    queryKey: projectKeys.detail(id),
    queryFn: () => fetchProject(id),
    enabled: !!id,
  })
}
Error Class Pattern
typescript
export class ApiError extends Error {
  constructor(
    message: string,
    public readonly status: number,
    public readonly response?: unknown
  ) {
    super(message)
    this.name = 'ApiError'
  }
}

Checklist Summary

CategoryCriticalHighMediumLow
Typing3421
Patterns2332
Testing2321
Security4210

© llama-farm, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files in .claude/skills/typescript-skills of llama-farm/llamafarm.

  • SKILL.md
  • patterns.md
  • security.md
  • testing.md
  • typing.md

Open the folder on GitHubat commit 6244d46

Compare with similar skills

Typescript Skills 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.

Typescript Skills compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Typescript Skills this skillllama-farm/llamafarm836—~696Automated safety check: PassApache-2.0
Stitch to React and Vite Dashboardgoogle-labs-code/stitch-skills8.5k—~914Automated safety check: NotesApache-2.0
Shadmin Devahaodev/shadmin174—~2.8kAutomated safety check: PassMIT
Design To CodeMigoXLab/coderio1142 repos~1.2kAutomated safety check: PassApache-2.0
Local Testinglobehub/lobe-ui2.2k—~2.1kAutomated safety check: PassMIT
Using Docs Kitlobehub/lobe-ui2.2k—~2.8kAutomated safety check: PassMIT

Similar skills

  • Stitch to React and Vite Dashboard

    google-labs-code/stitch-skills

    Official

    Turns Stitch screens into a React, Vite and TypeScript dashboard with TanStack Query data fetching, DESIGN.md tokens as CSS variables and optional read-only Web3 data.

    8.5k GitHub stars~914 tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: notes
  • Shadmin Dev

    ahaodev/shadmin

    Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS).

    174 GitHub stars~2.8k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Design To Code

    MigoXLab/coderio

    Pixel-perfect Figma to React conversion using coderio. An agent skill from MigoXLab/coderio.

    114 GitHub starsUsed in 2 repos~1.2k tokens
    Frontend & DesignAuto-check passed
  • Local Testing

    lobehub/lobe-ui

    Local browser verification for the lobe-ui component library and documentation site.

    2.2k GitHub stars~2.1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Using Docs Kit

    lobehub/lobe-ui

    Set up and author a documentation site with @lobehub/docs-kit (the lobedocs CLI, React Router + Vite static docs used by ui.lobehub.com).

    2.2k GitHub stars~2.8k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Morphous Catalog

    Ameyanagi/morphos

    Create or refresh Morphous website design-system/theme bundles from animal, insect, plant, landscape, mineral, weather, or other nature motifs.

    102 GitHub stars~2.1k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

More from llama-farm/llamafarm

All 19 skills in this repo
  • Reflect

    llama-farm/llamafarm

    Analyze the current session and propose improvements to skills.

    836 GitHub stars~1.5k tokensUpdated 4 mo ago
    Auto-check: notes
  • Temp Files

    llama-farm/llamafarm

    Guidelines for creating temporary files in system temp directory.

    836 GitHub stars~515 tokensUpdated 4 mo ago
    Auto-check: notes
  • CLI Skills

    llama-farm/llamafarm

    CLI best practices for LlamaFarm. An agent skill from llama-farm/llamafarm.

    836 GitHub stars~1.2k tokensUpdated 4 mo ago
    Auto-check passed
  • Code Review

    llama-farm/llamafarm

    Comprehensive code review for diffs. An agent skill from llama-farm/llamafarm.

    836 GitHub stars~2.3k tokensUpdated 4 mo ago
    Auto-check: notes
  • Commit Push PR

    llama-farm/llamafarm

    Commit changes, push to GitHub, and open a PR. An agent skill from llama-farm/llamafarm.

    836 GitHub stars~2.3k tokensUpdated 4 mo ago
    Auto-check: notes
  • Common Skills

    llama-farm/llamafarm

    Best practices for the Common utilities package in LlamaFarm.

    836 GitHub stars~885 tokensUpdated 4 mo ago
    Auto-check passed

Questions about Typescript Skills

What does Typescript Skills do?

Shared TypeScript best practices for Designer and Electron subsystems. Typescript Skills is an agent skill from llama-farm/llamafarm. Shared TypeScript best practices for Designer and Electron subsystems.

When should I use Typescript Skills?

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

How do I install Typescript Skills in Claude Code?

Run `npx skills add llama-farm/llamafarm --skill typescript-skills -a claude-code`. Or copy the skill folder (.claude/skills/typescript-skills in llama-farm/llamafarm) into .claude/skills/typescript-skills in your project. Claude Code loads it when a task matches its description.

How do I install Typescript Skills in Codex?

Run `npx skills add llama-farm/llamafarm --skill typescript-skills -a codex`. Or copy the skill folder (.claude/skills/typescript-skills in llama-farm/llamafarm) into .agents/skills/typescript-skills in your project. Codex loads it when a task matches its description.

Can I use Typescript Skills 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 llama-farm/llamafarm --skill typescript-skills -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/typescript-skills, .gemini/skills/typescript-skills, .github/skills/typescript-skills and .opencode/skills/typescript-skills in your project.

What does Typescript Skills need to run?

SKILL.md names no scripts, command-line tools or credentials: Typescript Skills is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Grep, Glob.

Does Typescript Skills 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 Typescript Skills 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 Typescript Skills use?

Typescript Skills is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Typescript Skills use?

About 696 tokens (SKILL.md is roughly 2.8k 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 Typescript Skills?

Skills that share tags, products or a category with Typescript Skills: Stitch to React and Vite Dashboard (google-labs-code/stitch-skills, 8.5k stars), Shadmin Dev (ahaodev/shadmin, 174 stars), Design To Code (MigoXLab/coderio, 114 stars) and Local Testing (lobehub/lobe-ui, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Typescript Skills?

llama-farm (a GitHub organization) maintains it in llama-farm/llamafarm, which has 836 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on June 10, 2026.

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