cheliknagite/nucifera

A design skill for Claude Code. It makes Claude design interfaces in one precise style, in the line of Linear, Raycast and Reflect: a monochrome dark theme and a light "Dusk" theme with a violet accent, and it checks the rendered screens before handing them over.
> Named after Cocos nucifera, the coconut palm: a dark shell with a light inside, like the two themes. Status: 0.4.3, early. See "What it does not promise".
## What it does
Starts with a scene, not a template. Before any code Claude writes to .design/DESIGN.md: who looks at the screen and where, the direction, the accent, one signature element taken from the subject's own world (a paint-thickness map for a car inspection, an appointment book for a barbershop), what must be visible on the first screen, and a motion map: every change of state with its recipe.
Builds from a closed set of tokens and components. tokens.css defines both themes by role (surfaces, lines, text, accent, main action); kit.css has about fifteen components (rows, hero card, stat, chips, fields, key-value, states). No raw colours in screens.
Gives each screen a face. Before building, Claude names what makes the screen unlike any other product's and reads two reference cards for that screen type next to a "generic twin": how a default generator would build the same content. The cards describe real products (what they measure, what to take, what not to copy) as text only.
Moves with intent, in two tempos. Frequent things move at the speed of shipped products (menus in 240 ms); rare moments get a calm tempo. Ready recipes in kit.css and motion.js: presses that answer, menus that grow from their trigger, a sliding selection, sheets you can drag away, toasts, screen changes with direction, a waiting ladder that never flickers. Seven moments, at most one per screen: a photo that grows into its detail, the signature arriving once, a number that settles after an action, a success check, one pass of light over the main button, a landing's live product window, and on websites a window that pours out of the element you clicked and back into it, like the Mac genie. Prices and results never wait for an animation, and reduced motion keeps the meaning.
Reads without effort. Body text 16px, secondary text 14px in one grey, data as plain label-value lists instead of boxes and grids, a status shown only when it is the exception, drawings that need no legend.
Names the AI tells and what to do instead. Sixteen rules in the core and a dated list of 41 in the references: no coloured glows, no gradient buttons, no decorative dots, no small grey text in several shades, no data cut into boxes, no eyebrow labels on every heading, no washed-out photos, no airy screens where users came for data, and more. A vague "avoid the AI look" only swaps one default for another; named patterns with replacements hold.
Checks pixels with code. scripts/verify.mjs renders every mockup screen at 360, 390 and 430px in the dark theme and at 390px in the light one, and reports overflow, contrast, touch targets, fonts that did not load, small text, extra shades of grey, coloured glows, glass count, accent use and Cyrillic line-height, plus motion lint (transition: all, ease-in, endless loops). No npm packages: it uses your installed Chrome, Edge or Chromium.