菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when the user wants to build, deliver, scaffold, or govern a software project with a rigorous spec-driven multi-agent process — e.g. "set up project factory", "build this to spec", "bring this repo under spec-driven delivery", "orchestrate the delivery", "run the factory", or hands over requirements/an RFP to turn into a working, QA-proven product. Drives the full lifecycle (requirements → OpenSpec specs → capability slices → test-first build → adversarial review → evals → QA proof → UAT) through deterministic gates, dispatching specialized subagents and workflows. Works on new (greenfield) and existing repos.
Use this skill to generate well-branded interfaces and assets for Надворі (Nadvori) / Weather Explorer — a calm, Ukrainian-first weather app — either for production or throwaway prototypes/mocks. Contains design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
| 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. |
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.
Reference this skill when:
--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.@/components/ds (core + weather) instead of building
new primitives. The full reference/UI kit is in docs/design-system/.prefers-reduced-motion. Dark theme is data-theme="dark".@/components/ds imports over new primitives.font-mono / tabular figures for every numeric value.| 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 |
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.
// Tailwind bridge (preferred)
<div className="bg-surface text-text border border-border rounded-lg">
<span className="text-brand font-mono tnum">82</span>
</div>
// CSS custom properties (when not bridged)
// e.g. shadow-[var(--shadow-md)]
/* Good */
color: var(--text);
background: var(--surface);
/* Avoid */
color: var(--slate-900);
<html lang="uk"> {/* light (default) */}
<html lang="uk" data-theme="dark"> {/* dark */}