Agent skill

Patchies Frontend

A skill your agent uses when editing Patchies Svelte components, UI state, styling, buttons, persistence, or frontend implementation patterns.

AGPL-3.0Auto-check passedFrontend & Design

Install Patchies Frontend

skills CLI

$ npx skills add heypoom/patchies --skill patchies-frontend -a claude-code

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

GitHub CLI

$ gh skill install heypoom/patchies patchies-frontend --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/heypoom/patchies.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/patchies-frontend .claude/skills/patchies-frontend && 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/

Paste into Claude Code

Install the "patchies-frontend" agent skill from https://github.com/heypoom/patchies/tree/main/.agents/skills/patchies-frontend into .claude/skills/patchies-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "patchies-frontend", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/heypoom/patchies/tree/main/.agents/skills/patchies-frontend

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add heypoom/patchies --skill patchies-frontend -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install heypoom/patchies patchies-frontend --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heypoom/patchies.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/patchies-frontend .agents/skills/patchies-frontend && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "patchies-frontend" agent skill from https://github.com/heypoom/patchies/tree/main/.agents/skills/patchies-frontend into .agents/skills/patchies-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "patchies-frontend", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add heypoom/patchies --skill patchies-frontend -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install heypoom/patchies patchies-frontend --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heypoom/patchies.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/patchies-frontend .cursor/skills/patchies-frontend && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "patchies-frontend" agent skill from https://github.com/heypoom/patchies/tree/main/.agents/skills/patchies-frontend into .cursor/skills/patchies-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "patchies-frontend", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/heypoom/patchies.git --path .agents/skills/patchies-frontend

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add heypoom/patchies --skill patchies-frontend -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install heypoom/patchies patchies-frontend --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heypoom/patchies.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/patchies-frontend .gemini/skills/patchies-frontend && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "patchies-frontend" agent skill from https://github.com/heypoom/patchies/tree/main/.agents/skills/patchies-frontend into .gemini/skills/patchies-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "patchies-frontend", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install heypoom/patchies patchies-frontend

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add heypoom/patchies --skill patchies-frontend -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/heypoom/patchies.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/patchies-frontend .github/skills/patchies-frontend && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "patchies-frontend" agent skill from https://github.com/heypoom/patchies/tree/main/.agents/skills/patchies-frontend into .github/skills/patchies-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "patchies-frontend", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add heypoom/patchies --skill patchies-frontend -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install heypoom/patchies patchies-frontend --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heypoom/patchies.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/patchies-frontend .opencode/skills/patchies-frontend && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "patchies-frontend" agent skill from https://github.com/heypoom/patchies/tree/main/.agents/skills/patchies-frontend into .opencode/skills/patchies-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "patchies-frontend", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: patchies-frontend
GitHub stars: 209
Token cost: ~992 tokens
SKILL.md length: 474 words
Files: 1
Skills in repo: 8
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: AGPL-3.0

At a glance

A skill your agent uses when editing Patchies Svelte components, UI state, styling, buttons, persistence, or frontend implementation patterns.

Editing Patchies Svelte components
SKILL.md covers Code Patterns, Component Size and Svelte…, ts-pattern and Persistence, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Frontend implementation patterns

What it does

Patchies Frontend is an agent skill from heypoom/patchies. Use when editing Patchies Svelte components, UI state, styling, buttons, persistence, or frontend implementation patterns.

Its SKILL.md is about 990 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. It works with Svelte and TypeScript. The repository describes itself as: Write small programs with tools & libraries you know and patch 'em together. Make interactive widgets, visuals, sounds, and play with computation on the web. The licence is AGPL-3.0.

When your agent uses it

Editing Patchies Svelte components
Frontend implementation patterns

Example prompts

“/patchies-frontend”

What it can do on your machine

Read from SKILL.md and the folder at commit 0924723. 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
No scripts in the folder and no shell commands in SKILL.md (its code samples are svelte).
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

Patchies Frontend loads about 992 tokens when it runs. Until then it costs about 35 tokens; SKILL.md has 474 words of instructions outside code blocks.

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

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 heypoom/patchies at commit 0924723, republished under its AGPL-3.0 licence (© heypoom). 474 words, ~992 tokens.

Download SKILL.mdSave it as .claude/skills/patchies-frontend/SKILL.md (or your agent's skills folder).

name: patchies-frontend
description: Use when editing Patchies Svelte components, UI state, styling, buttons, persistence, or frontend implementation patterns.

Patchies Frontend

Code Patterns

Use TypeScript for all code.
Use Svelte 5 runes: $state, $props, $effect, $derived.
Use event attributes such as onclick, not on:click.
Separate UI from business logic with manager/system objects when behavior is non-trivial.
Prefer shared named functions when the same logic appears in multiple places, such as a message handler and context menu item.
Prefer existing files and local patterns over new abstractions.
Use if branches with early returns for multi-way decisions. Keep ternaries to simple two-way expressions; avoid nested ternaries. In Svelte derived state, use $derived.by(() => { ... }) with if/return branches for these decisions, including icon, label, and class selection.

Component Size and Svelte Composables

Aim for at most 500 lines per .svelte component. Check the full file's line count before extending it.
When a component already exceeds 500 lines, aggressively extract state, derived values, effects, and event-handling logic into focused use*.svelte.ts composables. Put new behavior in composables and keep component changes to minimal wiring; do not grow the component further. Extract existing logic as needed so the component's final line count does not increase.
If a change would push a component above 500 lines, extract logic as part of that change instead of crossing the threshold.
Keep each composable focused on one responsibility, colocated with its owning object or feature. Accept reactive getters and callbacks, expose a small interface, and preserve lifecycle cleanup. Keep pure decision logic in ordinary TypeScript helpers when it needs no Svelte reactivity.
Extract cohesive markup into child components when markup drives the file size. Keep the parent focused on rendering and composing behavior; preserve readable formatting rather than compressing lines to meet the limit.

Show full SKILL.md (201 more words)Show less

`ts-pattern`

Use ts-pattern when it improves clarity:

Exhaustive branching on discriminated unions, enums, or mode/state values.
Matching data shapes where destructuring in branches is useful.
Replacing switch statements that duplicate fallthrough/default logic.

Avoid ts-pattern when direct control flow is clearer:

Simple null checks.
Early returns in effects, event handlers, setup, or cleanup.
Hot paths such as render loops, audio processing, worker messages, pointer handlers, or animation handlers.
Sequential guards with side effects.

Persistence

Never put localStorage keys or persistence logic directly in components.

Create a dedicated store in src/stores/; use preset-library.store.ts or help-view.store.ts as patterns.

Styling

Prefer Tailwind utilities for DOM the component owns directly.
Use small scoped <style> blocks when styling generated or third-party DOM, CodeMirror .cm-*, canvas/library internals, long descendant selectors, or local library overrides.
Keep local CSS minimal and scoped. Avoid broad globals and !important unless a library override requires it.
Do not remove focus indicators without replacing them with an accessible visible focus style.
Use the Zinc dark theme.
Support a class prop for component extension when appropriate.
Use @lucide/svelte for icons.

Buttons

All buttons must include cursor-pointer. Buttons with a disabled state must include disabled:cursor-not-allowed.

Where possible, use shadcn-svelte Tooltip and not the native title attribute:

svelte

<Tooltip.Root>
  <Tooltip.Trigger>
    <button class="cursor-pointer disabled:cursor-not-allowed ..." disabled={!canSave} onclick={handleSave}>
      <Save class="h-4 w-4" />
    </button>
  </Tooltip.Trigger>
  
  <Tooltip.Content>
    Save Changes
  </Tooltip.Content>
</Tooltip.Root>

Files

Just SKILL.md in .agents/skills/patchies-frontend of heypoom/patchies.

Open the folder on GitHubat commit 0924723

Compare with similar skills

Patchies Frontend 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.

Patchies Frontend compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Patchies Frontend this skillheypoom/patchies	209	—	~992	Automated safety check: Pass	AGPL-3.0	today
Motion Dev Animations199-biotechnologies/motion-dev-animations-skill	105	1 repos	~2.8k	Automated safety check: Notes	MIT	6 mo ago
Worklog Designregisx001/Worklog	261	—	~3.3k	Automated safety check: Pass	MIT	1 mo ago
Frontend Guidelightly-ai/lightly-studio	896	—	~2.9k	Automated safety check: Pass	Apache-2.0	today
Component ForgeEliasOulkadi/shokunin	114	—	~3.6k	Automated safety check: Notes	MIT	3 days ago
Pre Commit CheckMooshieblob1/MooshieUI	207	—	~825	Automated safety check: Pass	AGPL-3.0	today

Similar skills

Motion Dev Animations
199-biotechnologies/motion-dev-animations-skill
Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.
105 GitHub starsUsed in 1 repo~2.8k tokens
Frontend & DesignAuto-check: notes
Worklog Design
regisx001/Worklog
Design and UI skill for the Worklog desktop project manager.
261 GitHub stars~3.3k tokensUpdated 1 mo ago
Frontend & DesignAuto-check passed
Frontend Guide
lightly-ai/lightly-studio
Read before writing or reviewing any frontend code in lightlystudioview - Svelte, TypeScript, or SvelteKit files.
896 GitHub stars~2.9k tokensUpdated today
Frontend & DesignAuto-check passed
Component Forge
EliasOulkadi/shokunin
Build production-grade components for React, Vue 3, and Svelte 5 with all states (loading, empty, error, success, idle), TypeScript strict, WCAG 2.2 accessibility, server components (RSC), and…
114 GitHub stars~3.6k tokensUpdated 3 days ago
Frontend & DesignAuto-check: notes
Pre Commit Check
Mooshieblob1/MooshieUI
Validates MooshieUI uncommitted changes before commit or PR — build gates, Rust fmt/clippy, conventions, i18n.
207 GitHub stars~825 tokensUpdated today
Frontend & DesignAuto-check passed
Olore Xstate Latest
olorehq/olore
Local XState documentation reference (latest). An agent skill from olorehq/olore.
104 GitHub stars~989 tokensUpdated today
Frontend & DesignAuto-check passed

Questions about Patchies Frontend

What does Patchies Frontend do?

A skill your agent uses when editing Patchies Svelte components, UI state, styling, buttons, persistence, or frontend implementation patterns. Patchies Frontend is an agent skill from heypoom/patchies. Use when editing Patchies Svelte components, UI state, styling, buttons, persistence, or frontend implementation patterns.

When should I use Patchies Frontend?

Patchies Frontend fits situations like: editing Patchies Svelte components; frontend implementation patterns.

How do I install Patchies Frontend in Claude Code?

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

How do I install Patchies Frontend in Codex?

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

Can I use Patchies Frontend 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 heypoom/patchies --skill patchies-frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/patchies-frontend, .gemini/skills/patchies-frontend, .github/skills/patchies-frontend and .opencode/skills/patchies-frontend in your project.

What does Patchies Frontend need to run?

SKILL.md names no scripts, command-line tools or credentials: Patchies Frontend is instructions for the agent only.

Does Patchies Frontend 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 Patchies Frontend 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 Patchies Frontend use?

Patchies Frontend 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 Patchies Frontend use?

About 992 tokens (SKILL.md is roughly 4k 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 Patchies Frontend?

Skills that share tags, products or a category with Patchies Frontend: Motion Dev Animations (199-biotechnologies/motion-dev-animations-skill, 105 stars), Worklog Design (regisx001/Worklog, 261 stars), Frontend Guide (lightly-ai/lightly-studio, 896 stars) and Component Forge (EliasOulkadi/shokunin, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Patchies Frontend?

heypoom (a GitHub user) maintains it in heypoom/patchies, which has 209 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 7, 2026.

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

Patchies Frontend

Install Patchies Frontend

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Patchies Frontend

Code Patterns

Component Size and Svelte Composables

`ts-pattern`

Persistence

Styling

Buttons

Files

Compare with similar skills

Similar skills

Motion Dev Animations

Worklog Design

Frontend Guide

Component Forge

Pre Commit Check

Olore Xstate Latest

More from heypoom/patchies

Patchies Audio

Patchies Objects

Patchies Workflow

Patchies Assembly Module

Docs Style

Patchies Rendering

Questions about Patchies Frontend

Install Patchies Frontend

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Patchies Frontend

Code Patterns

Component Size and Svelte Composables

ts-pattern

Persistence

Styling

Buttons

Files

Compare with similar skills

Similar skills

More from heypoom/patchies

Related

Questions about Patchies Frontend

`ts-pattern`