claude

frontend-engineering

Frontend-engineering team — agents (frontend-architect, react-implementation-engineer, frontend-state-and-data-engineer, frontend-performance-engineer) for building app-grade frontends (React/Next, TypeScript): component architecture and composition, the rendering-strategy choice (CSR/SSR/SSG/ISR/React Server Components), client state vs server-cache (TanStack Query/RSC) and form/validation, bundle/performance discipline (code-splitting, Core Web Vitals, hydration cost), and accessibility-in-code (semantic HTML, ARIA, keyboard, focus). TypeScript-first. skills, a decision-tree knowledge bank (rendering-strategy + state-location trees + a dated 2026 map), best-practices, templates, commands, an advisory hook. Distinct from web-design (brand/UX/marketing sites). Seams: design/brand/WCAG-audit -> web-design, auth UX -> auth-identity, API consumption -> api-engineering, native -> mobile-engineering. Requires ravenclaude-core@>=0.7.0.

9 on GitHubby Matt Corbettv0.4.4MITupdated today
/

Plugin frontend-engineering from marketplace ravenclaude in mcorbett51090/RavenClaude. Commands read from the repo's manifest — today.

This plugin runs code on your machine — its hooks fire automatically on events like tool use. The exact commands are listed below; read them before installing.

What it installs

Skills (5)

  • accessibility-audit-and-fix

    Actionable checklist and fix patterns for WCAG 2.1 AA compliance in React apps — automated scanning, keyboard navigation, focus management, ARIA usage, color contrast, and the most common component-level failures.

  • frontend-performance

    Make a frontend fast to a budget: analyze and code-split the bundle by route, lazy-load heavy/below-the-fold, optimize images/fonts, minimize hydration (RSC/islands), kill render-blocking and request waterfalls, and tune the Core Web Vitals (LCP/INP/CLS) against field data.

  • frontend-state-architecture

    Architect frontend state: treat server data as a cache (TanStack Query/SWR/RSC), place client state at the narrowest workable scope (local -> context -> store), invalidate deliberately, use optimistic updates with rollback, and derive rather than duplicate.

  • react-component-craft

    Build composable, accessible React components: small components with clear props (composition over a flag-laden mega-component), correct hooks (complete deps, no stale closures, effects only for external sync), controlled validated forms, and accessibility in the markup.

  • rendering-strategy

    Choose the rendering strategy per route: SSG/ISR for static content, SSR/RSC for personalized or SEO-critical pages, CSR for behind-login interactive shells; default to server components and hydrate only interactive islands to minimize shipped JavaScript.

Slash commands (4)

  • /frontend-engineering:architect-state

    Architect frontend state and data: server-cache vs client state, scope, invalidation, optimistic updates.

  • /frontend-engineering:build-component

    Build a composable, typed, accessible React component with correct hooks and testable markup.

  • /frontend-engineering:choose-rendering

    Choose the rendering strategy per route (CSR/SSR/SSG/ISR/RSC) and the server/client component split.

  • /frontend-engineering:optimize-frontend-perf

    Improve frontend performance to a budget: bundle code-splitting, CWV tuning, media/font optimization, hydration reduction.

Subagents (4)

  • frontend-architect

    Use for frontend architecture: choosing the rendering strategy per route (CSR/SSR/SSG/ISR/RSC), the RSC-vs-client-component split, component boundaries and composition, the TypeScript-strict posture, framework selection by need, and the build shape that protects the bundle budget.

  • frontend-performance-engineer

    Use for frontend performance: Core Web Vitals (LCP/INP/CLS) tuning, JavaScript bundle analysis and route-based code-splitting, lazy-loading, image/font optimization, hydration-cost reduction (RSC/islands), eliminating render-blocking and waterfalls, and a CI perf budget. Routes CI gating out.

  • frontend-state-and-data-engineer

    Use for frontend state and data architecture: separating server-cache (TanStack Query/SWR/RSC) from client state, placing client state at the narrowest workable scope, cache invalidation and optimistic updates with rollback, framework-appropriate fetching (avoiding waterfalls/over-fetch).

  • react-implementation-engineer

    Use for React component implementation: composable components with clear props, correct hook usage (complete deps, no stale closures, effects only for external sync), controlled validated forms, accessibility-in-code (semantic HTML, ARIA, keyboard, focus), and testable markup.

Hooks (1)

  • PreToolUse

    /usr/bin/env -u BASH_ENV -u ENV -u SHELLOPTS -u BASHOPTS -u LD_PRELOAD -u LD_LIBRARY_PATH -u LD_AUDIT -u DYLD_INSERT_LIBRARIES -u DYLD_LIBRARY_PATH -u PYTHONPATH -u PYTHONSTARTUP PATH=/usr/local/bin:/

Language servers (3)

  • typescript
  • eslint
  • css
View source on GitHub mcorbett51090.github.io

More from mcorbett51090/RavenClaude

All 184 plugins →

Domain-neutral Claude Code foundation: specialist agents, skills, gates, hooks, rules, templates. Capability Grounding Protocol, Structured Output Protocol, Researcher meta-skill, comfort-posture dashboard, opt-in command-review tribunal (the Thing), WebFetch sanitizer, branch-archive escape hatch, brand-extraction (homepage → brand kit), /wireframe (describe anything → validated model + high-fi Artifact + Mermaid), Problems & Resolutions view, declarative-visualization (Vega-Lite/Deneb/SVG, Gate 101 + Gate 103 svg-report-lint, viz-spec-reviewer), and Claude orchestrator escape hatch (/claude-orchestrate). Slash commands: /init-agent-ready, /wrap, /set-posture, /dashboard, /forge, /wireframe, /reset-plugin-cache, /handoff.

70 skills · 14 commands · 18 agents · hooks

9

Power Platform specialist team — agents (incl. power-platform-tester, power-bi-engineer) and skills, with strong ALM/git coverage for solutions, flows, and PBIP. A house-opinions hook flags 8 §3/§4 violations; the knowledge bank carries production decision trees (PA-flow recovery, Dataverse token-acquisition, PCF React surface, PBI deploy/refresh, custom-connector build-path, PBIR Enhanced infinite-spinner debug + full build reference, DAX silent-zero scoring via the `Domain` pattern, sempy.fabric notebook reference, Power BI Copilot report-readiness, Code Apps connector gotchas, PBIP deployment variables + #839, PBIR reference enrichment, PBIP report fast-solve triage router [MCP-optional], main-forms-are-Web-API-authorable grounding) plus a real-engagement scenarios bank. Bundles the community pbix-mcp server (d0nk3yhm/pbix-mcp, MIT) for .pbix/.pbit read/write/DAX-eval (`pip install pbix-mcp`); documents (not bundles) the official Microsoft Dataverse MCP (CLAUDE.md §9a). Extends ravenclaude-core.

24 skills · 8 commands · 11 agents · 1 MCP server · hooks

9

finance

claude

Corporate finance & FP&A specialist team — FP&A analyst (budgets, forecasts, variance commentary), financial modeler (3-statement, DCF, scenarios), controller (close, JEs, reconciliations), treasury analyst (cash, covenants, FX), valuation analyst (DCF + comps + precedent), audit-prep specialist (PBC, walkthroughs, SOC1/2 narratives), and board-pack composer. skills incl. a gold-standard NetSuite close (OAuth2 M2M + SuiteQL BS/IS trial balance, layperson runbook), templates, a knowledge bank (ASC 805 / 718 / 740, accrual-cutoff, WACC, cost accounting, FP&A operating model + decision support, NetSuite integration landscape), advisory hooks (hardcoded rates / plaintext PII / missing Sources / Assumptions; secrets-PII scan). Inherits ravenclaude-core protocols.

23 skills · 7 commands · 7 agents · hooks

9

Web design & build specialist team — web architect (IA, stack, hosting), UX designer (wireframes, flows, conversion), visual designer (brand, typography, tokens), frontend implementer (HTML/CSS/JS, React, Astro, Next), content strategist (copy, microcopy, SEO content), accessibility auditor (WCAG 2.2 AA/AAA), and performance engineer (Core Web Vitals, image/font optimization). skills (the gold-standard-website-pipeline gated build pipeline, static-site build, design-system audit, card/tile UI, accessibility review, Core Web Vitals tuning, technical SEO audit, information architecture, conversion design, content audit, design-tokens scaffolding, third-party hygiene, Fluent UI v9 + React implementation), templates, an advisory hook, and a knowledge bank seeded with a curated 2026 reference set of "cutting edge yet simple" marketing-site donors — the design agents carry compact inline priors plus a pointer to the full brief. Inherits ravenclaude-core protocols.

19 skills · 7 commands · 7 agents · hooks · LSP

9

EdTech-flavored Partner Success Manager team — specialist agents anchored on the PSM lane, with skills, templates, an advisory hook, a knowledge bank with Mermaid decision trees, a engagement bank, and a stdlib psm_calc.py calculator (seat-utilization / renewal-NRR-forecast / time-to-value). Covers QBRs, success plans, health scores, a self-contained Power-BI-style partner-health report, onboarding, touchpoint logs, adoption sequencing, 90-day implementation arcs, train-the-trainer curricula, advocacy/reference pipelines, renewal decision memos, and the integration contract for a centralized CS dashboard (Planhat + Salesforce + Snowflake + Zapier + Granola). Team growth ships as skills + knowledge + templates, not parallel agents. Primary-source citations with retrieval dates. Vertical-explicit but segment-agnostic — fits K-12, higher-ed, corporate L&D, or mixed EdTech books. Inherits ravenclaude-core protocols including the alternate-methods Capability Grounding Protocol.

17 skills · 5 commands · 6 agents · hooks

9

Financial-regulatory & compliance specialist team — function agents (AML/KYC, regulatory-reporting, risk-and-controls, policy & procedure, examination-prep, Bermuda-insurance) PLUS jurisdiction/regulator specialists: BMA financial-institutions (banking, trust, corporate-services, fund-admin, investment-business, money-service, digital-assets — the primary build-out, with deep AML/ATF + supervision/fees + licensing-classification trees), CIMA (Cayman), Bahamas, Channel Islands (Jersey JFSC + Guernsey GFSC), UK PRA, and US federal+state. primary-source-cited regulator knowledge files, best-practice rules, skills, templates, a defensive PreToolUse hook (PII scrub — SSN/IBAN/credit-card/Bermuda TIN/wire instructions). Positioning reflects field experience inside a Tier-1 financial regulator (BMA). Inherits ravenclaude-core protocols.

11 skills · 5 commands · 12 agents · hooks

9

Similar plugins

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.

1 skill

anthropics/claude-code 155,476

Professional UI/UX design intelligence for AI coding assistants. Includes searchable databases of styles, colors, typography, charts, and UX guidelines for React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, and Three.js.

7 skills

nextlevelbuilder/ui-ux-pro-max-skill 148,759

nextjs

claude

Official Next.js skills: adopt and optimize Cache Components, adopt Partial Prefetching, and verify runtime behavior against a running dev server.

6 skills

vercel/next.js 143,495

claude-mem

claudecodex

Persistent memory for Claude Code: the next session starts where the last one left off.

29 skills · 1 MCP server · hooks

thedotmack/claude-mem 116,618

Taste Skill

claudecodex

tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.

1 skill

Leonxlnx/taste-skill 114,391

Design fluency for frontend development. 1 skill with 24 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.

1 skill · 4 agents · hooks

pbakaus/impeccable 109,099

Maintain frontend-engineering?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins184 plugins