Run any Skill in Manus with one click

frontend-patterns

Stars14

Forks8

UpdatedApril 24, 2026 at 10:04

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

eduhub-org

eduhub-org/eduhub

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

3 files

SKILL.md

readonly

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.

Frontend Patterns

Use this skill for frontend component and page work in frontend-nx/apps/edu-hub.

Core Rules

organize code by feature, not by generic technology buckets
check existing shared components before creating a new one
prefer composition and small focused hooks over large monolithic components
keep user-facing text in translations, not inline strings
make layouts and interactions work on mobile as well as desktop

Reuse First

Before creating new UI, check:

components/common/
components/common/dialogs/
components/inputs/
components/common/TableGrid/

Common existing building blocks include:

ErrorMessageDialog
QuestionConfirmationDialog
NotificationSnackbar
CreatableTagSelector
DropDownSelector
InputField
TableGrid

Component Structure

keep feature code near the feature it serves
extract complex logic into a custom hook when the component becomes hard to read
avoid deep component nesting and broad prop drilling
use TypeScript interfaces for props

Translations

German must use the informal "Du" form.

Keep translations in frontend-nx/apps/edu-hub/locales/ and add new keys to both:

de.json
en.json

Read references/translations.md for naming and enum-key rules.

TableGrid

Use the shared TableGrid rather than reinventing table behavior.

Read references/tablegrid.md when:

adding a new table
configuring columns
wiring search or pagination
deciding between table and mobile-card presentation

Responsive Behavior

start from the smallest useful layout first
ensure tap targets and action visibility remain usable on mobile
when dense tables become unreadable on mobile, consider a card-like representation instead of forcing every desktop column into view

Output Style For This Skill

When making frontend changes, mention the existing components or patterns you reused before creating anything new.

More from this repository

same repository

pencil-design

eduhub-org/eduhub

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.

2026-06-1214

cursor-browser

eduhub-org/eduhub

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.

2026-06-0414

eduhub-design

eduhub-org/eduhub

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.

2026-06-0414

conventional-commits

eduhub-org/eduhub

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.

2026-06-0114

create-project-issue

eduhub-org/eduhub

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.

2026-05-1914

create-migration

eduhub-org/eduhub

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.

2026-04-2414

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.

Frontend Patterns

Use this skill for frontend component and page work in frontend-nx/apps/edu-hub.

Core Rules

organize code by feature, not by generic technology buckets
check existing shared components before creating a new one
prefer composition and small focused hooks over large monolithic components
keep user-facing text in translations, not inline strings
make layouts and interactions work on mobile as well as desktop

Reuse First

Before creating new UI, check:

components/common/
components/common/dialogs/
components/inputs/
components/common/TableGrid/

Common existing building blocks include:

ErrorMessageDialog
QuestionConfirmationDialog
NotificationSnackbar
CreatableTagSelector
DropDownSelector
InputField
TableGrid

Component Structure

keep feature code near the feature it serves
extract complex logic into a custom hook when the component becomes hard to read
avoid deep component nesting and broad prop drilling
use TypeScript interfaces for props

Translations

German must use the informal "Du" form.

Keep translations in frontend-nx/apps/edu-hub/locales/ and add new keys to both:

de.json
en.json

Read references/translations.md for naming and enum-key rules.

TableGrid

Use the shared TableGrid rather than reinventing table behavior.

Read references/tablegrid.md when:

adding a new table
configuring columns
wiring search or pagination
deciding between table and mobile-card presentation

Responsive Behavior

start from the smallest useful layout first
ensure tap targets and action visibility remain usable on mobile
when dense tables become unreadable on mobile, consider a card-like representation instead of forcing every desktop column into view

Output Style For This Skill

When making frontend changes, mention the existing components or patterns you reused before creating anything new.