skills.rest
palfish-t-i-u
palfish-t-i-uOFFICIAL
Explore all skills by this author →
GitHub

frontend-conventions

Enforces React frontend architecture conventions for the PalFish GMV Manager app.

1|Updated May 23, 2026
Search Tags:#typescript#react#supabase#rbac#design tokens#code splitting#frontend conventions
One-click install
npx skills add https://github.com/palfish-t-i-u/palfish-t-i-u-h-th-ng-ver-2 --skill frontend-conventions-palfish-t-i-u
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-conventions
Source: https://github.com/palfish-t-i-u/palfish-t-i-u-h-th-ng-ver-2/tree/main/.claude/skills/frontend-conventions
Command: npx skills add https://github.com/palfish-t-i-u/palfish-t-i-u-h-th-ng-ver-2 --skill frontend-conventions-palfish-t-i-u

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents inconsistent frontend changes in the PalFish GMV Manager React 19 app by codifying the ViewId/tab wiring, API call patterns, design tokens, auth handling, and mandatory terminology rules that every new screen or component must follow. ## Core Features & Use Cases - Screen wiring checklist: Step-by-step procedure for adding a new tab — ViewId union, lazyRetry import, PRELOAD_MAP, TITLES, renderActiveView case, nav item, and RBAC permission key registration. - API and error conventions: Rules for the axios singleton in api.ts, snake_case/camelCase boundary, endpoint prefix rules, and formatApiError usage. - Design tokens and gotchas: gmv-* token usage, light-mode enforcement, orphaned components, and documented past incidents (mock notification fallback, chunk-load failures, cross-PR drawer bug). - Use Case: When asked to add a new admin settings screen, follow the skill to wire the ViewId, permission key, sidebar item, and lazy import correctly, then validate with npx tsc -b. ## Quick Start Ask the AI to add a new settings tab to the frontend following the frontend-conventions skill and run the Tier 1 typecheck.

Frequently Asked Questions about frontend-conventions

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

FAQPage Schema
How do I add a new screen or tab to a React app with ViewId navigation?▼

Add the ViewId string to the union type in MainPage.tsx, create a lazyRetry import, optionally register it in PRELOAD_MAP, add a TITLES entry and a renderActiveView case, then add a nav item guarded by a permission key registered in MODULE_LIST and DEFAULT_PERMISSIONS.

How should API calls be structured in a React TypeScript frontend?▼

Route all calls through a single axios instance with a Bearer token interceptor, defining endpoints in one api.ts module. Use snake_case for request bodies and raw API responses, converting to camelCase frontend types in utility files.

Why does tsc --noEmit pass but the Vercel build fail?▼

Vercel runs tsc -b with project references, which is stricter than tsc --noEmit. Always validate with npx tsc -b before pushing to match the deployment build exactly.

Why do users see stale mock notifications in the app?▼

The useNotifications hook falls back to MOCK_NOTIFICATIONS on any 404, 500, or network error from the notifications endpoint. This happens when the notifications table migration, which lives outside the numbered migration sequence, was never applied.

When should this frontend conventions skill not be used?▼

Do not use it for FastAPI backend work, Zalo OA or DingTalk notification wiring, or database migrations — those are covered by separate dedicated skills. It applies only to the React frontend layer.

Related Skills

Explore More Software Engineering Skills→
arakitakashiarakitakashi
1

Local Development Skill

Set up and launch the homework-coach-robo local environment with Docker Compose or direct execution.

Community
Intermediate
ncukondoncukondo
5

review-task

...

Community
Intermediate
KrosebrookKrosebrook

Next.js + FastAPI Full-Stack Expert

Integrate Next.js frontends with FastAPI backends for full-stack applications.

Community
Intermediate
pau-vegapau-vega

react-router-v7

Guide React Router v7 data-driven routing with loaders, actions, and nested routes.

Community
Advanced