agentskills.codes
RE

React + Ant Design Frontend

by daithang-organizationCodingSource

Provides structured guidance for the SE104_VLEAGUE frontend, including component patterns, API integration, and i18n.

FrontendDocumentationInternationalizationReactTypeScript

Install

mkdir -p .claude/skills/react-ant-design-frontend && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13899" && unzip -o skill.zip -d .claude/skills/react-ant-design-frontend && rm skill.zip

Installs to .claude/skills/react-ant-design-frontend

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Complete guide for the SE104_VLEAGUE React frontend — pages, services, components, auth flow, i18n, and patterns
112 charsno explicit “when” trigger
Intermediate

Key capabilities

  • →Provide guidance on SE104_VLEAGUE project structure
  • →Explain React routing for public and protected routes
  • →Detail Ant Design component usage and patterns
  • →Describe authentication flows including OAuth
  • →Configure i18n with Vietnamese and English translations
  • →Outline testing conventions for pages and services

How it works

The agent acts as a guide for the SE104_VLEAGUE React frontend, detailing its tech stack, project structure, routing, authentication, internationalization, and testing practices.

Inputs & outputs

You give it
a query about the SE104_VLEAGUE React frontend, its structure, components, or specific functionalities
You get back
information regarding project structure, tech stack, page routes, authentication, i18n, or testing conventions

When to use React + Ant Design Frontend

  • →Adding a new page component
  • →Configuring i18n translations
  • →Implementing API request interceptors
  • →Troubleshooting Ant Design components

About this skill

React + Ant Design Frontend Skill

Tech Stack

CategoryPackageVersion
UI FrameworkReact19.x
Component LibraryAnt Design6.x
Routingreact-router-dom7.x
HTTP ClientAxios1.x
i18ni18next + react-i18next25.x/16.x
ChartsRecharts3.x
Datedayjs1.x
PDF ExportjsPDF + jspdf-autotable4.x/5.x
Error Tracking@sentry/react10.x
BuildVite7.x
TestVitest + @testing-library/react4.x/16.x
TypeScript5.9

Project Structure

apps/web/src/
├── App.tsx                # Root routing (public + protected routes)
├── main.tsx               # Entry: Sentry, i18n, BrowserRouter, AuthProvider, ThemeProvider
├── auth/                  # AuthContext, RequireAuth, RequireRole, auth.types
├── components/            # Shared: ErrorBoundary, EventModal, ExportButton, ImageUpload, LoadingSkeleton, ScoreEditModal
├── lib/
│   ├── api.ts             # Axios instance with token refresh interceptor
│   └── i18n.ts            # i18next config (vi/en, localStorage detection)
├── locales/
│   ├── vi.ts              # Vietnamese translations (~1,244 lines)
│   └── en.ts              # English translations (~1,207 lines)
├── pages/                 # All page components (PascalCase)
│   ├── __tests__/         # Page component tests
│   ├── match-detail/      # MatchDetailPage sub-components
│   └── reports/           # ReportsPage tab sub-components
├── services/              # API service modules (camelCase)
│   └── __tests__/         # Service tests
├── shell/
│   ├── AppShell.tsx       # Protected layout (Sider + Header + Content)
│   ├── PublicLayout.tsx   # Public layout (gradient header + footer)
│   ├── ThemeContext.tsx    # Dark/light mode context
│   └── menu.ts            # Role-based menu items (12 items)
└── utils/
    └── constants.ts       # STATUS_MAP, EVENT_TYPE_MAP, POSITION_MAP, CAN_EDIT_ROLES

All Pages & Routes

Public (No Auth)

RouteComponentLoadDescription
/loginLoginPageEagerEmail/password + Google/Facebook OAuth
/registerRegisterPageEagerRegistration with password rules
/verify-emailVerifyEmailPageLazyOTP email verification with resend
/forgot-passwordForgotPasswordPageLazyRequest password reset OTP
/reset-passwordResetPasswordPageLazyReset password with OTP
/auth/oauth-callbackOAuthCallbackPageEagerOAuth redirect token processing
/403ForbiddenPageEagerAccess denied
*NotFoundPageLazy404 fallback

Public Layout (PublicLayout)

RouteComponentDescription
/public/standingsPublicStandingsPageLeague table (no auth)
/public/schedulePublicSchedulePageSchedule by round (no auth)
/public/resultsPublicResultsPageFinished results (no auth)

Protected (RequireAuth + AppShell)

RouteComponentRolesDescription
/DashboardPageAllStats cards, mini standings, upcoming/recent matches, season progress
/teamsTeamsPageAllCRUD team list with search, logo, stadium link
/teams/:idTeamDetailPageAllTeam info, roster, match history, standings
/playersPlayersPageAllCRUD player list, pagination, filters, CSV import
/players/:idPlayerDetailPageAllBio, stats (goals/cards), event timeline, goals-by-round chart
/stadiumsStadiumsPageADMIN (guard)CRUD stadium list — wrapped in RequireRole
/stadiums/:idStadiumDetailPageADMIN (guard)Stadium info, home teams, match history — wrapped in RequireRole
/scheduleSchedulePageAllGenerate/publish schedule, edit match details, grouped by round
/seasonsSeasonsPageADMIN (guard)CRUD seasons, team registration panel — wrapped in RequireRole
/matchesMatchesPageAllMatch list by round, detail modal, score edit, events, status transitions
/matches/:idMatchDetailPageAllScoreboard, events timeline, roster tabs, stat cards
/standingsStandingsPageAllFull standings with AFC CL/relegation highlights, top scorers, CSV export
/head-to-headHeadToHeadPageAllCompare two teams — wins/draws/goals + match history
/regulationsRegulationsPageADMIN (guard)CRUD regulations per season, seed defaults — wrapped in RequireRole
/reportsReportsPageAllTabs: Top Scorers, Card Stats, Team Stats, Charts — PDF/CSV export
/usersUsersPageADMIN (guard)User management (create/role/delete) — wrapped in RequireRole
/profileProfilePageAllView/edit profile, logout all
/change-passwordChangePasswordPageAllChange password form
/sessionsSessionsPageAllActive sessions, revoke individual/all

All Services & API Methods

authApi.ts (17 functions)

FunctionMethodEndpoint
apiLoginPOST/auth/login
apiRefreshPOST/auth/refresh
apiLogoutPOST/auth/logout
apiRegisterPOST/auth/register
apiVerifyEmailPOST/auth/verify-email
apiResendOtpPOST/auth/resend-otp
apiForgotPasswordPOST/auth/forgot-password
apiResetPasswordPOST/auth/reset-password
apiGetMeGET/auth/me
apiChangePasswordPOST/auth/change-password
apiLogoutAllPOST/auth/logout-all
apiUpdateProfilePATCH/auth/profile
apiGetSessionsGET/auth/sessions
apiRevokeSessionDELETE/auth/sessions/:id
apiSetPasswordPOST/auth/set-password
getGoogleAuthUrl—Returns /auth/google URL
getFacebookAuthUrl—Returns /auth/facebook URL

teamApi.ts

FunctionMethodEndpoint
apiGetTeamsGET/teams?page&limit&search&status
apiGetTeamGET/teams/:id
apiCreateTeamPOST/teams
apiUpdateTeamPATCH/teams/:id
apiDeleteTeamDELETE/teams/:id
apiGetStadiumsGET/stadiums

playerApi.ts

FunctionMethodEndpoint
apiGetPlayersGET/players?page&limit&search&position&nationality&teamId
apiGetPlayerGET/players/:id
apiCreatePlayerPOST/players
apiUpdatePlayerPATCH/players/:id
apiDeletePlayerDELETE/players/:id
apiImportPlayersCsvPOST/players/import (multipart FormData)

stadiumApi.ts

FunctionMethodEndpoint
apiGetStadiumsGET/stadiums
apiGetStadiumGET/stadiums/:id
apiCreateStadiumPOST/stadiums
apiUpdateStadiumPATCH/stadiums/:id
apiDeleteStadiumDELETE/stadiums/:id

seasonApi.ts

FunctionMethodEndpoint
apiGetSeasonsGET

Content truncated.

How it compares

This agent provides specific guidance for the SE104_VLEAGUE project, including its unique file structure and conventions, unlike general React or Ant Design documentation.

Compared to similar skills

React + Ant Design Frontend side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
React + Ant Design Frontend (this skill)05moReviewIntermediate
writing-registry-meta57moNo flagsBeginner
i18n52moNo flagsIntermediate
review-frontend03moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

More by daithang-organization

View all by daithang-organization →

API Documentation

daithang-organization

Swagger/OpenAPI setup and documentation patterns for SE104_VLEAGUE

00

You might also like

writing-registry-meta

siriwatknp

Use this skill when writing meta file for MUI Treasury registry.

587

i18n

lobehub

Internationalization guide using react-i18next. Use when adding translations, creating i18n keys, or working with localized text in React components (.tsx files). Triggers on translation tasks, locale management, or i18n implementation.

533

review-frontend

OpenAEV-Platform

>-

00

tsx

javimosch

TSX namespace for Netsnek e.U. TypeScript component toolkit. React component scaffolding, type-safe props, Storybook integration, and component docs.

00

add-locale

yhk1038

Add a new UI language/locale to the claude-code-gui webview i18n system, or extend/verify an existing one. Walks a contributor (or agent) through creating the per-namespace translation JSON files, registering the locale, and verifying parity — consistently with how the shipped locales are structured

00

new-component

7sferry

Scaffold a new React component following project conventions

00

Search skills

Search the agent skills registry