Menu
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.
| name | eduhub-design |
| description | 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. |
| user-invocable | true |
Read the README.md file within this skill, and explore the other available files.
Key files:
README.md — product context, content & visual rules, iconography, full manifest.colors_and_type.css — all color + type tokens as CSS custom properties (plus helper classes).assets/ — real logos (opencampus ring mark + EduHub wordmark), hero/coworking imagery,
monochrome course icons, social icons, favicon.preview/ — small spec cards showing colors, type, components and brand at a glance.ui_kits/web/ — a high-fidelity, interactive React recreation of the EduHub web app; lift
components (course tiles, header, buttons, course detail) from here.If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, copy assets and read the rules here to become an expert in designing with this brand.
Core brand reminders: single typeface Space Grotesk (medium weight default); dark
charcoal surfaces (#222/#0F0F0F) with content cards flipping to white (.light); one
accent — teal-green #00A398; pill buttons with a 2px border that turns teal on hover;
rounded-2xl photo cards with a diagonal protection gradient; full-bleed duotone photography;
restrained motion; no emoji in the UI. Voice is direct, energetic and learner-focused
("Start Hacking Your Life"), bilingual EN/DE.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.
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.
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.
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.