Refactor React, TypeScript, and JavaScript code to enforce frontend best practices: improve cohesion by grouping related files and constants, reduce coupling via composition, ensure predictability with unified returns and no side effects, and enhance readability by simplifying conditions and ternaries. Review git branch diffs against these principles.
Use when ํ ๊ธฐ๋ฅ ์์ ์ ์ฌ๋ฌ ๋๋ ํ ๋ฆฌ๋ฅผ ๊ฑด๋๋ฆฌ๊ฑฐ๋, ๊ฐ์ ์ซ์/์์๊ฐ ์ฌ๋ฌ ํ์ผ์ ํฉ์ด์ ธ ์๊ฑฐ๋, import ๊ฒฝ๋ก๊ฐ `../../..`์ฒ๋ผ ๊ธธ์ด์ง ๋
Use when props๊ฐ 3๊ฐ ์ด์ ์ปดํฌ๋ํธ ๊ณ์ธต์ ํต๊ณผํ๊ฑฐ๋, ํ๋์ Hook์ด 5๊ฐ ์ด์ ๊ฐ์ ๋ฐํํ๊ฑฐ๋, A ์์ ์ ๊ด๋ จ ์๋ B๊ฐ ๊นจ์ง ๋
Use when `getX()`๋ `fetchX()`์ ์จ์ ๋ถ์ ํจ๊ณผ๊ฐ ์๊ฑฐ๋, ๊ฐ์ ์ข ๋ฅ์ ํจ์๋ค์ด ์๋ก ๋ค๋ฅธ ๋ฐํ ํ์ ์ ๊ฐ์ง๊ฑฐ๋, ํจ์ ์ด๋ฆ๊ณผ ์ค์ ๋์์ด ๋ค๋ฅผ ๋
Use when ์ผํญ ์ฐ์ฐ์๊ฐ ์ค์ฒฉ๋๊ฑฐ๋, ๋ณต์กํ ์กฐ๊ฑด์ `a && !b || c`๊ฐ ์ด๋ฆ ์์ด ์ฌ์ฉ๋๊ฑฐ๋, ๋์์ ์คํ๋์ง ์๋ ์ฝ๋๊ฐ ํ ์ปดํฌ๋ํธ์ ์์ฌ ์์ ๋
Essential principles for frontend development
Frontend Fundamentals (FF) is a growing collection of essential principles for building reliable, maintainable, and accessible frontend applications. It helps you answer common but tricky questions like how to judge code quality, why bundling behaves differently in dev vs. production, how screen readers interpret your UI, and how to debug efficiently.
https://frontend-fundamentals.com/code-quality/en/
Frontend Fundamentals (FF) is a community-driven project to establish standards for writing good code.
If you have a piece of code you're unsure about, post it on the GitHub Discussions page.
The community can provide diverse reviews of your code, helping you and others think critically about what makes good code.
Highly supported cases may even make it into the Frontend Fundamentals documentation. Contribution guidelines will be announced soon.
MIT ยฉ Viva Republica, Inc. See LICENSE for details.
Uses power tools
Uses Bash, Write, or Edit tools
Based on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub toss/frontend-fundamentals --plugin frontend-fundamentalses-toolkit best practices: function recommendation, lodash migration, and compat guidance
tossReact design philosophy for abstraction design, hook review, and hook writing. Covers declarative APIs, lifecycle safety, SSR, state design, effect patterns, TypeScript, and performance.
tossAudit and improve front-end usability using 15 established design principles. Acts as a Senior UX designer/engineer reviewing your interface end-to-end.
mistyhxReact/TypeScript frontend + Go backend enforcement harness. 92 wired hooks across 101 scripts enforce patterns on every edit. Green != done: `test-warning-check` surfaces warnings on passing test/lint/type runs (DeprecationWarning, React `act()`, unhandled rejection, `@ts-ignore`); `ci-warning-audit` Stop-hook scans `gh run view --log` on green CI for deprecations / console warnings / skipped tests. 66 skills from TDD through CI-green PR, including /steelman anti-sycophancy guard + /snyk-ux-security per-path vuln sweep (JS + Go ecosystems; exploitability-triage first gate via `bun why`/`go mod why`/`govulncheck`; top-level direct dep bump first, parent dep bump second, resolutions/overrides/replace as last resort only with follow-up TODO to remove; React 18 pin + changelog-walked major bumps + no-deferral escalation; Go `snyk test --file=go.mod` + `go get -u` + `go mod tidy` + `govulncheck` verify). Session exit blocked while PR review threads remain unresolved. TypeScript escape hatches blocked at Edit. tsconfig strictness weakening blocked. Worktree isolation + branch safety hook-enforced. bun.lock + yarn.lock parity enforced (Snyk IO doesn't parse bun.lock). 21 LLM failure modes enforced: 7 Karpathy single-agent + 14 MAST multi-agent (Cemri et al. NeurIPS 2025). OWASP + STRIDE subset + snyk/bun audit. Core Web Vitals perf gate. MCP ban with CLI redirect (~20x token savings). Agent-browser wrap (~91% token reduction for AI browsing). 3-hat plan review (product/engineering/design). 9 agents (adds plan hats + karpathy reference), 5 routines. Opus 4.7 tuned, POSIX-friendly.
redpanda-dataFrontend platform discipline: CSS, Tailwind CSS v4, accessibility, and browser-specific practices
xobotyiFrontend component development with accessibility and responsive design
rohitg00Shared Claude Code plugin for frontend teams, including frontend skills, subagents, hooks, and MCP integration for Figma/Sketch/MasterGo/Pixso/ๅขจๅ/ๆนๅฎข. All reports auto-saved as Markdown files.
bovinphangComprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
JeffallanOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claim