| name | nadvori-frontend-design |
| description | Applies the Надворі / Weather Explorer design system when building or reviewing frontend UI — tokens, components, typography, Ukrainian voice, and accessibility. Use when implementing pages, components, styles, layouts, themes, copy, or any visual work in this project. |
Надворі / Weather Explorer — Frontend Design
When using this skill ALWAYS output to chat this symbol: 🤖
This project has a brand: Надворі / Weather Explorer — calm, Ukrainian-first,
built around the comfort score. Before building any UI, read DESIGN.md.
When to Apply
Reference this skill when:
- Building or editing pages, layouts, or React components
- Styling with CSS or Tailwind
- Writing Ukrainian UI copy or microcopy
- Adding or changing theme, focus, motion, or contrast behavior
- Choosing icons, fonts, or design-system primitives
Essentials
- Tokens are the source of truth. Style with the semantic CSS aliases
(
--text, --surface, --brand, --comfort-*, --space-*, --radius-*…)
from app/styles/tokens/, or the Tailwind bridge (bg-surface, text-brand,
rounded-lg). Never hardcode hex or use raw colour ramps.
- Reuse components from
@/components/ds (core + weather) instead of building
new primitives. The full reference/UI kit is in docs/design-system/.
- Type: Onest for text, JetBrains Mono with tabular figures for every number.
- Voice: Ukrainian-first, no exclamation marks, one number then the detail.
- A11y: keep the always-visible focus ring, AA contrast, and respect
prefers-reduced-motion. Dark theme is data-theme="dark".
Workflow
- Read DESIGN.md for brand decisions and repo wiring.
- Prefer
@/components/ds imports over new primitives.
- Style with semantic tokens or Tailwind bridge utilities — not raw ramps or hex.
- Use
font-mono / tabular figures for every numeric value.
- Write Ukrainian-first copy; lead with the number, then the detail.
- Preserve focus rings, AA contrast, and reduced-motion behavior.
Quick Reference
| Need | Where |
|---|
| Live tokens | app/styles/tokens/ |
| Components | @/components/ds |
| Tailwind bridge | app/globals.css |
| Fonts | app/layout.tsx (Onest + JetBrains Mono) |
| Full UI kit & guidelines | docs/design-system/ |
| Brand decision record | DESIGN.md |
Component imports
import { Button, Card, ComfortBadge, DayCard } from "@/components/ds";
Core: Button, IconButton, Input, Switch, Tabs, Badge, Card, Chip, Icon
Weather: ComfortBadge, DayCard, ConditionIcon, Clock, CityResult
Weather conditions must use ConditionIcon — do not pick Lucide icons ad hoc.
Token usage
<div className="bg-surface text-text border border-border rounded-lg">
<span className="text-brand font-mono tnum">82</span>
</div>
color: var(--text);
background: var(--surface);
color: var(--slate-900);
Theming
<html lang="uk"> {}
<html lang="uk" data-theme="dark"> {}
Additional Resources
