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

94%

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

The canonical home for this skill is ai-unified-process/aiup-angular

SKILL.md
Quality
Evals
Security

Quality

Content

88%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.

A strong, highly actionable skill body: executable code throughout, an explicit validated workflow with fix/report feedback loops, and real, well-signaled one-level-deep references. The main improvement areas are tightening repeated statements (docs/ edit rules appear three times) and moving some of the longer worked examples into reference files to slim the main document.

Suggestions

State the docs/ edit restriction (Markers table of stack.md and new sections of open-questions.md only) once — it currently appears in Scope, 'Run Directly or from /use-case-implement', and DO NOT.

Move the full worked example (page component, template, and service code) or the DTO→TypeScript mapping table into a references/ file and keep a minimal inline snippet, slimming SKILL.md's token footprint.

Trim framing sentences that restate what Claude already knows, such as 'Angular is a client-side UI: it never reaches the service layer or the database directly'.

DimensionReasoningScore

Conciseness

The body is dense with project-specific rules Claude cannot infer (layer boundaries, marker conventions, contract-check rules) and assumes Angular competence without explaining basics, and the code examples are complete rather than padded. It falls short of 5 mainly because the docs/ edit restriction is stated three times (Scope, 'Run Directly', and DO NOT) and a few framing sentences restate the obvious (e.g. "Angular is a client-side UI: it never reaches the service layer or the database directly"), fitting 'efficient; minor instances of over-explanation that could be trimmed' (4) rather than 'every token earns its place' (5).

4 / 5

Actionability

Fully executable, copy-paste-ready guidance: a DTO→TypeScript mapping table, a complete model interface, a working HttpClient service with HttpParams, a full signal()-based page component and its template with @if/@for/@empty, a validator with the BR marker, a problem+json error handler, and a filled-in Handover block. Specific commands (ng build), exact file paths, and concrete common cases match the score-5 anchor; it is not 4 because no meaningful executable gaps remain.

5 / 5

Workflow Clarity

The 10-step Workflow is clearly sequenced with explicit validation checkpoints and feedback loops: step 7 'Run ng build ... and fix the errors in the code you wrote' and step 8 'Check the JSON contract against the Handover ... Fix a mismatch in the UI; when the API is the side that cannot serve the use case, report it as a contract gap'. This matches the score-5 anchor (explicit validation steps plus error-recovery branches); score 4 would require an implicit or missing checkpoint, which is not the case.

5 / 5

Progressive Disclosure

Both referenced files exist, are one level deep, small (markers.md 15 lines, layer.md 17 lines), and clearly signaled with purpose descriptions in the Resources and Markers sections, and the body's section headers make navigation easy. However, the SKILL.md itself is a ~330-line full instruction manual whose bulk detail (complete worked component/template/service examples, the DTO mapping table) is inline rather than split into reference files, so it fits 'good structure; most content appropriately placed; minor organization gaps' (4) rather than the overview-pointing-to-detailed-materials ideal of 5.

4 / 5

Total

18

/

20

Passed

Description

96%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 capabilities, explicit quoted trigger phrases, clear what/when answers, third-person voice, and explicit boundaries against the sibling test skill and the orchestrating /use-case-implement. The only weakness is the broad bare 'mentions Angular' trigger, which slightly raises overlap risk with any generic Angular skill.

DimensionReasoningScore

Specificity

The description enumerates multiple concrete capabilities — "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" — plus "checks the JSON contract against it". This matches the score-5 anchor (multiple specific concrete actions, comprehensive coverage); it exceeds score 4 because there are no noticeable coverage gaps in what the skill does.

5 / 5

Completeness

It explicitly answers both questions: the 'what' in the opening capability list and DTO-matching detail, and the 'when' in the explicit "Use when the user asks to..." clause with concrete trigger phrases. It even adds scope boundaries ("Normally run by /use-case-implement... can also be run directly", "Does not write tests"). This mirrors the score-5 example pattern; score 4 would require a less explicit 'when', which is not the case here.

5 / 5

Trigger Term Quality

Quoted natural phrases users would actually say — "build the Angular page", "implement the UI of UC-001", "create the Angular component", "wire the frontend to the REST API" — are supplemented with keyword variations ("mentions Angular, standalone components, signals, or an Angular client calling a backend"). This is comprehensive natural-term coverage with synonyms and phrasing variants, matching the score-5 anchor rather than the 'a few natural terms missing' level of 4.

5 / 5

Distinctiveness Conflict Risk

The skill has a clear niche (Angular UI layer of a use case in this project's layer pipeline) and explicitly distinguishes its sibling ("Does not write tests — that is /angular-ui-test"), so conflict risk is minor. However, the bare trigger "mentions Angular, standalone components, signals" is broad enough that generic Angular questions could pull this skill in, which fits 'mostly distinct; minor overlap risk' (4) better than 'minimal conflict risk' (5).

4 / 5

Total

19

/

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-angular/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.