TeensyROM-Web

Visual UI verification workflow using Chrome DevTools MCP. Use when validating component rendering, CSS/styling changes, layout regressions, interactive UI behavior, screenshots, and post-change visual checks. Use this skill when the user is having trouble with styling or UI work or is trying to change the visual appearance of the app.

Create new Agent Skills for GitHub Copilot from prompts or by duplicating this template. Use when asked to "create a skill", "make a new skill", "scaffold a skill", or when building specialized AI capabilities with bundled resources. Generates SKILL.md files with proper frontmatter, directory structure, and optional scripts/references/assets folders.

TeensyROM .NET backend domain knowledge — architecture, MediatR CQRS, serial protocol, storage systems, RadEndpoints, and testing patterns. Use when working on backend code, adding endpoints, modifying serial commands, updating storage/caching logic, writing backend tests, or understanding backend architecture. Covers .NET 9 API, pipeline behaviors, state machines, and multi-device orchestration.

TeensyROM Angular 19 frontend domain knowledge — Clean Architecture, Nx monorepo, NgRx Signal Store, component patterns, testing standards, and coding conventions. Use when working on Angular components, stores, services, infrastructure, features, UI components, writing frontend tests, or understanding frontend architecture. Covers dependency injection, layer boundaries, ESLint enforcement, and modern Angular patterns.

Create custom GitHub Copilot agents (.agent.md files) with interactive configuration. Use when asked to "create an agent", "make an agent", "new agent", "scaffold an agent", "build a custom agent", or when building specialized AI personas for VS Code. Guides users through every frontmatter option with ask_questions tool, then generates a complete .agent.md file.

Executes a pre-planned subagent orchestration project by handing off tasks to specialized worker agents, monitoring reports, and adapting the plan. Use when asked to "execute a plan", "run subagents", "start execution", "hand off tasks", or when given a project name to execute against an existing docs/projects/<PROJECT-NAME>/ plan folder.

Creates a comprehensive master plan and task decomposition for complex features using the subagent orchestration system. Use when asked to "plan a feature", "create a project plan", "break down a feature", "scaffold tasks", "orchestrate subagents", or any request to plan multi-phase work before execution. Generates master plan, phase documents, and task handoff files in docs/projects/<PROJECT-NAME>/.

API client generation and architecture for TeensyROM. Use when asked to regenerate the API client, update TypeScript HTTP clients, work with OpenAPI specs, understand API client architecture, or fix API-related import/type issues. Covers build-time client generation workflow, infrastructure layer consumption rules, and *ApiService naming conventions.

Angular application bootstrap and startup initialization pattern for TeensyROM (AppBootstrapService, APP_INITIALIZER). Use when adding a new feature to the app startup/initialization sequence, implementing effect-based waiting for store/signal readiness, deciding between critical vs non-critical bootstrap error handling, wiring APP_INITIALIZER, or writing unit tests for bootstrap services.

High-level architecture and context reference for the TeensyROM Nx monorepo. Use when onboarding to the codebase, understanding the overall tech stack (Angular 19, Nx, .NET 9, RadEndpoints, MediatR, NgRx Signal Store), understanding Clean Architecture layers (domain/application/infrastructure/presentation) and their dependency rules, exploring the workspace file/library tree, or answering general "how is this repo organized" questions. Covers Angular dev patterns and standards per layer, DI patterns, testing standards summary, and code organization conventions.

Backend architecture reference for the TeensyROM .NET 9 Web API. Use when working on the backend/API, understanding RadEndpoints structure, MediatR CQRS pipeline behaviors, serial device communication protocol, storage/caching (indexing, favorites, StorageCache), device connection management, or backend operational concerns (configuration, error handling, retries, observability, logging). Covers Clean Architecture layering, key components, endpoint patterns, MediatR flow diagrams, dependency map, and architecture patterns/anti-patterns to follow or avoid.

Catalog of shared Angular UI components for TeensyROM (cards, animated containers, feedback, forms, links, modals, menus, lists, icons, video/CRT, display, navigation, utilities). Use when asked to add a new shared UI component, use or compose existing components like CardLayoutComponent, ScalingCardComponent, IconButtonComponent, IconLabelComponent, StyledIconComponent, StorageItemComponent, DropdownMenuComponent, InputFieldComponent, ExternalLinkComponent, ActionLinkComponent, or understand component architecture, animation chaining, glassy effects, or import patterns from `@teensyrom-nx/ui/components`.

CRT (cathode ray tube) emulation and WebGL post-processing effects system for TeensyROM. Use when working with CrtEffectWrapperComponent, CrtSettingsPanelComponent, VideoStreamComponent, or other video/overlay components; when reading or editing CrtSettings/CrtSettingsConfig, CRT_PRESETS, or CSS custom properties; or when adding a brand-new WebGL shader effect (scanlines, vignette, barrel distortion, bloom, chromatic aberration, screen curvature, phosphor patterns, color filters) across the domain model, GLSL fragment shader, CrtRenderer uniforms, and settings-panel UI layers.

Open the Device view in the browser

Distribution and release pipeline reference for TeensyROM Web. Use for questions about the build/release architecture (single-executable design, build pipeline stages), the automated GitHub Actions release workflow and its troubleshooting, Homebrew formula structure and distribution, artifact sizes/contents, code signing and other security considerations, or the distribution FAQ. NOT for actually running a release or local test build — use the `release` or `release-local` skills for that.

Three-layer Angular reactive form architecture for TeensyROM: Smart Container (owns FormGroup, store integration, submission) -> Section Components (presentational, receive FormGroup via input()) -> Field Components (ControlValueAccessor, reusable controls). Use when building or reviewing Angular reactive forms, decomposing a complex form into container/section/field components, implementing form validation display, wiring form state to a store with debounced auto-save, or passing FormGroup/FormControl between parent and child form components.

Emoji-enhanced logging helpers for TeensyROM (logInfo/logError/logWarn with LogType from @teensyrom-nx/utils). Use when adding logging to a service or store, following the Start/NetworkRequest/Success/Finish operation lifecycle, or logging errors/warnings/cache-hit info consistently across domains.

Angular Router navigation and routing standards for TeensyROM (centralized NAV_ITEMS/ROUTES config, NavigationService, route resolvers). Use when adding a new navigation menu item or route, wiring lazy-loaded feature routes, deciding whether a route needs a resolver, working with NavigationService, or writing navigation E2E tests.

Nx library lifecycle standards for the teensyrom-nx workspace: creating new libraries (domain/feature/UI/data-access) with correct project.json, ESLint scope/type tags, Clean Architecture dependency constraints, and naming conventions; plus the checklist for safely moving, renaming, or changing the path alias of an existing library. Use when generating a new Nx library, choosing library type/location/tags, configuring project.json or vite.config, or when moving/renaming a library and needing to update tsconfig paths, imports, and implicit dependencies consistently.

Open the Player view in the browser

Create a local test release of TeensyROM Web for quick validation before official release

Execute Cypress E2E tests with detailed JSON reporting and analysis

Run all unit and integration tests and generate a comprehensive baseline report

Domain service exposure pattern for TeensyROM: interface + InjectionToken + useExisting provider for testable, swappable DI. Use when creating a new domain service, wiring a service provider into the app shell, injecting a service into a signal store, or mocking a service token in unit tests.

End-to-end Settings feature data flow for TeensyROM: .NET backend persistence (Settings.json) through Clean Architecture layers (domain contract, infrastructure, NgRx Signal Store, feature UI) to the Angular settings view, plus a settings-usage audit (actively used vs infrastructure-ready vs not implemented). Use when tracing how a setting flows from disk to UI, adding a new settings category, wiring a setting into business logic, or checking whether a given setting is actually consumed anywhere.

Open the Settings view in the browser

NgRx Signal Store standards for TeensyROM state management. Use when writing or reviewing signal store code, actions, selectors, or state mutations - covers the mandatory updateState() + actionMessage pattern (never patchState), selectors-vs-actions folder separation, withDevtools/Redux DevTools correlation, async/await store method patterns, error handling, logging, common anti-patterns, and store testing considerations.

Global styles, design tokens, and Material Design customizations for TeensyROM, defined in `libs/ui/styles/src/lib/theme/styles.scss`. Use when asked to style a component, add new global CSS/SCSS, create utility classes or mixins, work with design tokens (spacing, typography, border-radius), responsive breakpoints (`screen-tablet`, `below-desktop`, `_mixins.scss`), glassy/glassmorphism effects, Material component overrides (cards, dialogs, buttons, toolbars), color schemes/themes (light/dark mode, `--color-*` variables), or CRT effect CSS variables.

Testing philosophy and standards for the teensyrom-nx Angular workspace, covering Clean Architecture layers (domain, infrastructure, application, features, UI, utils), mock contract standards (Partial<IContract> via injection tokens), test description naming, and test commands. Use when writing or reviewing unit/integration tests, deciding what to mock versus test for a given layer, designing behavioral tests for an NgRx Signal Store, facade, or context service in the application layer, testing an Angular smart/feature component in libs/features, or establishing testing conventions before implementing a new service, store, or component.

Angular component and TypeScript coding conventions for TeensyROM. Use when creating or reviewing an Angular component, deciding between input()/output() signals vs legacy @Input()/@Output(), ordering component class members, writing template control-flow (@if/@for/@switch), naming components/files/properties, adding JSDoc documentation, avoiding ::ng-deep or magic strings, or running through the new-component checklist.

Browser navigator.mediaDevices APIs for enumerating and inspecting USB video capture devices (enumerateDevices, getUserMedia, getSettings, getCapabilities, applyConstraints). Use when working with video-capture components, listing available cameras, reading/applying video track resolution or frame-rate constraints, handling USB device permission/hotplug behavior, or checking browser compatibility for MediaStream/MediaDevices APIs.