| name | talkis-product-ui-style |
| description | Apply the Talkis Pure Thought product UI language to apps, dashboards, settings screens, auth flows, landing sections, and components. Use when a user asks to make an interface in Talkis style, says сделать интерфейс в стиле Talkis, применить Pure Thought UI, перенести этот стиль в другое приложение, port the Talkis visual system to another product, or align typography, colors, cards, navigation, CTAs, motion, and responsive behavior with Talkis. |
Talkis Product UI Style
Overview
Use this skill to translate the Talkis product style into practical UI decisions. Treat Talkis as
the reference product, but adapt the visual language to the target app instead of copying brand
content blindly.
Required Reference
Before changing UI, read references/talkis-product-ui.md. It contains the portable tokens,
component rules, layout patterns, motion guidance, and anti-patterns that define the style.
Workflow
- Identify the target surface: desktop app, settings screen, dashboard, auth flow, landing
section, or component.
- Inspect existing tokens, components, and layout conventions in the target codebase.
- Map the Talkis reference values to local variables/classes first. Add new styling only when
the target app has no suitable primitive.
- Apply the style narrowly to the requested surface. Preserve existing behavior, data flow,
routing, accessibility affordances, and framework conventions.
- Verify responsive fit, text overflow, hover/focus states, and that the result reads as a
product UI rather than a generic marketing page.
Talkis Repo Usage
In talkis-pc, treat rules/style.rule.md and src/index.css as the product style source of
truth. For React UI, prefer existing CSS variables and local inline-style conventions.
In talkis-web, reuse src/app/globals.css classes such as btn-black, btn-outline,
sticky-nav, dashboard classes, and type utilities before creating variants.
Keep rules/style.rule.md, this skill, and any installed copy in sync when changing the style
language.
Porting Outside Talkis
Use the Talkis language as a style archetype: warm cappuccino surfaces, black-and-white contrast,
bold neutral typography, light cards, sticky blur nav, pill CTAs, quiet dashboard density, and
restrained motion. Do not introduce Talkis brand copy, logos, or product claims unless the user
explicitly wants a Talkis-branded artifact.
Output Expectations
When delivering work, state which Talkis style primitives were applied and call out any local
deviations. For implementation tasks, include verification results for responsive layout and visual
states when feasible.
