Skip to content

Feedback on your senior-frontend skill #63

Description

@RichardHightower

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](https://skillzwave.ai) | [SpillWave](https://spillwave.com) 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions