wunderui-mcp 1.0.3 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -0
- package/data/DESIGN.md +7016 -218
- package/data/INSTRUCTIONS.md +52 -0
- package/data/design.json +31043 -1242
- package/package.json +2 -1
- package/src/index.mjs +91 -0
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# WunderUI — instructions for your coding agent
|
|
2
|
+
|
|
3
|
+
Paste this into CLAUDE.md, AGENTS.md or .cursor/rules. It is the short, always-on version;
|
|
4
|
+
the full context is https://wunderui.com/DESIGN.md and the MCP server answers everything else
|
|
5
|
+
(`claude mcp add wunderui -- npx -y wunderui-mcp`).
|
|
6
|
+
|
|
7
|
+
## Always
|
|
8
|
+
- Never hardcode colours.
|
|
9
|
+
- Theme by overriding tokens, not by restyling components.
|
|
10
|
+
- Dark mode is a `.dark` class on `<html>`.
|
|
11
|
+
- The package is client code.
|
|
12
|
+
- Import from the package root, never from `dist/` or `src/` paths.
|
|
13
|
+
- `cn` is not re-exported — import it from the `cn` package directly.
|
|
14
|
+
- Prefer a composite over rebuilding one.
|
|
15
|
+
- Charts take a `loading` prop; do not build your own skeleton.
|
|
16
|
+
- A KPI chart ends on the trend line.
|
|
17
|
+
- Motion comes from tokens too.
|
|
18
|
+
- Agent UI has its own components.
|
|
19
|
+
- Before writing UI by hand, look up the component: the Task → component table in DESIGN.md, or the MCP tool `list_components`.
|
|
20
|
+
|
|
21
|
+
## Motion
|
|
22
|
+
- Duration and easing are class names, not numbers.
|
|
23
|
+
- Only `transform` and `opacity`.
|
|
24
|
+
- Entrances decelerate, exits accelerate.
|
|
25
|
+
- Never fade in the LCP element.
|
|
26
|
+
- Restrain the travel.
|
|
27
|
+
- One overshoot per screen.
|
|
28
|
+
- Reduced motion is opt-in, not a kill switch.
|
|
29
|
+
- Never `transition-all`.
|
|
30
|
+
- Loading keeps its height.
|
|
31
|
+
- A looping ambient animation is the one place `ease-in-out` belongs.
|
|
32
|
+
- Animate by frequency.
|
|
33
|
+
- Anchored surfaces grow from their trigger.
|
|
34
|
+
- Toggles stay interruptible.
|
|
35
|
+
- Hover only where hover exists.
|
|
36
|
+
- Reduced motion keeps the fade.
|
|
37
|
+
|
|
38
|
+
## Copy
|
|
39
|
+
- Buttons say what happens.
|
|
40
|
+
- Sentence case everywhere in the product.
|
|
41
|
+
- Errors say what happened and what to do.
|
|
42
|
+
- Empty states explain and offer one action.
|
|
43
|
+
- Labels are nouns, hints are sentences.
|
|
44
|
+
- Numbers carry their unit.
|
|
45
|
+
- No filler.
|
|
46
|
+
- Confirmations name the object.
|
|
47
|
+
|
|
48
|
+
## Before you finish
|
|
49
|
+
- Run the free skills `wunderui-token-check` (no raw colours) and, with Pro, `wunderui-motion-audit` and `wunderui-a11y` on the files you changed.
|
|
50
|
+
- Check light, dark and 390 px.
|
|
51
|
+
|
|
52
|
+
https://wunderui.com/DESIGN.md · https://wunderui.com/skills · https://wunderui.com/llms-full.txt
|