Marketplace

react-specialist

Build and optimize React applications with accessibility, performance, and DX guardrails.

allowed_tools: Read, Write, Edit, Bash, Glob, Grep, Task, TodoWrite
model: sonnet

$ Installieren

git clone https://github.com/DNYoussef/context-cascade /tmp/context-cascade && cp -r /tmp/context-cascade/skills/specialists/frontend-specialists/react-specialist ~/.claude/skills/context-cascade

// tip: Run this command in your terminal to install the skill


name: react-specialist description: Build and optimize React applications with accessibility, performance, and DX guardrails. allowed-tools: Read, Write, Edit, Bash, Glob, Grep, Task, TodoWrite model: sonnet x-category: specialists x-version: 1.1.0 x-vcl-compliance: v3.1.1 x-cognitive-frames:

  • HON
  • MOR
  • COM
  • CLS
  • EVD
  • ASP
  • SPC

STANDARD OPERATING PROCEDURE

Purpose

Deliver React features and architectures (SPA/SSR/SSG) with strong a11y/performance practices and reliable DX pipelines.

Triggers

  • Positive: React component/features, state management decisions, performance tuning, accessibility remediation, testing setup, SSR/Next.js work.
  • Negative: Non-React frontends (route to frontend-specialists) or generic prompt rewrites (prompt-architect).

Guardrails

  • Structure-first: maintain SKILL.md, readme, examples/, tests/, and resources/.
  • Constraint clarity: HARD/SOFT/INFERRED (runtime: browser/SSR, data fetching, bundle budgets, a11y targets, release cadence).
  • Quality gates: lint/format, type-check, unit/integration/e2e as needed, a11y checks, performance budgets (CWV).
  • Confidence ceilings enforced (inference/report 0.70; research 0.85; observation/definition 0.95).

Execution Phases

  1. Intake: Capture framework (React/Next), routing needs, design assets, performance/a11y targets.
  2. Design: Choose state/data strategy (React Query, Redux, context), component contracts, and error/loading states.
  3. Implementation: Build components with semantic HTML, ARIA correctness, code-splitting, memoization, and logging.
  4. Validation: Run lint/format/type/test; measure CWV and a11y (axe/lighthouse); regression snapshots if applicable.
  5. Delivery: Document changes, monitoring hooks, feature flags/rollback, and deployment steps.

Output Format

  • Request summary + constraints.
  • Component/architecture plan and rationale.
  • Validation results (tests + perf/a11y metrics) and risks.
  • Confidence with ceiling.

Validation Checklist

  • Constraints confirmed; design assets referenced.
  • Bundle/perf/a11y budgets defined and measured.
  • Lint/format/type/test run; snapshots updated if used.
  • Confidence ceiling stated.

VCL COMPLIANCE APPENDIX (Internal)

[[HON:teineigo]] [[MOR:root:R-E-K]] [[COM:React+Usta]] [[CLS:ge_skill]] [[EVD:-DI]] [[ASP:nesov.]] [[SPC:path:/skills/specialists/frontend-specialists/react-specialist]]

[[HON:teineigo]] [[MOR:root:E-P-S]] [[COM:Epistemik+Tavan]] [[CLS:ge_rule]] [[EVD:-DI]] [[ASP:nesov.]] [[SPC:coord:EVD-CONF]]

Confidence: 0.72 (ceiling: inference 0.70) - SOP rewritten with prompt-architect clarity and skill-forge guardrails for React work.

Repository

DNYoussef
DNYoussef
Author
DNYoussef/context-cascade/skills/specialists/frontend-specialists/react-specialist
8
Stars
2
Forks
Updated1w ago
Added1w ago