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.

64

Quality

76%

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

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/frontend-dev/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

An exemplary reference-style skill: lean, convention-dense, and easy to navigate, with concrete import paths, hooks, file structures, and real example files plus a Red Flags section and end-of-task verification checklist. The only room for improvement is a couple of vague phrasings and the absence of any small illustrative snippet.

DimensionReasoningScore

Conciseness

The body is pure convention statements and pointers ('Import form inputs... from @/components/admin/, not from shadcn/ui directly', 'Filters apply immediately, no "apply" button') with no explanation of concepts Claude already knows and no padding. Every token earns its place.

5 / 5

Actionability

Guidance is concrete and executable: exact import paths, specific hooks (useListContext, useGetList, useGetIdentity), the standard resource file structure, registration location (root/CRM.tsx), and real example files (dataProvider.getActivityLog() in ActivityLog.tsx). Minor gaps — 'growing past the typical size' is vague and no small code snippet illustrates the patterns — keep it at 4 rather than 5.

4 / 5

Workflow Clarity

The usage model is explicit ('read the relevant section before writing code, then verify against the checklist at the end') and the Verification section is a real checklist of checkpoints, reinforced by a Red Flags section of error patterns. It is 4 rather than 5 because there is no sequenced multi-step flow or feedback loop, which is acceptable for a reference skill but not the anchor-5 pattern.

4 / 5

Progressive Disclosure

The body (~75 lines) is organized into tight topical sections, all at overview altitude, with clearly signaled cross-references to sibling skills (Skill({skill: "backend-dev"}), e2e-conventions) and no bundle files to navigate. It is 4 rather than 5 only because the content slightly exceeds the under-50-line simple-skill threshold where sections alone merit a 5.

4 / 5

Total

17

/

20

Passed

Description

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

A well-scoped description with an explicit and concrete 'Use when' trigger clause covering the main frontend artifacts of the CRM. Its main weakness is the generic 'what' — 'Coding practices' — which names the domain but not the skill's concrete capabilities.

Suggestions

Replace or expand the generic 'Coding practices' opening with the concrete things the skill provides, e.g. 'Conventions and verification checklist for React components, forms, list pages, detail views, filters, data fetching, and responsive layouts in Atomic CRM.'

Add natural trigger synonyms such as 'mobile/desktop layouts', 'CRUD pages', or 'react-admin' so users phrasing the need differently still match.

Consider stating what the guidance consists of (conventions reference + verification checklist) so the 'what' is as explicit as the 'when'.

DimensionReasoningScore

Specificity

The action stated is generic ('Coding practices for frontend development in Atomic CRM') and the concreteness comes from the trigger list ('React components, forms, list pages, detail views, filters, data fetching') rather than from named capabilities of the skill itself. It names the domain with some concrete objects but does not list several specific actions, which keeps it at 3 rather than 4 and well above the domain-only level 2.

3 / 5

Completeness

Both parts are present: 'Coding practices for frontend development in Atomic CRM' answers what, and an explicit 'Use when creating or modifying React components, forms, list pages...' answers when with concrete triggers. It sits at 4 rather than 5 because the 'what' is one generic phrase, unlike the anchor-5 pattern of listing concrete capabilities.

4 / 5

Trigger Term Quality

'React components, forms, list pages, detail views, filters, data fetching, responsive layouts' are natural phrases a user would say when needing this skill. Common variations like 'mobile', 'CRUD', or 'pages' are absent, so keyword coverage is good but not comprehensive.

4 / 5

Distinctiveness Conflict Risk

Scoping to 'Atomic CRM' plus specific artifacts (list pages, detail views, filters) creates a clear niche with distinct triggers. Minor overlap risk remains with closely related frontend skills (e.g. theming/shadcn customization), so it is 4 rather than 5.

4 / 5

Total

15

/

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