010105 frontend coding

Skill natuleadan/skills/skills/010105-frontend-coding

Multi-domain agent skills collection for AI coding agents (Claude, Cursor, Copilot, OpenCode, and more). Covers programming, biology, cooking, and future domains. Installable via npx skills add.

Install

npx -y skills add natuleadan/skills --skill 010105-frontend-coding

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

React best practices, hydration pattern, web accessibility (ARIA, keyboard nav), and frontend performance (N+1 queries, lazy loading).

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

1.3 KB, as published. Nobody here has run it

Frontend Coding Standards

Overview

Best practices for React, accessibility, and performance in web applications.

Quick Reference

React

Prefer Server Components by default; use "use client" only for interactivity
Hooks at top level only (no conditions/loops)
List keys must be stable unique IDs, not array index
Client Components should be leaf-level only (push interactivity down)

Accessibility

Use semantic HTML (<button>, <nav>, <main>) over <div> with ARIA
aria-label for icon-only controls, aria-hidden="true" for decorative elements
Keyboard navigation: tabIndex, onKeyDown handlers
Color is never the only indicator (add text or icons)

Performance

Avoid N+1 queries: batch with joins or Promise.all
Lazy load via dynamic imports and image lazyloading
Memoize expensive computations with useMemo or cache maps
Use pagination or virtualized lists for large datasets