mcpField
U
uinaf-design

uinaf-design

github.com/uinafDesign & UI186 installsUpdated 1d ago
Repository

About uinaf-design

uinaf-design is a manually used skill for applying the uinaf design system and brand guidance within explicitly scoped work. It retrieves relevant live design references, falls back to linked Markdown when needed, and leaves product-specific implementation to the owning repository.

Key features

  1. 01Fetches live design references
  2. 02Markdown fallback when MCP is unavailable
  3. 03Reuses the shipped design system
  4. 04Keeps product UI work in its owning repository
  5. 05Runs the repository's existing design:check

Use cases

  1. 01Look up a screen, component, or design token
  2. 02Apply uinaf structure and styling to scoped work
  3. 03Check design changes using the repository's gate

MCP support

When connected, it uses the uinaf design MCP server to retrieve pages, templates, patterns, tokens, and guidelines. If unavailable, it fetches relevant Markdown references instead.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/uinaf/design --skill uinaf-design

After installing, type/uinaf-designin Claude Code to confirm it loaded.

Bundled filesagents/openai.yaml

Details

From the project README

uinaf design

This is a manual skill. Its presence never authorizes uinaf styling outside explicitly scoped uinaf work.

Workflow

  1. Keep implementation with its owner. This package supplies the design system and general brand guidance. Product-specific UI and copy belong in that product's repository.
  2. Fetch one live source before writing. Prefer the MCP server at https://design.uinaf.dev/mcp when it is connected:
    • Whole product screen → get_page
    • uinaf.dev surface or export artboard → get_template
    • Component → list_patterns, then get_pattern
    • Token value → get_tokens
    • Voice or general rule → search_guidelines with one exact topic such as voice, type, color, layout, or motion
  3. Fall back to Markdown, not memory. When MCP is unavailable, read https://design.uinaf.dev/llms.txt, choose the one relevant link, and fetch it. Use /design.md for voice and general guidance and /readme.md for package setup. Do not load the whole catalog. If neither route is reachable, stop and report the missing design context.
  4. Reuse the shipped system. Import @uinaf/design/css, copy the fetched structure, and adapt content. Do not recreate a component from prose.
  5. Finish through the owning repo's gate. Run its existing design:check script through the repo's declared package manager. If the script is missing, consult /readme.md; do not install dependencies, create a ratchet, or widen the task without approval.

Comments

Markdown supported