uinaf-design
uinaf/design · skills.sh
Open source Repository Open in the app JSON README (API)
About
Skill publicada por uinaf/design no skills.sh. Instale com: npx skills add uinaf/design@uinaf-design
Details
- Kind
- Agent skills
- Publisher
- uinaf
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 1
- Open pull requests
- 2
- Last push
- 2026-10-07T01:39:53Z
- Repository state
- ativo
- Language
- TypeScript
- License
- MIT
- Added
- 2026-10-07 05:34:45
- Updated
- 2026-10-07 05:34:45
- Origin id
uinaf/design/uinaf-design
README
# uinaf/design
Design tokens, CSS primitives, adherence linting, and repository-local agent guidance for [uinaf](https://uinaf.dev) surfaces.
Guide: [design.uinaf.dev](https://design.uinaf.dev)
Berkeley Mono is licensed; load it from `cdn.uinaf.dev`, not this package.
## Install
```sh
pnpm add @uinaf/design
```
```css
@import "@uinaf/design/css";
```
Or link the stylesheet after the CDN font sheet:
```html
<link rel="stylesheet" href="https://cdn.uinaf.dev/fonts/berkeley-mono/variable/font.css" />
<link rel="stylesheet" href="https://github.com/uinaf/design/blob/HEAD/node_modules/@uinaf/design/dist/css/tokens.css" />
```
Token values and the CDN URLs are importable too:
```ts
import { tokens } from "@uinaf/design";
import { CDN } from "@uinaf/design/cdn";
```
## Adherence lint
The package ships a `design-check` binary. Add it as a script so it resolves
from `node_modules/.bin`:
```json
{ "scripts": { "design:check": "design-check src" } }
```
It fails on raw hex, off-scale type, radius over 6px, stacked nav rows, and the
rest of the guardrails in the spec. Ratchet mode, for a repo with an existing
backlog, is in [Adopting in a product repo](https://github.com/uinaf/design/blob/HEAD/docs/adoption.md).
## Package contents
| Path | Purpose |
| ---------------------- | ------------------------------------------------- |
| `dist/css/tokens.css` | CSS custom properties + component primitives |
| `dist/tokens.js` | Flat token map |
| `dist/components.json` | The pattern contract: classes, use, rules, markup |
| `dist/lint/` | The `design-check` binary and its rules |
| `assets/icons/` | The closed icon set: eight 16-grid stroke SVGs |
| `DESIGN.md` | Full design spec |
Whole example screens are not in the package; they are documents you read, not
modules you import. Get them from the guide:
| Surface | Where |
| --------------------- | -------------------------------------------- |
| Pattern cards | [design.uinaf.dev](https://design.uinaf.dev) |
| Six reference screens | `design.uinaf.dev/pages/<name>.md` |
| uinaf.dev surfaces | `design.uinaf.dev/templates/<name>.md` |
## Docs
- [Design spec](https://github.com/uinaf/design/blob/HEAD/DESIGN.md)
- [Adopting in a product repo](https://github.com/uinaf/design/blob/HEAD/docs/adoption.md)
- [Contributing](https://github.com/uinaf/design/blob/HEAD/CONTRIBUTING.md)
- [Releasing](https://github.com/uinaf/design/blob/HEAD/docs/releasing.md)
- [Security](https://github.com/uinaf/design/security/policy)
## License
MIT for the tokens and docs in this repository. Berkeley Mono remains proprietary; do not redistribute font binaries.