Skillzwave Logo
Skillzwave

senior-frontend

0.0
F

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

Commands Agents Marketplace
#frontend#claude-ai#claudecode-subagents#claude-ai-skills#web applications#practices#guide#claude-skills

Third-Party Agent Skill: Review the code before installing. Agent skills execute in your AI assistant's environment and can access your files. Learn more about security

Installation for Agentic Skill

View all platforms →
skilz install alirezarezvani/claude-skills/senior-frontend
skilz install alirezarezvani/claude-skills/senior-frontend --agent opencode
skilz install alirezarezvani/claude-skills/senior-frontend --agent codex
skilz install alirezarezvani/claude-skills/senior-frontend --agent gemini

First time? Install Skilz: pip install skilz

Works with 22+ AI coding agents

Cursor, Aider, Copilot, Windsurf, Qwen, Kimi, and more...

View All Agents
Download Agent Skill ZIP

Extract and copy to ~/.claude/skills/ then restart Claude Desktop

1. Clone the repository:
git clone https://github.com/alirezarezvani/claude-skills
2. Copy the agent skill directory:
cp -r claude-skills/engineering-team/senior-frontend ~/.claude/skills/

Need detailed installation help? Check our platform-specific guides:

Related Agentic Skills

automating-mail

by SpillwaveSolutions

Automates Apple Mail via JXA with AppleScript dictionary discovery. Use when asked to "automate email", "send mail via script", "JXA Mail automation",...

100
A
general
Marketplace
#excel#Mail.OutgoingMessage#Status

automating-reminders

by SpillwaveSolutions

Automates Apple Reminders using JavaScript for Automation (JXA). Use when asked to "create reminders programmatically", "automate reminder lists", "JX...

100
A
general
Marketplace
#app.lists.byName#excel#notes

mastering-postgresql

by SpillwaveSolutions

PostgreSQL development for Python with full-text search (tsvector, tsquery, BM25 via pg_search), vector similarity (pgvector with HNSW/IVFFlat), JSONB...

100
A
general
Marketplace
#references#search#vector

automating-contacts

by SpillwaveSolutions

Automates macOS Contacts via JXA with AppleScript dictionary discovery. Use when asked to "automate contacts", "JXA contacts automation", "macOS addre...

99
A
general
Marketplace
#excel#notes#Contacts.Person

Agentic Skill Details

Repository
claude-skills
Type
Other
Meta-Domain
N/A
Primary Domain
N/A
Market Score
0.0

Agent Skill Grade

F
Score: 42/100 Click to see breakdown

Score Breakdown

Spec Compliance
12/15
PDA Architecture
10/30
Ease of Use
12/25
Writing Style
3/10
Utility
5/20

Areas to Improve

  • All three reference files are nearly identical placeholder templates with no actual React patterns, Next.js optimization guidance, or frontend best practices
  • Pervasive marketing superlatives without technical substance: 'Complete toolkit', 'Expert-level automation', 'Production-grade output'
  • Scripts are skeleton code with placeholder methods (analyze(), generate_report()) that don't implement actual component generation, bundle analysis, or scaffolding

Recommendations

  • Focus on improving Pda (currently 10/30)
  • Focus on improving Ease Of Use (currently 12/25)
  • Focus on improving Writing Style (currently 3/10)

Graded: 1/23/2026

Developer Feedback

I took a look at your senior-frontend skill and noticed the grading came back at 42/100 — there's definitely some structural work needed, but I'm curious what the original vision was because the core idea has potential.

Links:

The TL;DR

You're at 42/100, solidly in F territory. This is based on Anthropic's grading framework for agentic skills. Your strongest area is Spec Compliance (12/15) — the YAML and metadata are technically sound. But Utility is dragging you down hard at 5/20, followed by Writing Style at 3/10. The reference files and scripts feel more like templates than actual guidance.

What's Working Well

  • Valid YAML structure — Your frontmatter is clean and follows conventions properly
  • Good trigger coverage — You've got ReactJS, NextJS, performance optimization, and TypeScript all in the metadata, which helps discoverability
  • References exist — The three-file structure (nextjs_optimization_guide.md, frontend_best_practices.md, react_patterns.md) shows you understand layered architecture

The Big One: Placeholder Content Everywhere

This is the core issue. All three reference files are skeleton templates with no actual substance. They're full of placeholder descriptions like "Pattern 1: Best Practice Implementation" with generic bullet points, but zero concrete React patterns, Next.js optimization techniques, or real best practices. Same problem with the Python scripts — they're placeholder code with methods like analyze() and generate_report() that do nothing.

The fix: Replace those reference files with real content. Pick 5-6 actual React patterns (custom hooks composition, render-as-you-fetch, suspense boundaries), add concrete Next.js wins (image optimization strategies, ISR examples, dynamic import patterns), and actually populate the scripts with working logic or replace them with guidance instead. This alone gets you +6-7 points, maybe more.

Other Things Worth Fixing

  1. Kill the marketing speak — Lines 6-8 and 33-37 are drowning in "Complete toolkit," "Expert-level automation," "Production-grade output." Rewrite these as actual technical claims. "Generate React/Next.js components with TypeScript, Tailwind, and testing boilerplate using configurable templates" does way more.

  2. Add a table of contents — SKILL.md is 210 lines but has no TOC. Readers can't navigate. Drop one after the frontmatter: Quick Start, Core Capabilities, Reference Documentation. Easy +2 points.

  3. Workflow steps are unclear — The development workflow section (lines 115-144) jumps between "Run Quality Checks" and "Apply fixes" without showing the actual sequence or when to use each script. Number them out: 1) Generate component, 2) Analyze bundle, 3) Review output, 4) Apply changes.

  4. Inconsistent terminology — You call it both "Component Generator" and "component generator tasks," "Bundle Analyzer" vs "analysis and optimization tool." Pick one and stick with it.

Quick Wins

  • Replace all placeholder reference content with actual React/Next.js patterns and best practices
  • Remove marketing language and rewrite descriptions as technical claims
  • Add a TOC to SKILL.md for navigation
  • Implement or remove the Python scripts (don't ship skeleton code)
  • Standardize terminology throughout the skill

Checkout your skill here: SkillzWave.ai | SpillWave We have an agentic skill installer that install skills in 14+ coding agent platforms. Check out this guide on how to improve your agentic skills.

AI-Detected Topics

Extracted using NLP analysis

frontend claude-ai claudecode-subagents claude-ai-skills web applications practices guide claude-skills performance performant web claude-code Tailwind CSS anthropic-claude claude-code-skills agentic-ai Tailwind senior-frontend description agentic-coding CSS

Report Security Issue

Found a security vulnerability in this agent skill?