typescript-skills
Shared TypeScript best practices for Designer and Electron subsystems.
- Installs
- 81
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/llama-farm/llamafarm --skill typescript-skills- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads typescript-skills automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
| Subsystem | Framework | Build | Key Libraries |
|---|---|---|---|
| designer | React 18 | Vite | TanStack Query, Radix UI, axios, react-router-dom |
| electron-app | Electron 28 | electron-vite | electron-updater, axios |
Configuration
Both projects use strict TypeScript:
{
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
}
Core Principles
- Strict mode always - Never use
anywithout explicit justification - Prefer interfaces - Use
interfacefor object shapes,typefor unions/intersections - Explicit return types - Always type public function returns
- Immutability - Use
readonlyandas constwhere applicable - Null safety - Handle null/undefined explicitly, avoid non-null assertions
Related Documents
- patterns.md - Idiomatic TypeScript patterns
- typing.md - Strict typing, generics, utility types
- testing.md - Vitest and testing patterns
- security.md - XSS prevention, input validation
Quick Reference
React Component Pattern
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
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
export class ApiError extends Error {
constructor(
message: string,
public readonly status: number,
public readonly response?: unknown
) {
super(message)
this.name = 'ApiError'
}
}
Checklist Summary
| Category | Critical | High | Medium | Low |
|---|---|---|---|---|
| Typing | 3 | 4 | 2 | 1 |
| Patterns | 2 | 3 | 3 | 2 |
| Testing | 2 | 3 | 2 | 1 |
| Security | 4 | 2 | 1 | 0 |
FAQ
What does the typescript-skills skill do?
Shared TypeScript best practices for Designer and Electron subsystems.
How do I install typescript-skills?
Run npx skills add https://github.com/llama-farm/llamafarm --skill typescript-skills in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/typescript-skills/ (personal) or .claude/skills/typescript-skills/ (project).
Which AI agents can use typescript-skills?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is typescript-skills safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains typescript-skills?
It is published by llama-farm in llama-farm/llamafarm. It has 81 recorded installs.
More from llama-farm/llamafarm
code-review
llama-farm/llamafarm
Comprehensive code review for diffs. Analyzes changed code for security vulnerabilities, anti-patterns, and quality issues. Auto-detects domain (frontend/backend) from file paths.
commit-push-pr
llama-farm/llamafarm
Open the skill to read its SKILL.md instructions.
react-skills
llama-farm/llamafarm
React 18 patterns for LlamaFarm Designer. Covers components, hooks, TanStack Query, and testing.
rag-skills
llama-farm/llamafarm
Open the skill to read its SKILL.md instructions.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.