CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-feature

Use when creating new pages, components, modules, or features in the orchestration cluster webapp at webapp/client/apps/orchestration-cluster-webapp/. Use when adding routes, data loading, forms, API integration, or UI components. Trigger whenever someone is building or modifying frontend feature code in webapp/client/, even for small changes like adding a column, filter, or panel.

66

Quality

78%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.claude/skills/frontend-feature/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

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

This is a solid architectural reference skill that covers the key conventions, patterns, and considerations for frontend development in this specific codebase. Its main strength is comprehensive coverage of project-specific decisions (path aliases, pod autonomy, data loading tiers, URL-as-state) with good progressive disclosure to canonical docs. Its main weaknesses are the lack of executable code examples showing concrete implementations and some verbosity in explaining concepts Claude already understands.

Suggestions

Add at least one concrete, executable code example showing a complete thin route file wiring a page component, including loader setup with queryOptions — this would significantly improve actionability.

Add a short code example for the data loading pattern (showing queryOptions definition in queries.ts, loader usage, and useSuspenseQuery in the component) since this is a core workflow.

Trim explanations of general concepts Claude already knows (e.g., remove 'YAGNI — don't build abstractions for hypothetical future use' explanation, simplify the route params vs search params descriptions to just show the project-specific patterns).

DimensionReasoningScore

Conciseness

The skill is mostly efficient and covers a lot of ground, but some sections explain things Claude already knows (e.g., what YAGNI means, general advice like 'code should explain itself', explaining what route params vs search params are). Some bullet points could be tightened, though overall it's reasonably dense with project-specific information.

2 / 3

Actionability

The skill provides concrete guidance on conventions, file paths, and architectural decisions, but lacks executable code examples. There are no copy-paste-ready code snippets showing how to create a route file, define queryOptions, set up a loader, or wire a page component. The 'Building a feature' section describes steps abstractly rather than showing concrete implementations.

2 / 3

Workflow Clarity

The 'Building a feature' section provides a clear 3-step sequence, and 'Local checks before commit' provides validation commands. However, the 'Before starting a feature' section is a checklist of considerations without clear sequencing or validation checkpoints. The overall feature development workflow lacks explicit feedback loops (e.g., what to do if typecheck fails, how to verify the route is correctly wired).

2 / 3

Progressive Disclosure

The skill provides a well-structured overview with clear section headers and a 'Canonical docs' section at the end with well-signaled, one-level-deep references to detailed documentation files covering specific topics (data loading, forms, creating pages, code style, etc.). Content is appropriately split between the overview here and detailed guides elsewhere.

3 / 3

Total

9

/

12

Passed

Description

100%

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

This is a strong skill description that clearly defines its scope with specific actions, explicit trigger conditions, and a well-defined niche tied to a particular webapp path. It covers both broad use cases (creating features, API integration) and granular ones (adding a column, filter, or panel), making it easy for Claude to match against a wide range of relevant user requests. The only minor note is it could mention specific technologies/frameworks used, but the path-based scoping is already very effective.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions: creating pages, components, modules, features, adding routes, data loading, forms, API integration, UI components, adding columns, filters, and panels.

3 / 3

Completeness

Clearly answers both 'what' (creating pages, components, routes, forms, API integration, UI components) and 'when' with explicit trigger guidance ('Use when creating new pages...', 'Trigger whenever someone is building or modifying frontend feature code').

3 / 3

Trigger Term Quality

Includes many natural keywords users would say: 'pages', 'components', 'routes', 'forms', 'API integration', 'UI components', 'column', 'filter', 'panel', plus the specific app path. These are terms developers naturally use when requesting frontend work.

3 / 3

Distinctiveness Conflict Risk

Highly distinctive due to the specific app path 'webapp/client/apps/orchestration-cluster-webapp/' and the clear scoping to frontend feature code in 'webapp/client/'. This creates a clear niche unlikely to conflict with backend or other app skills.

3 / 3

Total

12

/

12

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
camunda/camunda
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.