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.
65
77%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./.claude/skills/frontend-dev/SKILL.mdQuality
Discovery
89%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 solid skill description with clear 'when' guidance and good trigger term coverage scoped to a specific project. Its main weakness is that the 'what' portion uses the vague phrase 'coding practices' rather than describing concrete actions the skill enables (e.g., 'Guides creation of React components following project conventions'). The project-specific scoping to Atomic CRM is a strength for distinctiveness.
Suggestions
Replace the vague 'Coding practices' opener with specific actions, e.g., 'Guides creation and modification of React components, implements form validation, builds list/detail views following Atomic CRM conventions.'
| Dimension | Reasoning | Score |
|---|---|---|
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', 'implements filters'). | 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 | Scoped specifically to 'Atomic CRM' frontend development, which is a distinct project context. The combination of the project name and the specific UI element types (list pages, detail views, filters) makes it unlikely to conflict with generic React or other project skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
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 for the Atomic CRM frontend. Its main weakness is the lack of concrete code examples—adding even one or two small snippets showing a typical component, form setup, or data fetching pattern would significantly boost actionability. The workflow for creating new resources could also benefit from an explicit step-by-step sequence.
Suggestions
Add a short, executable code example showing a minimal resource component (e.g., a simple list or form) that demonstrates the import conventions, hook usage, and form setup together.
Include a brief step-by-step workflow for adding a new resource end-to-end: create files, register in CRM.tsx, wire up data fetching, and verify it works.
Add a concrete code snippet for the custom dataProvider pattern (useDataProvider<CrmDataProvider>() with useQuery) since this is a non-obvious pattern specific to this project.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Every line conveys project-specific conventions Claude wouldn't know. No explanations of what React, shadcn, or react-admin are. Tight and efficient throughout. | 3 / 3 |
Actionability | Provides specific import paths, hook names, component names, and file structure conventions, which is quite concrete. However, there are no executable code examples—no sample component, no snippet showing how to wire up a form or use useConfigurationContext(). Guidance is specific but not copy-paste ready. | 2 / 3 |
Workflow Clarity | The resource file structure convention is clearly laid out, and the decision tree for data fetching (ra-core hooks vs custom dataProvider) is present. However, there's no sequenced workflow for creating a new resource or component end-to-end, and no validation/verification steps are mentioned. | 2 / 3 |
Progressive Disclosure | Content is well-organized into clear sections with good headers, but everything is inline in a single file. References to specific files (e.g., ActivityLog.tsx, SalesCreate.tsx) are mentioned as examples but there are no links to detailed guides or reference documents. For a skill of this complexity, some external references for advanced patterns would improve navigation. | 2 / 3 |
Total | 9 / 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.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- marmelab/atomic-crm
- Commit
bc8fc09
- 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.