skills.rest
alvis
alvisCOMMUNITY
Explore all skills by this author →
Website𝕏@alvishttangGitHub

react

Selects React standards and routes component, hook, and Storybook work to owning skills.

4|1|Updated Jul 31, 2025
Search Tags:#accessibility#react#routing#hooks#storybook#code standards#jsx
One-click install
npx skills add https://github.com/alvis/.agents --skill react-alvis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/alvis/.agents/tree/main/plugins/react/skills/react
Command: npx skills add https://github.com/alvis/.agents --skill react-alvis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React work often mixes standards selection, linting, implementation, and review in one place, causing inconsistent conventions and missed verification. This Skill acts as a router that loads only the relevant React standards for the task at hand and delegates enforcement, implementation, and review to their owning skills. ## Core Features & Use Cases - Standards Selection: Identifies which React surfaces a task touches (components, hooks, stories, structure, theming) and loads the applicable standards from the React standards index. - Work Routing: Directs mechanical linting to react:lint, implementation to coding:write-code, and semantic review to coding:review-code, avoiding duplicated workflows. - Rendered Verification: Requires a component/state matrix with screenshots for every changed component, covering interactions like click, hover, focus-visible, keyboard navigation, disabled, loading, error, responsive, and theme states. - Use Case: When asked to add a new accessible dropdown component, the Skill loads the component and accessibility standards, routes implementation to the coding skill, then verifies the rendered result in Storybook with a full state matrix before reporting completion. ## Quick Start Use the react skill to review my new Button component and verify its rendered states in Storybook.

Frequently Asked Questions about react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce React coding standards on a project?▼

Identify which React surfaces your task touches, then select the matching standards from the React standards index and apply them under the shared standards protocol. Mechanical enforcement is routed to react:lint rather than generic linting.

How to verify React component behavior in Storybook?▼

Write a component/state matrix covering actions and states like click, hover, focus-visible, keyboard navigation, disabled, loading, and error. Execute every row on the story or harness and capture one screenshot per changed component and visual state.

When should I use this React router instead of a coding skill?▼

Use it whenever work touches React surfaces such as .tsx/.jsx files, hooks, or stories and you need the right standards loaded. It does not implement code itself; implementation and review are routed to coding:write-code and coding:review-code.

Does this skill run React linting directly?▼

No, mechanical lint execution is delegated to react:lint. The router only selects standards and routes the work, and React linting must never go through generic lint first.

What are the limitations of this React standards router?▼

It does not apply to work with no React surface, such as backend, CLI, or build configuration. It also does not create implementation teams or duplicate other skills' workflows, and optional web skills are only recommended, not invoked.

Related Skills

Explore More Software Engineering Skills→
threadedstackthreadedstack

tdsk-components

Documents the shared React component library @tdsk/components including components, hooks, and theming.

Official
Intermediate
bakwankawabakwankawa

verification-before-completion

Run tests, linting, and builds and record evidence before completion claims.

Community
Basic
jason23452jason23452

frontend-design-review

Review frontend UI for design system compliance, accessibility, and visual quality.

Community
Advanced
iamjpsinghiamjpsingh

fullstack-design

Integrate a Django backend with a React/TypeScript frontend using a service-layer pattern.

Community
Advanced