| name | ksef-hub-design |
| description | Use this skill to generate well-branded interfaces and assets for KSeF Hub (a microservice for Poland's Krajowy System e-Faktur), either for production or throwaway prototypes/mocks/slides. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping the Phoenix/LiveView admin and its marketing surfaces. |
| user-invocable | true |
KSeF Hub design skill
Read the docs/design_system/README.md file within this project, and explore the other available files.
docs/design_system/colors_and_type.css has every design token (shadcn-style custom properties + brand accent, light/dark).docs/design_system/brand/ has the working logo (mark + wordmark) and naming alternatives.docs/design_system/preview/ has small specimen cards -- good references when building new components.docs/design_system/ui_kits/admin/ is a fully-wired LiveView admin recreation: app shell, invoices list, invoice detail, dashboard, settings, login. Read its JSX components (Primitives.jsx, AppShell.jsx, etc.) -- they are the source of truth for component visuals and API.docs/design_system/assets/ holds patterns/icons referenced by the kits (Heroicons is CDN-linked).
If creating visual artifacts (slides, mocks, throwaway prototypes, etc.), copy assets out and create static HTML files for the user to view. Load docs/design_system/colors_and_type.css from any HTML you produce and everything else will fall into place visually.
If working on production code, read docs/design_system/README.md to internalize the rules (voice, iconography, status vocabulary, layout) and use the tokens already shipped in assets/css/app.css of the real codebase.
If the user invokes this skill without any other guidance, ask them what they want to build or design. Then ask clarifying questions:
- Which surface? (admin UI, marketing landing, docs, slides, one-off mock)
- EN or PL copy?
- Light/dark/both?
- Any specific screens or flows?
Then act as an expert designer who outputs HTML artifacts or production code, depending on the need. Match the existing voice: dry, technical, infrastructure-grade (Stripe/Linear). Never invent new color ramps; always reach for the tokens. Never use emoji except on category badges. Keep the admin flat -- no gradients, no shadows on content cards, borders at 1px.
