An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Install
$
npx skills add ommakes/SkillsClaude Code
claude mcp add skills -- npx skills add ommakes/SkillsCursor / Claude Desktop (mcp.json)
{
"mcpServers": {
"skills": {
"command": "npx",
"args": [
"skills",
"add",
"ommakes/Skills"
]
}
}
}Install command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →Skills
Claude skills for UX and product design workflows.
Install
npx skills add ommakes/Skills
Design System Skills (Read in Order)
These skills work together as a stack, and each one works standalone — no orchestrator or MCP server required. Read them in this order when building UI: vois-patterns → vois-components → vois-tokens (with vois-dataviz between patterns and components for any screen that shows data), with righter consulted throughout for copy. Any telemetry tool call a skill mentions (vois_record_pattern_choice, vois_record_component_choice, vois_record_rule_usage, vois_get_microcopy) is optional — if the tool isn't available in your environment, the skill degrades gracefully and the instruction is simply skipped.
Each skill's data/*.json is the canonical source for its rules — references/*.md restates them for readability and worked examples, but the JSON wins on conflict. scripts/check-rule-sync.mjs enforces that the two never silently disagree, and runs in CI alongside vois-tokens' own detector regression suite (see .github/workflows/design-system-checks.yml).
Vois Patterns
Structural decision trees and UI patterns that tell agents what to build before implementing it. Covers container types (forms, tables, dialogs, settings pages, pricing pages), state management (view/edit), and routing to righter skill for all microcopy. Marketing pages (landing pages, homepages) have their own taste rules: one idea per section, three blocks max, detail behind a link, no dividers. Tables cover simple vs complex, how a row opens (drawer by default, full page for big records), where editing happens, selection and bulk actions, and loading, empty, and error states.
Read first to determine the structure and architecture of what you're building.
Use when: building a new page, form, table, modal, or feature and need to decide on the container type and layout pattern before writing code.
Ships as SKILL.md plus a references/ folder split by pattern (detail pages, forms, dialogs, settings pages, etc.) — SKILL.md is the decision tree and index, references hold the full path detail.
Vois Components
Component selection rubrics organized by job-to-be-done. Covers 20 high-ambiguity component pairs (Dialog vs Drawer, Toast vs Banner, Select vs Combobox, etc.) with decision trees and "why not X" reasoning.
Read second (after vois-patterns determines structure) to pick the right specific component for each job.
Use when: you need to decide between similar components — which one actually fits what you're building? Optionally calls vois_record_component_choice after selecting, if that tool is available.
Ships as SKILL.md plus a references/ folder grouped by job (forms, navigation, display, selection, overlays, feedback) — SKILL.md holds the quick-reference table and job index, references hold the full decision trees.
Similar plugs
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, and Pi. 44 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.
Clone any website with one command using AI coding agents