@skilly-hand/skilly-hand 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -16,6 +16,21 @@ All notable changes to this project are documented in this file.
 ### Removed
 - _None._
 
+## [0.6.0] - 2026-04-03
+[View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.6.0)
+
+### Added
+- Added portable skill `angular-guidelines` for Angular-only generation/review workflows, including mandatory latest-stable preflight checks and modern Angular best-practice defaults.
+
+### Changed
+- _None._
+
+### Fixed
+- _None._
+
+### Removed
+- _None._
+
 ## [0.5.0] - 2026-04-03
 [View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.5.0)
 

package/README.md

@@ -66,6 +66,7 @@ npx skilly-hand
 The catalog currently includes:
 
 - `agents-root-orchestrator`
+- `angular-guidelines`
 - `figma-mcp-0to1`
 - `skill-creator`
 - `spec-driven-development`

package/catalog/README.md

@@ -5,6 +5,7 @@ Published portable skills consumed by the `skilly-hand` CLI.
 | Skill | Description | Tags | Installs For |
 | ----- | ----------- | ---- | ------------ |
 | `agents-root-orchestrator` | Author root AGENTS.md as a Where/What/When orchestrator that routes tasks and skill invocation clearly. | core, workflow, orchestration | all |
+| `angular-guidelines` | Guide Angular code generation and review using latest stable Angular verification and modern framework best practices. | angular, frontend, workflow, best-practices | all |
 | `figma-mcp-0to1` | Guide users from Figma MCP installation and authentication through first canvas creation, with function-level tool coverage and operational recovery patterns. | figma, mcp, workflow, design | all |
 | `skill-creator` | Create and standardize AI skills with reusable structure, metadata rules, and templates. | core, workflow, authoring | all |
 | `spec-driven-development` | Plan, execute, and verify multi-step work through versioned specs with small, testable tasks. | core, workflow, planning | all |

package/catalog/catalog-index.json

@@ -1,5 +1,6 @@
 [
   "agents-root-orchestrator",
+  "angular-guidelines",
   "figma-mcp-0to1",
   "skill-creator",
   "spec-driven-development",

package/catalog/skills/angular-guidelines/SKILL.md

@@ -0,0 +1,176 @@
+# Angular Guidelines
+
+## When to Use
+
+Use this skill when:
+
+- You are generating Angular components, directives, pipes, services, or supporting files.
+- You are refactoring existing Angular code to current framework patterns.
+- You are reviewing Angular code quality and framework-alignment in an Angular workspace.
+
+Do not use this skill for:
+
+- Non-Angular frontend stacks (React, Vue, Svelte, or framework-agnostic UI tasks).
+- Deep architecture decisions outside code artifact generation/review scope.
+- Pure test-strategy design unrelated to Angular implementation details.
+
+---
+
+## Routing Map
+
+Choose sub-agents by intent:
+
+| Intent | Sub-agent |
+| --- | --- |
+| Create, refactor, or review Angular components | [agents/component-creator.md](agents/component-creator.md) |
+| Write or review Angular tests | [agents/angular-tester.md](agents/angular-tester.md) |
+
+---
+
+## Standard Execution Sequence
+
+1. Run latest stable Angular preflight checks.
+2. Route to the smallest matching sub-agent by task intent.
+3. Apply the sub-agent checklist before finalizing generated code or review output.
+
+---
+
+## Critical Patterns
+
+### Pattern 1: Latest Stable Angular Preflight (Mandatory)
+
+Before generating or changing Angular code:
+
+1. Check the latest stable Angular core release:
+   `npm view @angular/core version`
+2. Check the project's installed or declared Angular version:
+   `npm ls @angular/core` or inspect `package.json`.
+3. If versions diverge, generate content for the latest stable APIs and call out upgrade steps.
+4. If npm metadata is unavailable, verify against official Angular release sources before proceeding.
+
+Never hardcode a specific Angular major as the default baseline.
+
+### Pattern 2: Modern Angular Defaults for New Code
+
+Use these defaults unless project constraints explicitly prevent them:
+
+| Area | Default |
+| --- | --- |
+| Component model | Standalone-first (`standalone: true`) |
+| State + bindings | Signals (`signal`, `computed`, `input`, `output`) |
+| Template flow | `@if`, `@for`, `@switch` control flow blocks |
+| Dependency injection | `inject()` over constructor injection for new code |
+| Forms | Typed reactive forms |
+| Rendering strategy | OnPush-friendly patterns and deferred/lazy rendering where appropriate |
+
+### Pattern 3: Generation and Review Guardrails
+
+- Keep generated files focused and minimal for the requested artifact.
+- Prefer framework-native patterns over custom abstractions unless required by repo conventions.
+- Call out deprecated patterns in reviewed code and suggest modern Angular replacements.
+- For component-specific work, apply [agents/component-creator.md](agents/component-creator.md).
+- For testing-specific work, apply [agents/angular-tester.md](agents/angular-tester.md).
+
+---
+
+## Decision Tree
+
+```text
+Is this an Angular project (angular.json or @angular/core present)?
+  NO  -> Do not apply this skill
+  YES -> Continue
+
+Is this a create/generate task?
+  YES -> Run latest stable preflight, then generate with modern defaults
+  NO  -> Continue
+
+Is this a refactor task?
+  YES -> Preserve behavior, migrate incrementally to modern Angular patterns
+  NO  -> Continue
+
+Is this a review task?
+  YES -> Validate latest-stable alignment + best-practice checklist
+  NO  -> Apply the minimal Angular guidance needed for the request
+```
+
+---
+
+## Code Examples
+
+### Example 1: Standalone + Signals Component
+
+```typescript
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+
+@Component({
+  selector: "app-badge",
+  standalone: true,
+  template: `
+    <span [attr.data-tone]="tone()">{{ label() }}</span>
+    @if (showCount()) {
+      <small>{{ count() }}</small>
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BadgeComponent {
+  readonly label = input.required<string>();
+  readonly count = input(0);
+  readonly increment = output<void>();
+  readonly showCount = computed(() => this.count() > 0);
+}
+```
+
+### Example 2: Service with `inject()`
+
+```typescript
+import { Injectable, inject } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+
+@Injectable({ providedIn: "root" })
+export class ProfileService {
+  private readonly http = inject(HttpClient);
+
+  getProfile() {
+    return this.http.get("/api/profile");
+  }
+}
+```
+
+---
+
+## Review Checklist
+
+- Latest stable Angular preflight was completed before code generation/refactor.
+- New artifacts use standalone-first + signal-first patterns where applicable.
+- Template control flow uses modern block syntax.
+- DI and forms follow modern typed Angular practices.
+- Output avoids deprecated Angular APIs unless needed for compatibility.
+
+---
+
+## Commands
+
+```bash
+# Latest stable Angular version
+npm view @angular/core version
+
+# Workspace Angular version
+npm ls @angular/core
+
+# Create a standalone component
+ng generate component <name> --standalone
+
+# Apply Angular framework updates in a workspace
+ng update @angular/core @angular/cli
+```
+
+---
+
+## Resources
+
+- Angular docs: https://angular.dev
+- Angular API reference: https://angular.dev/api
+- Angular update guide: https://angular.dev/update-guide
+- Angular blog (official releases): https://blog.angular.dev
+- Angular GitHub releases: https://github.com/angular/angular/releases

package/catalog/skills/angular-guidelines/agents/angular-tester.md

@@ -0,0 +1,130 @@
+# Angular Tester
+
+## When to Use
+
+Use this sub-agent when:
+
+- Adding or updating Angular component/service tests.
+- Reviewing Angular tests for correctness and modern framework usage.
+- Choosing test patterns for async, signal-based, or HTTP-driven behaviors.
+
+Do not use this sub-agent for:
+
+- Component implementation guidance without tests (use `component-creator`).
+- Framework-agnostic testing standards not tied to Angular behavior.
+
+---
+
+## Runner Policy
+
+- Default: Vitest-first in Angular workspaces.
+- Fallback: Use Jasmine/Karma patterns only when the workspace is already configured for Jasmine.
+- Do not force runner migration inside unrelated feature tasks.
+
+---
+
+## Core Testing Patterns
+
+- Configure `TestBed` with standalone imports for component tests.
+- Test signal and computed behavior directly when possible.
+- Test signal inputs/outputs using component instance APIs and DOM-triggered events.
+- Cover async behavior with `fakeAsync`/`tick`/`flush` or `waitForAsync`/`whenStable`.
+- For HTTP paths, use `HttpClientTestingModule`/`HttpTestingController` and verify requests.
+- For services, prefer explicit DI setup and clear mocking boundaries.
+
+---
+
+## Command Matrix
+
+| Scenario | Preferred Command | Fallback |
+| --- | --- | --- |
+| Run all unit tests | `ng test` | Existing workspace test command |
+| Watch mode | `ng test --watch` | Workspace equivalent |
+| Coverage | `ng test --code-coverage` | Workspace equivalent |
+| CI-style single run | `ng test --watch=false` | Workspace equivalent |
+
+If the workspace uses Jasmine/Karma, keep command behavior aligned with existing runner configuration.
+
+---
+
+## Decision Tree
+
+```text
+Is the target under test a standalone component?
+  YES -> Use TestBed with imports: [ComponentUnderTest]
+  NO  -> Continue
+
+Is this primarily service logic?
+  YES -> Configure TestBed providers/injection and mock dependencies
+  NO  -> Continue
+
+Is behavior async (timers, promises, stabilization)?
+  YES -> Use fakeAsync/tick or waitForAsync/whenStable
+  NO  -> Continue
+
+Does behavior involve HTTP or resource loading?
+  YES -> Use HttpTestingController and assert request + response flow
+  NO  -> Use direct synchronous assertions
+```
+
+---
+
+## Test Snippets
+
+### Standalone Component Test
+
+```typescript
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { describe, expect, it, beforeEach } from "vitest";
+import { CounterComponent } from "./counter.component";
+
+describe("CounterComponent", () => {
+  let fixture: ComponentFixture<CounterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CounterComponent]
+    }).compileComponents();
+    fixture = TestBed.createComponent(CounterComponent);
+    fixture.detectChanges();
+  });
+
+  it("renders default count", () => {
+    expect(fixture.componentInstance.count()).toBe(0);
+  });
+});
+```
+
+### HTTP Service Test
+
+```typescript
+import { TestBed } from "@angular/core/testing";
+import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
+
+describe("ProfileService", () => {
+  it("requests profile", () => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule]
+    });
+    const service = TestBed.inject(ProfileService);
+    const httpMock = TestBed.inject(HttpTestingController);
+
+    service.getProfile().subscribe();
+
+    const req = httpMock.expectOne("/api/profile");
+    expect(req.request.method).toBe("GET");
+    req.flush({ id: "1" });
+    httpMock.verify();
+  });
+});
+```
+
+---
+
+## Review Checklist
+
+- Tests follow the workspace runner policy (Vitest-first, Jasmine fallback only when preconfigured).
+- Standalone Angular artifacts are tested with appropriate TestBed setup.
+- Signal/input/output behavior is asserted explicitly.
+- Async and HTTP behavior use deterministic Angular testing utilities.
+- Assertions verify user-visible behavior or contract-level outcomes, not incidental internals.

package/catalog/skills/angular-guidelines/agents/component-creator.md

@@ -0,0 +1,124 @@
+# Angular Component Creator
+
+## When to Use
+
+Use this sub-agent when:
+
+- Creating a new Angular component.
+- Refactoring an existing Angular component to modern patterns.
+- Reviewing component implementation details and template patterns.
+
+Do not use this sub-agent for:
+
+- Directive, pipe, or service implementation.
+- Repository-wide architecture decisions.
+- Test-only tasks (use `angular-tester`).
+
+---
+
+## Core Rules
+
+- Keep explicit `standalone: true` in generated component metadata.
+- Use signal APIs for component IO and state (`input`, `output`, `signal`, `computed`).
+- Use native template control flow blocks (`@if`, `@for`, `@switch`).
+- Prefer `host` object bindings/events over decorator-based host metadata.
+- Use OnPush-friendly reactive patterns and avoid zone-dependent assumptions.
+- For interactive components, include keyboard and ARIA semantics in host bindings.
+
+---
+
+## Template Snippets
+
+### Minimal Standalone Component
+
+```typescript
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+
+@Component({
+  selector: "app-example",
+  standalone: true,
+  template: `<p>Example works</p>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ExampleComponent {}
+```
+
+### Signal Inputs and Outputs
+
+```typescript
+import { Component, input, output, computed } from "@angular/core";
+
+@Component({
+  selector: "app-counter",
+  standalone: true,
+  template: `<button (click)="increment.emit()">{{ label() }} {{ count() }}</button>`
+})
+export class CounterComponent {
+  readonly label = input.required<string>();
+  readonly count = input(0);
+  readonly increment = output<void>();
+  readonly isNonZero = computed(() => this.count() > 0);
+}
+```
+
+### Host Bindings and Events
+
+```typescript
+@Component({
+  selector: "button[appActionButton]",
+  standalone: true,
+  template: `<ng-content />`,
+  host: {
+    "role": "button",
+    "[attr.aria-disabled]": "disabled() ? 'true' : null",
+    "[class.is-disabled]": "disabled()",
+    "(click)": "onClick($event)",
+    "(keydown.enter)": "onClick($event)"
+  }
+})
+export class ActionButtonComponent {
+  readonly disabled = input(false);
+  readonly pressed = output<void>();
+
+  onClick(event: Event) {
+    if (this.disabled()) {
+      event.preventDefault();
+      return;
+    }
+    this.pressed.emit();
+  }
+}
+```
+
+### Content Projection and Render-Safe Hooks
+
+```typescript
+import { Component, afterNextRender } from "@angular/core";
+
+@Component({
+  selector: "app-card",
+  standalone: true,
+  template: `
+    <header><ng-content select="[card-header]" /></header>
+    <section><ng-content /></section>
+    <footer><ng-content select="[card-footer]" /></footer>
+  `
+})
+export class CardComponent {
+  constructor() {
+    afterNextRender(() => {
+      // Run post-render DOM logic only when needed.
+    });
+  }
+}
+```
+
+---
+
+## Review Checklist
+
+- Component metadata includes explicit `standalone: true`.
+- Inputs/outputs use modern signal-based APIs where applicable.
+- Templates use native control flow blocks, not legacy structural directives.
+- Host interaction includes required ARIA and keyboard semantics for interactive UI.
+- Change detection and state flow are OnPush-friendly and predictable.

package/catalog/skills/angular-guidelines/manifest.json

@@ -0,0 +1,41 @@
+{
+  "id": "angular-guidelines",
+  "title": "Angular Guidelines",
+  "description": "Guide Angular code generation and review using latest stable Angular verification and modern framework best practices.",
+  "portable": true,
+  "tags": ["angular", "frontend", "workflow", "best-practices"],
+  "detectors": ["angular"],
+  "detectionTriggers": ["auto"],
+  "installsFor": ["all"],
+  "agentSupport": ["codex", "claude", "cursor", "gemini", "copilot"],
+  "skillMetadata": {
+    "author": "skilly-hand",
+    "last-edit": "2026-04-03",
+    "license": "Apache-2.0",
+    "version": "1.1.1",
+    "changelog": "Added allowed-modes metadata to declare angular-guidelines sub-agent routing targets; improves discoverability of component-creator and angular-tester delegation modes; affects angular-guidelines manifest metadata",
+    "auto-invoke": "Generating, reviewing, or refactoring Angular code artifacts in Angular projects",
+    "allowed-modes": [
+      "component-creator",
+      "angular-tester"
+    ],
+    "allowed-tools": [
+      "Read",
+      "Edit",
+      "Write",
+      "Glob",
+      "Grep",
+      "Bash",
+      "WebFetch",
+      "WebSearch",
+      "Task",
+      "SubAgent"
+    ]
+  },
+  "files": [
+    { "path": "SKILL.md", "kind": "instruction" },
+    { "path": "agents/component-creator.md", "kind": "instruction" },
+    { "path": "agents/angular-tester.md", "kind": "instruction" }
+  ],
+  "dependencies": []
+}

package/catalog/skills/figma-mcp-0to1/manifest.json

@@ -12,9 +12,15 @@
     "author": "skilly-hand",
     "last-edit": "2026-04-03",
     "license": "Apache-2.0",
-    "version": "1.0.0",
-    "changelog": "Added a complete Figma MCP setup-to-canvas guide with orchestrator subskills and full official tool matrix coverage; reduces onboarding ambiguity and improves first-run success rates; affects Figma MCP setup, tool selection, and troubleshooting workflows",
+    "version": "1.0.1",
+    "changelog": "Added allowed-modes metadata to declare figma-mcp-0to1 sub-agent routing targets; improves discoverability of install-auth, tool-function-catalog, canvas-creation-playbook, and troubleshooting-ops delegation modes; affects figma-mcp-0to1 manifest metadata",
     "auto-invoke": "Installing, configuring, or using Figma MCP from setup through first canvas creation",
+    "allowed-modes": [
+      "install-auth",
+      "tool-function-catalog",
+      "canvas-creation-playbook",
+      "troubleshooting-ops"
+    ],
     "allowed-tools": [
       "Read",
       "Edit",

package/catalog/skills/spec-driven-development/SKILL.md

@@ -33,6 +33,31 @@ Recommended task size:
 
 ---
 
+## OpenSpec Complementary Support
+
+Default execution SHOULD remain the local `.sdd` workflow.
+
+Recur to OpenSpec support when the task needs complementary structure for:
+
+- Multi-session continuity where planning context must persist across chats.
+- Shareable planning artifacts for review before implementation.
+- Requirement-delta clarity that benefits from explicit change proposals.
+
+Routing rules:
+
+- Keep the local `.sdd/active/<feature-name>/spec.md` as the execution source of truth unless the team explicitly standardizes on OpenSpec paths.
+- If OpenSpec is unavailable, continue in `.sdd` and document assumptions directly in the active spec.
+
+| Use local SDD only | Use OpenSpec support |
+| --- | --- |
+| Single-session or straightforward work with clear requirements | Work spans multiple sessions and needs persistent planning context |
+| Existing `.sdd` artifacts already provide enough review clarity | Team needs proposal/design/tasks artifacts for async review |
+| Requirement changes are small and easy to track in-place | Requirement deltas are complex and need explicit change framing |
+
+Reference (informational): [https://openspec.dev/](https://openspec.dev/)
+
+---
+
 ## Spec Structure
 
 A practical spec includes:

package/catalog/skills/spec-driven-development/manifest.json

@@ -12,9 +12,15 @@
     "author": "skilly-hand",
     "last-edit": "2026-04-03",
     "license": "Apache-2.0",
-    "version": "1.0.1",
-    "changelog": "Added explicit delta/full guidance, archive rules, task sizing decision tree, and common mistakes section; improves planning clarity and reduces execution ambiguity; affects spec-driven-development SKILL.md usage guidance",
+    "version": "1.0.3",
+    "changelog": "Added OpenSpec complementary support routing guidance to spec-driven-development instructions; improves planning continuity and review clarity when local SDD needs reinforcement; affects spec-driven-development SKILL guidance and manifest metadata",
     "auto-invoke": "Planning or executing feature work, bug fixes, and multi-phase implementation",
+    "allowed-modes": [
+      "plan",
+      "apply",
+      "verify",
+      "orchestrate"
+    ],
     "allowed-tools": [
       "Read",
       "Edit",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilly-hand/skilly-hand",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "publishConfig": {