메뉴
Apply EduHub frontend conventions for components, layout, translations, TableGrid usage, and responsive behavior. Use when creating or refactoring frontend components or pages in the Next.js app.
| name | frontend-patterns |
| description | Apply EduHub frontend conventions for components, layout, translations, TableGrid usage, and responsive behavior. Use when creating or refactoring frontend components or pages in the Next.js app. |
Use this skill for frontend component and page work in frontend-nx/apps/edu-hub.
Before creating new UI, check:
components/common/components/common/dialogs/components/inputs/components/common/TableGrid/Common existing building blocks include:
ErrorMessageDialogQuestionConfirmationDialogNotificationSnackbarCreatableTagSelectorDropDownSelectorInputFieldTableGridGerman must use the informal "Du" form.
Keep translations in frontend-nx/apps/edu-hub/locales/ and add new keys to both:
de.jsonen.jsonRead references/translations.md for naming and enum-key rules.
Use the shared TableGrid rather than reinventing table behavior.
Read references/tablegrid.md when:
When making frontend changes, mention the existing components or patterns you reused before creating anything new.
Inspect UI via cursor-ide-browser (Cursor Browser tab); fall back to user-playwright if internal browser MCP is unavailable. Use for @Browser, open tab, layout checks, localhost — or when user explicitly asks for Playwright.
Use this skill to generate well-branded interfaces and assets for EduHub by opencampus.sh, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
Draft and review EduHub commit messages using the repository's conventional-commit and semantic-release workflow. Use when writing commit messages, choosing feat vs fix vs chore, deciding whether a body is needed, preparing merge commit messages, or explaining release impact.
Work with Pencil .pen design files via the Pencil MCP (batch_design, variables, guidelines). Use when creating or editing .pen files, exploring UI layouts in Pencil, generating wireframes for EduHub, or when the user mentions Pencil, .pen, or the highagency Pencil extension.
Create a GitHub issue on eduhub-org/eduhub and add it to the "EduHub Development" project board with a chosen Status (Backlog / Todo / In Progress / Done). Use when the user asks to "create an issue", "file a ticket", "add to backlog", or otherwise wants a new issue tracked on the project board.
Create and review EduHub Hasura schema migrations. Use when adding tables, columns, constraints, relationships, or other database schema changes, and when coordinating the required metadata, query, type-generation, and function follow-up steps.