senior-frontend
tessl i github:alirezarezvani/claude-skills --skill senior-frontendComprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
Validation
81%| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 13 / 16 Passed | |
Implementation
20%This skill is a template-like document filled with generic placeholder content rather than actionable frontend development guidance. It lists tools and references without explaining what they actually do or providing concrete React/Next.js/TypeScript examples. The content reads like marketing copy ('Expert-level automation', 'Production-grade output') rather than technical instruction.
Suggestions
Replace placeholder script descriptions with actual usage examples showing real arguments and expected outputs (e.g., 'python scripts/component_generator.py ./src/components Button --with-tests' creates a Button component with test file)
Add concrete React/TypeScript code examples for common patterns instead of just referencing external files - show at least one complete component example
Remove generic best practices sections (Code Quality, Security, Maintainability) that Claude already knows - focus only on project-specific conventions
Specify what the scripts actually analyze/generate with concrete input/output examples rather than vague feature lists
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose with generic filler content that adds no value. Phrases like 'Automated tool for component generator tasks' and 'Expert-level automation' are meaningless padding. Lists generic best practices Claude already knows (validate inputs, write tests, keep it simple). | 1 / 3 |
Actionability | No concrete, executable guidance. Script commands show placeholders like '[options]' and '[arguments]' without explaining what they actually do. No real code examples for React/Next.js patterns, just vague references to external files. The 'Usage' sections are essentially pseudocode. | 1 / 3 |
Workflow Clarity | Has numbered steps for development workflow (Setup, Quality Checks, Implement), but lacks validation checkpoints and feedback loops. Steps like 'Review recommendations' and 'Apply fixes' are vague without concrete verification criteria. | 2 / 3 |
Progressive Disclosure | References external files appropriately (references/*.md, scripts/), but the main content is bloated with generic information that should either be removed or moved to reference files. The structure exists but content organization is poor. | 2 / 3 |
Total | 6 / 12 Passed |
Activation
92%This is a strong skill description that clearly articulates capabilities with specific technologies and actions, includes an explicit 'Use when...' clause with multiple trigger scenarios, and uses appropriate third-person voice. The main weakness is potential overlap with other development-related skills due to some generic terms like 'performance optimization' and 'reviewing code' that aren't frontend-exclusive.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'component scaffolding, performance optimization, bundle analysis, and UI best practices' along with specific technologies (ReactJS, NextJS, TypeScript, Tailwind CSS). | 3 / 3 |
Completeness | Clearly answers both what (comprehensive frontend development with specific technologies and capabilities) AND when with explicit 'Use when...' clause covering multiple trigger scenarios: developing features, optimizing performance, implementing designs, managing state, reviewing code. | 3 / 3 |
Trigger Term Quality | Good coverage of natural terms users would say: 'frontend', 'ReactJS', 'NextJS', 'TypeScript', 'Tailwind CSS', 'performance', 'UI/UX', 'state', 'frontend code' - these are terms developers naturally use when seeking frontend help. | 3 / 3 |
Distinctiveness Conflict Risk | While it specifies frontend technologies clearly, terms like 'performance optimization', 'reviewing code', and 'state management' could overlap with general coding skills or backend skills. The React/Next/Tailwind focus helps but isn't exclusive enough. | 2 / 3 |
Total | 11 / 12 Passed |
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.