uinaf/uinaf-design-system
skills/uinaf-design-system/SKILL.md
Apply the uinaf brand identity to anything that ships under the uinaf name — web interfaces, blog posts, changelogs, documentation, READMEs, slides, OG / social images, email, terminal banners, app or product UI starting points. Covers voice, design tokens, components, motion, and brand assets, with a Tailwind v4 path for web work. Use when producing or restyling any uinaf-branded artefact. Skip for non-uinaf work; this is opinionated brand guidance, not a generic UI kit.
$ install --global
skillsauthnpx skillsauth add uinaf/skills uinaf-design-systemInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 13, 2026, 2:02 AM46.2s22 files scanned
SKILL.md
- name:
- uinaf-design-system
- description:
- Apply the uinaf brand identity to anything that ships under the uinaf name — web interfaces, blog posts, changelogs, documentation, READMEs, slides, OG / social images, email, terminal banners, app or product UI starting points. Covers voice, design tokens, components, motion, and brand assets, with a Tailwind v4 path for web work. Use when producing or restyling any uinaf-branded artefact. Skip for non-uinaf work; this is opinionated brand guidance, not a generic UI kit.
uinaf design system
Apply uinaf's identity to any creative output that ships under the studio name. Web is the most-supported track, but the same voice, type, and visual rules carry across content, slides, social, email, terminal, and native surfaces.
The canonical brand spec is references/brand-spec.md. Read it when changing brand canon or when the task is ambiguous; otherwise load only the matching task reference below.
Hard rules — universal (apply to every uinaf output)
- Berkeley Mono is the only typeface. No serifs, no sans, no second face. Off-uinaf fallback: JetBrains Mono.
- Lowercase voice on product and marketing surfaces. Headings, nav, button labels, post titles, file names that show in UI, the studio name. Always on uinaf-controlled product and marketing surfaces. Documentation surfaces (
README.md,CHANGELOG.md, product docs pages,docs/*.md,CONTRIBUTING.md,SECURITY.md,AGENTS.md,CLAUDE.md, GitHub templates) use proper-case headlines and sentence-case body; see references/repo-docs.md for repo docs. - No emoji. Anywhere. Brand artwork is the only flair.
- Voice is short, direct, dry. No SaaS sludge ("empower", "unlock", "synergies"). Sentence fragments end with periods. This applies everywhere, including repo docs.
- Illustrations live on pure black with no chrome. The slime palette (lime / green / cyan / blue / purple / magenta / pink) stays inside artwork, terminal output, and rare data-viz. UI fills, gradients, and default text stay neutral.
Hard rules — UI surfaces (web, slides, native, email HTML)
- Square corners. Cap radius at 6px; 2px is the norm. Status dots are the only pill.
- No coloured CTAs. UI is monochrome neutrals. Hierarchy comes from weight and box position, not fill color.
- No shadows on UI. Borders do all the elevation work.
- No icon fonts, no SVG icon sets. Unicode
↗ → ← ↑ ↓and middle-dot·carry the iconography. - One link accent: cyan. Underline is the affordance; color shifts on hover, no transform.
Workflow
- Confirm what you are producing — web interface, marketing/content page (blog / terms / release announcement), documentation surface (
README.md/CHANGELOG.md/ product docs page /docs/*.md/CONTRIBUTING.md/SECURITY.md/AGENTS.md/CLAUDE.md), slide deck, OG / social asset, email, terminal banner, or app / native UI starting point. - Read the smallest matching reference set under "Read by task". For mixed outputs (e.g. a blog post on the website), combine only the relevant references.
- Pull fonts from
https://cdn.uinaf.dev/fonts/berkeley-mono/variable/font.cssand illustrations fromhttps://cdn.uinaf.dev/images/(see references/assets.md for filenames and when to use each). Images stay CDN-hosted. - Write copy against references/voice.md. Voice rules apply to every surface; the lowercase rule is scoped to product and marketing surfaces only.
- Verify against the hard rules above before declaring done. Visual rules apply only where there is a visual surface; voice rules always apply, with the casing carve-out for documentation surfaces.
Read by task
- Full brand spec (canon changes or ambiguous tasks) → references/brand-spec.md
- Voice and copy (every surface, with casing scope) → references/voice.md
- Brand assets (fonts, illustrations, CDN paths, fallbacks) → references/assets.md
- Web — Tailwind v4 setup,
@thememappings, font wiring → references/tailwind.md - Web — components, layout, motion (cards, links, buttons, inputs, hr, footer, fade-up-in) → references/components.md
- OSS project page (project landing on
uinaf.dev, e.g./projects/healthd) → references/oss-project-page.md - Product/marketing long-form and documentation casing (blog post, terms, changelog, product docs page, release notes) → references/content.md
- Repo collaboration docs (
README.md,CONTRIBUTING.md,SECURITY.md,AGENTS.md,CLAUDE.md, GitHub templates) → references/repo-docs.md - Other surfaces (slides, OG / social, email, terminal banners, native app starting points) → references/surfaces.md
Bundled files
- assets/colors_and_type.css — drop-in stylesheet for web (tokens, semantic vars, base element styles,
.u-link,.u-link-plain,.u-card). Imports Berkeley Mono fromcdn.uinaf.dev. Use as-is for plain HTML, or as the source of truth for Tailwind theme values.
Image URLs (production)
Link brand illustrations directly from cdn.uinaf.dev (see references/assets.md for roles and og wiring):
https://cdn.uinaf.dev/images/uinaf-computer.png— primary in-page / hero markhttps://cdn.uinaf.dev/images/uinaf-computer-favicon.png— favicon and apple touch iconhttps://cdn.uinaf.dev/images/uinaf-computer-og-image.png— default product OG / Twitter imagehttps://cdn.uinaf.dev/images/uinaf-team.png— studio / about / studio-focused share cards
Handoffs
- Need to verify a finished artefact lives up to these rules → use
verify - Reviewing someone else's branded output for ship-readiness → use
review - Need to update brand guidance or references → use
docs
Related Skills
uinaf/react-ban-use-effect
development
VerifiedTrustedCommunity
Ban direct `useEffect` in React code. Use when writing, refactoring, reviewing, or migrating React components or hooks that import, call, add, or replace direct `useEffect`; when an agent reaches for effects for derived state, fetching, event reactions, resets, or external sync; or when adding lint/agent rules for a no-direct-useEffect policy. Do not use for ordinary React work with no effect smell, non-React code, or legitimate effect architecture outside React.
2SKILL.mdUpdated May 29, 2026
uinaf/review-gang
development
VerifiedTrustedCommunity
Independently audit existing code, diffs, branches, or pull requests by spawning mandatory concern-specific reviewer subagents, then synthesizing their evidence into a ship decision. Use when triaging PR risk, deciding whether someone else's change is safe to ship, or following up after runtime proof. Produces a `ship it` / `needs review` / `blocked` verdict. Do not use to self-check a change you just authored.
2SKILL.mdUpdated May 24, 2026
uinaf/gh-setup
testing
VerifiedTrustedCommunity
Set up or align a repository's GitHub collaboration and delivery surface: repo settings, branch/ruleset policy, PR and security templates, Actions hardening, GitHub Environments, release workflows, and deploy workflows. Use when standardizing GitHub setup for repos, CI/CD, publishing versioned packages, or deploying running apps; route app deploy details to deploy references and package publish details to release references.
2SKILL.mdUpdated May 24, 2026
uinaf/autoreview
tools
VerifiedTrustedCommunity
Run structured Codex/Claude autoreview closeout for uncommitted changes, branch/PR diffs, or single commits: choose the target, run the bundled review helper, validate findings, and rerun focused tests until clean. Use when asked for autoreview, Codex review, Claude review, automated PR review, second-model review, or merge-readiness review.
2SKILL.mdUpdated May 24, 2026