CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-dev

Coding practices for frontend development in Atomic CRM. Use when creating or modifying React components, forms, list pages, detail views, filters, data fetching, or responsive layouts.

62

Quality

73%

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-dev/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

64%

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

This is a well-structured, concise conventions guide that efficiently communicates project-specific architectural decisions without explaining concepts Claude already knows. Its main weaknesses are the lack of executable code examples (e.g., a skeleton for a new resource or form) and the absence of explicit step-by-step workflows for common tasks like adding a new resource or creating a responsive page.

Suggestions

Add a concrete code example showing a minimal resource component (e.g., a simple list or form page) to make the conventions immediately executable.

Include a step-by-step workflow for the most common task (e.g., 'Adding a new resource') with numbered steps and a verification checkpoint (e.g., confirming the resource renders correctly).

Consider linking to or referencing example files in the codebase (e.g., 'See contacts/ for a complete reference implementation') to support progressive disclosure.

DimensionReasoningScore

Conciseness

Every line conveys project-specific knowledge Claude wouldn't already know—import paths, architectural conventions, specific hook names, file naming patterns. No filler or explanation of basic React/library concepts.

3 / 3

Actionability

Provides specific import paths, hook names, and file structure conventions that are actionable, but lacks executable code examples. For instance, showing a concrete component skeleton or a data fetching snippet would make guidance copy-paste ready.

2 / 3

Workflow Clarity

The file structure convention and resource registration flow are clearly described, but there are no explicit step-by-step workflows for creating a new resource or component. For a skill covering creating/modifying components, a sequenced workflow (e.g., 'to add a new resource: 1. create files, 2. register in CRM.tsx, 3. verify') would improve clarity.

2 / 3

Progressive Disclosure

Content is well-organized into logical sections with clear headers, but everything is inline in a single file. References to specific files like `ActivityLog.tsx`, `SalesCreate.tsx`, and `misc/` components could link to examples or supplementary docs. For a skill of this scope, some external references would be beneficial.

2 / 3

Total

9

/

12

Passed

Description

82%

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

The description has good completeness with an explicit 'Use when' clause and decent trigger term coverage for frontend development tasks. Its main weakness is the vagueness of 'coding practices'—it doesn't specify what concrete actions or patterns the skill teaches. The project-specific qualifier 'Atomic CRM' helps with distinctiveness but the broad frontend terms could still overlap with other skills.

Suggestions

Replace 'Coding practices' with specific actions like 'Implements components using [specific pattern], handles form validation with [library], fetches data via [approach]' to improve specificity.

Add distinguishing architectural details unique to Atomic CRM (e.g., specific state management, component library, or project conventions) to reduce conflict risk with generic React/frontend skills.

DimensionReasoningScore

Specificity

Names the domain (frontend development in Atomic CRM) and lists several areas (React components, forms, list pages, detail views, filters, data fetching, responsive layouts), but describes them as categories rather than concrete actions. 'Coding practices' is vague—it doesn't specify what actions are performed (e.g., 'creates components following X pattern', 'implements data fetching with Y').

2 / 3

Completeness

Explicitly answers both 'what' (coding practices for frontend development in Atomic CRM) and 'when' (Use when creating or modifying React components, forms, list pages, detail views, filters, data fetching, or responsive layouts). The 'Use when...' clause is present with clear triggers.

3 / 3

Trigger Term Quality

Includes strong natural keywords users would say: 'React components', 'forms', 'list pages', 'detail views', 'filters', 'data fetching', 'responsive layouts', and 'frontend development'. These cover a good range of terms a developer working on this project would naturally use.

3 / 3

Distinctiveness Conflict Risk

The project-specific qualifier 'Atomic CRM' helps distinguish it, but 'React components', 'forms', 'data fetching', and 'responsive layouts' are very broad frontend terms that could overlap with other frontend or React-related skills. Without more specific architectural patterns or unique identifiers, there's moderate conflict risk with general React or frontend skills.

2 / 3

Total

10

/

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
marmelab/atomic-crm
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.