skills.rest
IagoPrandi
IagoPrandiCOMMUNITY
Explore all skills by this author →
GitHub

tyche-ui-coherence

Validates Tyche UI changes against the existing design system before implementation.

Updated Jun 2, 2026
Search Tags:#mobile-first#design system#css#next.js#visual identity#ui consistency#frontend review
One-click install
npx skills add https://github.com/IagoPrandi/ai-dealer --skill tyche-ui-coherence-iagoprandi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tyche-ui-coherence
Source: https://github.com/IagoPrandi/ai-dealer/tree/main/.claude/skills/tyche-ui-coherence
Command: npx skills add https://github.com/IagoPrandi/ai-dealer --skill tyche-ui-coherence-iagoprandi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? UI changes in the Tyche app often drift from the established visual identity, introducing one-off colors, fonts, shadows, or layouts that break consistency across screens. This Skill acts as a guardrail that forces every UI/UX change to be checked against the canonical design system before code is edited. ## Core Features & Use Cases - Design-System Gate: Requires consulting the tyche-design-system references (tokens.css, components.md, screens.md, HTML screen sources of truth) before any UI edit, including small copy or spacing changes. - Elevation and Outline Contract: Enforces rules for inset ring box-shadows, hard cyan offsets on featured rows, and soft halos on panels so shadows are never replaced or clipped incorrectly. - Divergence Gates and Checklist: Provides stop conditions and a delivery checklist covering identity, layout, states, and verification at mobile-first breakpoints (320-430px, 768px, desktop). - Use Case: When adding a new screen or fixing a visual bug in the Next.js app, use this Skill to identify the closest existing pattern, reuse its tokens and components, verify mobile rendering, and record the reference pattern in the PR description. ## Quick Start Use the tyche-ui-coherence skill to review my planned changes to the Vote screen before I edit any TSX or CSS.

Frequently Asked Questions about tyche-ui-coherence

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep new UI consistent with an existing design system?▼

Identify the closest established screen or component pattern first, then reuse its tokens, geometry, typography, and interaction treatment. Only introduce a new visual solution after confirming the existing pattern cannot serve the need, and document any intentional divergence.

How to review a frontend PR for visual consistency?▼

Load the ui-coherence-checklist reference and verify identity, layout, states, and verification items. Check that colors use existing tokens, shapes match established components, mobile breakpoints render without clipping, and the PR description records the reference pattern used.

Does this apply to small UI changes like copy or spacing fixes?▼

Yes, the design-system gate applies to every UI/UX change including visual bug fixes, layout or spacing adjustments, responsive changes, and text or copy changes. A small change is explicitly not an exception.

What box-shadow rules apply when adding elevation to components?▼

Every outlined surface must keep its inset ring as the first box-shadow layer, and new shadows extend the stack rather than replace it. Hard cyan offsets mark selected or actionable rows, while soft halos give containing panels depth, and CSS border must not substitute for the ring.

When should I not introduce a new component or design token?▼

Add a new component only when reuse would make code harder to understand or the pattern will repeat. Add a new token or class only when no existing token can express the needed state, and document the reason.

Related Skills

Explore More Design & Creative Skills→
laicluselaicluse
4

art-director

Define brand identity, visual language, and design-system architecture before UI implementation.

Official
Advanced
vitalliumvitallium
10

ce-demo-reel

Automate capture of GIFs, terminal reels, or screenshot reels for PR descriptions.

Community
Advanced
range-etrange-et

quieter

Desaturate colors, refine typography, and reduce motion in UI designs.

Community
Advanced
cartridge-ggcartridge-gg
80

update-storybook-snapshots

Update Storybook visual regression snapshots after intentional UI changes.

Official
Intermediate