| name | themis-ui-prototype |
| description | Author and preview Themis UI prototypes against the live Catalyst token set before implementation. Use this skill to compose a screen in HTML + Tailwind v4 utilities, render it in the local ui-designer preview server, and validate it across mobile, tablet, and desktop viewports in light and dark mode. |
| license | MIT |
| compatibility | opencode |
| metadata | {"audience":"designers, frontend engineers","workflow":"prototype"} |
Themis UI Prototype
Author Themis prototypes that consume the live Catalyst Tailwind v4 token set and preview them at http://localhost:4300/preview/<slug> before any Angular code lands.
What I do
- Compose a screen as a single self-contained HTML file under
apps/web/ui-designer/src/prototypes/<slug>.html.
- Reuse the Themis tokens by linking
/public/tailwind.css (the locally built stylesheet that imports styles.base.css + Tailwind utilities).
- Run
pnpm nx serve ui-designer to expose the preview server at http://localhost:4300/ with the index, manifest, and preview routes.
- Preview at
?viewport=mobile|tablet|desktop and toggle ?theme=dark on the iframe frame URL.
- Capture screenshots at the three viewport presets with the
ui-screenshots skill.
- Review visual polish with the
web-design-reviewer skill.
- Polish typography and remove AI tells with the
impeccable-design-polish skill.
When to use me
Use this skill when a brief asks for a new Themis screen, an alternative layout for an existing route, or a quick visual exploration that should not yet touch the Angular app. Do not use it for production code in apps/web/app — that flows through the Angular component API and the shared/ui primitives.
How to use
Step 0 — Read the contracts
Step 1 — Pick a slug
Use kebab-case. Examples: app-auth-shell, project-list-empty-state, sign-up-with-otp. The slug becomes the filename and the preview URL path segment.
Step 2 — Author the prototype
Create apps/web/ui-designer/src/prototypes/<slug>.html. The file must:
- Link the locally built stylesheet:
<link rel="stylesheet" href="/public/tailwind.css" />.
- Use Tailwind utilities only. No raw hex colors. No
bg-[#…] arbitrary values for token colors.
- Apply mobile-first spacing and scale up at
md: and lg:.
- Use semantic HTML5 elements (
<main>, <article>, <header>, <form>, <button type="submit">).
- Reach for
min-h-11 min-w-11 (44px) on every touch target.
- Skip
data-slot and data-od-id — those are for Angular e2e hooks, not prototypes.
See references/tokens-cheatsheet.md for the minimal token table and references/auth-shell-template.html for a worked example.
Step 3 — Preview
pnpm nx run ui-designer:build-css --skip-nx-cache
pnpm nx serve ui-designer
Open:
http://localhost:4300/ — prototype index.http://localhost:4300/preview/<slug>?viewport=mobile — first visual check.http://localhost:4300/preview/<slug>?viewport=tablet — second.http://localhost:4300/preview/<slug>?viewport=desktop — third.
Toggle dark mode by replacing the iframe src with /preview/<slug>/frame?theme=dark. The chrome toolbar has a button that does this without leaving the page.
Step 4 — Capture and review
Use the ui-screenshots skill to capture screenshot-<slug>-mobile.png, screenshot-<slug>-tablet.png, and screenshot-<slug>-desktop.png in both light and dark themes. Run the web-design-reviewer skill against the desktop screenshot for hierarchy, contrast, and breakpoint checks. Run impeccable-design-polish for the typography + AI-tell pass.
Step 5 — Promote to Angular
Once approved, port the prototype into the Angular app:
- Create the route under
apps/web/app/src/app/<feature>/.
- Replace raw Tailwind classes with the matching
shared/ui primitives where one exists (app-button, app-input, app-card, etc.).
- Wire real data through the Angular signal / RxJS pipeline.
- Add Playwright snapshots + AXE checks under
apps/web/app-e2e/.
- Update
docs/design-system/recipes.md if the new screen introduces a reusable pattern.
Do not commit the prototype HTML once the Angular version ships — the prototype is a transient artifact. Keep it locally if it is useful as a regression reference.
Hard rules
- Mobile-first. Authoring starts at 375px and scales up.
- Tailwind utilities only. No custom CSS classes, no semantic BEM names.
- No raw hex colors. Reach for the built-in palette (
bg-white, bg-zinc-50, bg-blue-600, text-zinc-950, etc.) until the Catalyst semantic tokens land in styles.base.css.
- 44px touch targets via
min-h-11 min-w-11.
- Respect
prefers-reduced-motion for any animation you add.
- The prototype HTML must be standalone: it links
/public/tailwind.css and contains its own chrome. Do not rely on Angular components or PrimeNG.
Common anti-patterns
- Hard-coded breakpoints (
@media (min-width: 768px)) — use Tailwind's md: variant instead.
- Decorative gradients, glow shadows, or generic "feature card" grids.
- Placeholder copy like
Lorem ipsum, Feature One, Click here.
- Inverted or muted link colors without an underline — links must be obvious.
<button> without type="button" or type="submit" (default submit on a form causes surprises).
Reference
