MCPcopy Index your code
hub / github.com/toss/frontend-fundamentals

github.com/toss/frontend-fundamentals @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
1,431 symbols 3,341 edges 146 files 11 documented · 1% updated 4mo ago★ 1,97525 open issues
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

Frontend Fundamentals

Frontend Fundamentals

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/

🧭 When to Use

  • 🦨 When you're unsure about your code but find it hard to explain the issues logically
  • 🧯 When you're trying to debug a persistent frontend bug and want to double-check your fundamentals
  • 👥 When you're reviewing UI code for accessibility and want concrete do's and don'ts
  • 🛠️ When your team is setting shared standards for clean, robust frontend code

📚 Collections

Contributing

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.

License

MIT © Viva Republica, Inc. See LICENSE for details.

<img alt="Toss" src="https://static.toss.im/logos/png/4x/logo-toss.png" width="100">

Extension points exported contracts — how you extend this code

OneNavigationProps (Interface)
(no doc)
fundamentals/shared/components/react/OneNavigation.tsx
ImportMeta (Interface)
(no doc)
fundamentals/today-i-learned/src/vite-env.d.ts
ValidationResult (Interface)
(no doc)
frontend-fundamentals-plugin/eval/tasks/predictability/inconsistent-returns.tsx
NavItem (Interface)
(no doc)
fundamentals/shared/config/OneNavigationItems.ts
SprintDayItemProps (Interface)
(no doc)
fundamentals/today-i-learned/src/components/features/sprint/SprintDayItem.tsx
CartItem (Interface)
(no doc)
frontend-fundamentals-plugin/eval/tasks/predictability/use-cart.tsx
SprintDay (Interface)
(no doc)
fundamentals/today-i-learned/src/components/features/sprint/types.ts
UseCartReturn (Interface)
(no doc)
frontend-fundamentals-plugin/eval/tasks/predictability/use-cart.tsx

Core symbols most depended-on inside this repo

mapToBase
called by 63
.pnp.loader.mjs
mapToBase
called by 61
.pnp.cjs
makeCallback
called by 42
.pnp.loader.mjs
makeCallback
called by 42
.pnp.cjs
makeCallSync
called by 34
.pnp.cjs
useAuth
called by 32
fundamentals/today-i-learned/src/contexts/AuthContext.tsx
makeCallPromise
called by 29
.pnp.cjs
resolve
called by 28
.pnp.cjs

Shape

Method 629
Function 576
Interface 168
Class 58

Languages

TypeScript100%

Modules by API surface

.pnp.cjs662 symbols
.pnp.loader.mjs242 symbols
fundamentals/today-i-learned/src/api/remote/discussions.ts36 symbols
frontend-fundamentals-plugin/eval/tasks/coupling/dashboard-layout.tsx31 symbols
frontend-fundamentals-plugin/eval/tasks/coupling/use-dashboard.tsx22 symbols
fundamentals/today-i-learned/src/api/hooks/useDiscussions.ts21 symbols
fundamentals/today-i-learned/src/components/shared/ui/Toast.tsx15 symbols
fundamentals/today-i-learned/src/utils/errors.ts12 symbols
fundamentals/today-i-learned/src/components/shared/ui/AlertDialog.tsx10 symbols
frontend-fundamentals-plugin/eval/tasks/readability/notification-badge.tsx10 symbols
frontend-fundamentals-plugin/eval/tasks/coupling/props-drilling.tsx10 symbols
frontend-fundamentals-plugin/eval/tasks/cohesion/payment-flow/payment-utils.ts10 symbols

Dependencies from manifests, versioned

@amplitude/analytics-browser2.11.11 · 1×
@pandacss/dev1.3.1 · 1×
@radix-ui/react-alert-dialog1.1.15 · 1×
@radix-ui/react-slot1.2.3 · 1×
@tanstack/react-query5.81.2 · 1×
@testing-library/react16.3.0 · 1×
@testing-library/user-event14.6.1 · 1×
@types/jest30.0.0 · 1×
@types/node24.1.0 · 1×
@types/react18.2.43 · 1×
@types/react-dom18.2.17 · 1×

For agents

$ claude mcp add frontend-fundamentals \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact