arch-vscode

Name: arch-vscode
Author: hairyf

github.com/hairyfDevelopment26103 installsUpdated 2w ago

About arch-vscode

arch-vscode is a skill for setting up VSCode extension projects from a starter based on antfu/starter-vscode. It documents an opinionated workflow using reactive-vscode, tsdown, and vscode-ext-gen, from extension entry and debugging through packaging and publishing.

Key features

01Sets up a VSCode extension starter
02Uses reactive-vscode composables
03Builds a single CJS bundle with tsdown
04Generates typed contributes metadata
05Covers debugging, packaging, and publishing

Use cases

01Starting a VSCode extension project
02Configuring extension entry and contributes
03Debugging in the Extension Host
04Preparing an extension for packaging or publishing

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/hairyf/skills --skill arch-vscode

After installing, type/arch-vscodein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

GENERATION.md

assets/

ci.yml

references/

best-practices-vscode-ext.md

core-ci.md

core-config.md

core-contributes.md

core-development.md

core-extension-entry.md

core-logging.md

core-overview.md

core-scripts.md

core-tsdown-build.md

Details

From the project README

arch-vscode is a VSCode extension starter (based on antfu/starter-vscode) that uses reactive-vscode for reactive APIs and composables, tsdown for a single CJS bundle, and vscode-ext-gen for type-safe contributes metadata. It provides a minimal, opinionated setup: defineExtension entry, defineConfig/defineLogger, Extension Host debugging, and vsce/vsxpub for packaging and publishing.

The skill is based on starter-vscode (arch-vscode source), generated at 2026-01-30.

Recommended practices:

Keep contributes and generated meta in sync via pnpm update (or Run on Save)
Use reactive-vscode composables for state and disposables; use CJS build with external vscode
Prefer onCommand activation when possible

Core References

Topic	Description	Reference
Overview	Project purpose, structure, when to use	core-overview
Extension Entry	defineExtension, activate, deactivate	core-extension-entry
Config	defineConfig, generated scoped config	core-config
Logging	defineLogger, displayName	core-logging
tsdown Build	CJS, external vscode, build:prepare hook	core-tsdown-build
Scripts	build, dev, update, release, ext:package, ext:publish	core-scripts
Contributes	commands, configuration, activationEvents	core-contributes
Development	launch.json, tasks.json, Extension Host	core-development
CI	GitHub Actions workflow — lint, typecheck, build, test	core-ci

Best Practices

Topic	Description	Reference
VSCode Extension	entry, contributes, meta, activation, publish	best-practices-vscode-ext

Comments

Markdown supported

Details

Author: hairyf
Repository: hairyf/skills
Category: Development
Installs: 103
GitHub stars: 26

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.