cleanplate 0.2.1 → 0.2.2
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/AGENTS.md +45 -0
- package/README.md +12 -0
- package/package.json +3 -3
package/AGENTS.md
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
# Agent instructions — CleanPlate (React)
|
|
2
|
+
|
|
3
|
+
Use this file when generating or refactoring UI in **this frontend project**. This app uses **[CleanPlate](https://www.npmjs.com/package/cleanplate)** (`cleanplate` on npm): a headless React component library.
|
|
4
|
+
|
|
5
|
+
## Where to load full documentation
|
|
6
|
+
|
|
7
|
+
1. **Index (start here):** `node_modules/cleanplate/llms.txt`
|
|
8
|
+
Overview, AI-oriented guidelines, and pointers to each component doc.
|
|
9
|
+
|
|
10
|
+
2. **Component reference:** `node_modules/cleanplate/docs/<ComponentName>.md`
|
|
11
|
+
Example: `docs/Button.md`, `docs/PageHeader.md` — props, types, examples, behavior.
|
|
12
|
+
|
|
13
|
+
If `node_modules` is missing, run install first. Optionally use a **semver-pinned CDN** mirror of the same files (substitute your installed version):
|
|
14
|
+
`https://unpkg.com/cleanplate@<version>/llms.txt` · `https://unpkg.com/cleanplate@<version>/docs/Button.md`
|
|
15
|
+
|
|
16
|
+
Human-facing demos: [Storybook — cleanplate.sivadass.in](https://cleanplate.sivadass.in)
|
|
17
|
+
|
|
18
|
+
## Imports and styling
|
|
19
|
+
|
|
20
|
+
- Import components as **named exports** from `'cleanplate'`.
|
|
21
|
+
- Include framework styles **once** at the app root:
|
|
22
|
+
`import "cleanplate/dist/index.css";`
|
|
23
|
+
- **`Icon`** uses [Google Material Symbols](https://fonts.google.com/icons); ensure the Material Symbols font is loaded in the app (see `docs/Icon.md`).
|
|
24
|
+
|
|
25
|
+
## Rules for generated code
|
|
26
|
+
|
|
27
|
+
- Prefer **component props** for layout, spacing, and alignment — **avoid inline `style`** when CleanPlate exposes a prop for it.
|
|
28
|
+
- **Spacing (`margin`, `padding`, `gap`):** use the **suffix-only** API everywhere it applies — e.g. `margin="b-2"`, `padding="4"`, `gap="2"`. Do **not** pass CSS-class-style prefixes (`m-`, `p-`, `g-`) in prop values.
|
|
29
|
+
- **`Typography`:** use `align` for text alignment, `isBold` for bold, `margin` for spacing — not equivalent inline styles unless there is no prop.
|
|
30
|
+
|
|
31
|
+
Correct vs avoid:
|
|
32
|
+
|
|
33
|
+
```jsx
|
|
34
|
+
<Typography variant="h4" align="center" margin="b-2">Login</Typography>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```jsx
|
|
38
|
+
<Typography variant="h4" style={{ textAlign: "center", marginBottom: "1rem" }}>Login</Typography>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Workflow
|
|
42
|
+
|
|
43
|
+
1. Read `node_modules/cleanplate/llms.txt` for global rules and the right `docs/*.md` path.
|
|
44
|
+
2. Open the matching `docs/<Component>.md` before inventing props or patterns.
|
|
45
|
+
3. Match **TypeScript types** exported from `'cleanplate'` when the project uses TypeScript.
|
package/README.md
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
- [Documentation](#documentation)
|
|
9
9
|
- [TypeScript](#typescript)
|
|
10
10
|
- [LLM / AI-friendly docs & agents](#llm--ai-friendly-docs--agents)
|
|
11
|
+
- [`AGENTS.md` in your app repo](#agentsmd-in-your-app-repo)
|
|
11
12
|
- [GitHub MCP server](#github-mcp-server)
|
|
12
13
|
|
|
13
14
|
---
|
|
@@ -216,6 +217,17 @@ CDN mirrors of the published tarball work well for prompts and CI; pin the semve
|
|
|
216
217
|
|
|
217
218
|
Human-facing Storybook: [cleanplate.sivadass.in](https://cleanplate.sivadass.in).
|
|
218
219
|
|
|
220
|
+
### `AGENTS.md` in your app repo
|
|
221
|
+
|
|
222
|
+
Many coding agents automatically read **`AGENTS.md`** at the **root of the repository** they are working in. To give agents CleanPlate-specific context in **your** frontend project:
|
|
223
|
+
|
|
224
|
+
1. Copy the template into your app root:
|
|
225
|
+
- From this repo: [`AGENTS.md`](https://github.com/sivadass/cleanplate/blob/main/AGENTS.md) (raw: [`AGENTS.md` raw](https://raw.githubusercontent.com/sivadass/cleanplate/main/AGENTS.md))
|
|
226
|
+
- Or from an install: `node_modules/cleanplate/AGENTS.md` → paste/rename as `AGENTS.md` at your project root
|
|
227
|
+
2. Commit `AGENTS.md` so teammates and agents see the same rules.
|
|
228
|
+
|
|
229
|
+
The published tarball also includes **`AGENTS.md`** next to `llms.txt` for easy copying after `npm install`.
|
|
230
|
+
|
|
219
231
|
---
|
|
220
232
|
|
|
221
233
|
## GitHub MCP server
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cleanplate",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "CleanPlate - A Headless React UI Framework",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
7
7
|
"docs",
|
|
8
|
-
"llms.txt"
|
|
8
|
+
"llms.txt",
|
|
9
|
+
"AGENTS.md"
|
|
9
10
|
],
|
|
10
11
|
"main": "dist/index.js",
|
|
11
12
|
"module": "dist/index.es.js",
|
|
@@ -53,7 +54,6 @@
|
|
|
53
54
|
"@types/node": "^25.0.9",
|
|
54
55
|
"@types/react": "^19.2.8",
|
|
55
56
|
"@types/react-dom": "^19.2.3",
|
|
56
|
-
"baseline-browser-mapping": "^2.9.16",
|
|
57
57
|
"cheerio": "^1.2.0",
|
|
58
58
|
"node-fetch": "^2.7.0",
|
|
59
59
|
"prop-types": "^15.8.1",
|