// Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types.
| name | frontend-conventions |
| description | Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types. |
| license | Apache-2.0 |
Use this skill when:
Place code at the lowest appropriate layer:
| Layer | Path | Purpose |
|---|---|---|
| Pages | web/src/pages/ | Route-level page components |
| Features | web/src/features/ | Business features (search, upload, review, etc.) |
| Entities | web/src/entities/ | Domain entity display logic (skill, user, namespace) |
| Shared | web/src/shared/ | Reusable UI components, hooks, utilities |
Current features:
admin — Admin panel (user management, labels, search)auth — Login, OAuth flows, device authgovernance — Skill governance actions (hide, yank, archive)namespace — Namespace management (members, settings)notification — User notifications and inboxpromotion — Skill promotion between scopespublish — Skill upload/publish UIreport — Skill reportingreview — Review workflow UIsearch — Skill search and filteringsecurity-audit — Security audit viewerskill — Skill detail, listing, cardssocial — Stars, ratings, subscriptionstoken — API token management@tanstack/react-query) for server state.useEffect for data fetching.openapi-fetch client with generated types from web/src/api/generated/schema.d.ts.any types.@radix-ui/react-dropdown-menu, @radix-ui/react-selectcn() utility: web/src/shared/lib/utils.tsWhen backend OpenAPI contracts change:
make generate-api
This runs openapi-typescript http://localhost:8080/v3/api-docs -o src/api/generated/schema.d.ts.
Commit the updated web/src/api/generated/schema.d.ts with the PR.
To verify the generated file is not stale:
./scripts/check-openapi-generated.sh
cn() utility for conditional class mergingweb/src/shared/components/web/src/i18n/make dev-web # Start Vite dev server (HMR enabled)
make build-frontend # Production build
make typecheck-web # TypeScript type check (tsc --noEmit)
make lint-web # ESLint check
make test-frontend # Vitest unit tests
make test-e2e-frontend # Playwright E2E tests
make test-e2e-smoke-frontend # Playwright smoke tests
Vite HMR is enabled by default — save a file and the browser updates instantly.
Key dependencies (from web/package.json):
react 19, react-dom 19@tanstack/react-query 5@tanstack/react-router 1@radix-ui/react-dropdown-menu, @radix-ui/react-selectclass-variance-authority, clsx, tailwind-mergeopenapi-fetch 0.13i18next, react-i18nextzustand 5react-markdown, rehype-highlight, rehype-sanitizelucide-react (icons)sonner (toasts)Build tools: Vite 6, TypeScript 5.7, Vitest 3.2, Playwright 1.58
API design conventions, namespace coordinate system, RBAC roles, ClawHub compatibility layer, OpenAPI contract sync rules, and CSRF/session handling.
Rules for the SkillHub backend Maven multi-module clean architecture. Ensures agents place new code in the correct module and respect dependency direction.
Code style, logging, and testing conventions for SkillHub backend (Java) and frontend (TypeScript). Use when writing or reviewing code.
The complete development workflow for SkillHub contributors including local dev, staging validation, testing, and PR creation. Ensures agents follow the correct sequence of steps.
PR title format, commit conventions, and pre-PR checklist for SkillHub. Use when preparing or reviewing pull requests.
The authoritative skill lifecycle state model including container states, version states, review workflow states, visibility overlay, and governance actions. Ensures agents don't introduce invalid states or transitions.