CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

angular-ui

Implements the UI layer of a use case (UC-XXX) as an Angular client: standalone page and presentational components, signal() state, one hand-written HttpClient service per entity with TypeScript models that match the API layer's DTOs field by field, and routes in app.routes.ts. Consumes the Handover of the API layer (endpoints, DTOs) and checks the JSON contract against it. Use when the user asks to "build the Angular page", "implement the UI of UC-001", "create the Angular component", "wire the frontend to the REST API", or mentions Angular, standalone components, signals, or an Angular client calling a backend. Normally run by /use-case-implement as the UI layer of a project whose docs/architecture/stack.md names Angular; it can also be run directly. Does not write tests — that is /angular-ui-test.

Quality

87%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

68%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is an exemplar of token efficiency and appropriate scope discipline (Consumes/Produces/Never-touches), with a clean marker-reference split and a concrete handover template. Its weakness is execution detail: no skeleton code or commands for the artifacts, no explicit step ordering, and no validation step for the JSON contract the description promises to check.

Suggestions

Add a minimal executable skeleton — one HttpClient service method and the app.routes.ts registration snippet — so the core build guidance is copy-paste ready rather than purely descriptive.

Operationalize the JSON-contract check as an explicit validation step: compare each field of the API layer's DTOs against the TypeScript model field by field before emitting the Handover.

State an ordered workflow (read inputs → models → service → page → route → markers → handover) ending with a verification checkpoint (e.g., the project compiles / the page renders the entity's data).

DimensionReasoningScore

Conciseness

The ~40-line body is lean and assumes Claude's competence: no Angular concept explanations, no library recommendations, no padding — every section (Scope, Run modes, Markers, Handover) adds information Claude cannot infer. Not 4: there is nothing to trim.

5 / 5

Actionability

Concrete file-path templates ("src/app/pages/<page>/<page>.ts", "src/app/services/<entity>.ts", "docs/entity_model.md") and a fill-in Handover template exist, but there is no code or command for the artifacts to build (service method, route registration) and the JSON-contract check promised in the description has no operational counterpart in the body. Matches anchor 3 ("some concrete guidance but incomplete… missing key details"), not 4: the how of the core build task and the contract check is unspecified.

3 / 5

Workflow Clarity

A rough sequence is implicit in section order (inputs → build → markers → handover) and one gate exists ("stop on a `Draft` or `Reviewed` use case"), but steps are not explicitly sequenced and there is no output validation checkpoint (no compile/build verification, no contract-check step). Anchor 3 ("sequence present but checkpoints missing or implicit"), not 4: the validation gap is central, not minor. The destructive/batch cap does not apply — this is a code-generation skill.

3 / 5

Progressive Disclosure

A short, well-sectioned body with a clearly signaled one-level-deep reference — "exactly as [references/markers.md](references/markers.md) lists them" — and the marker rows are appropriately split out rather than inlined. Not 5: the bundle contains references/layer.md, which is not referenced or navigable from the body, a minor organization gap in the actual bundle structure.

4 / 5

Total

15

/

20

Passed

Description

100%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

An exemplary description: concrete third-person capability statements, an explicit "Use when…" clause with natural quoted trigger phrases and synonyms, and explicit boundary disambiguation against /angular-ui-test and backend work. No fluff, over-claims, or padding.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — "standalone page and presentational components, signal() state, one hand-written HttpClient service per entity with TypeScript models that match the API layer's DTOs field by field, and routes in app.routes.ts" — with comprehensive coverage of the skill's outputs. Not 4: there are no minor gaps; every major artifact type (page, components, state, service, models, routes) is named concretely.

5 / 5

Completeness

Explicitly answers both: what ("Implements the UI layer of a use case (UC-XXX) as an Angular client…") and when ("Use when the user asks to 'build the Angular page'…") with concrete trigger phrases. Not 4: the when-clause is already fully explicit, not merely present.

5 / 5

Trigger Term Quality

Quotes natural user phrasings — "build the Angular page", "implement the UI of UC-001", "create the Angular component", "wire the frontend to the REST API" — plus synonym terms ("Angular, standalone components, signals, or an Angular client calling a backend"). Comprehensive natural-term coverage including variations, matching the score-5 anchor.

5 / 5

Distinctiveness Conflict Risk

Clear niche (Angular UI layer of a use case) with distinct triggers, and it explicitly disambiguates its closest neighbors: "Does not write tests — that is /angular-ui-test" and "Never touches the backend". Minimal conflict risk, matching the score-5 anchor.

5 / 5

Total

20

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

AI-Unified-Process/marketplace

Path

aiup-core/evals/stack-angular-jpa-api-integration/layer-skills/angular-ui/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.