vois-components

Solid

Component selection rubrics organized by job-to-be-done. Use after vois-patterns determines structure, before vois-tokens applies tokens. Optionally records each choice via the vois_record_component_choice MCP tool if one is available. Use when deciding between similar components — Dialog vs Drawer, Toast vs Banner, Select vs Combobox, etc.

Web & Frontend 20 stars 0 forks Updated today MIT

Install

View on GitHub

Quality Score: 82/100

Stars 20%
44
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Vois Component Selection Skill You are picking specific components from the workspace manifest. This skill answers **"which component for this job"** — not what structure (that's `vois-patterns`) and not how to style it (that's `vois-tokens`). Read this skill after `vois-patterns` has determined the container type. If a `vois_record_component_choice` tool is available in your environment, call it for every component you pick before moving to `vois-tokens`; if not, just make the selection and move on. The Quick Reference table below resolves most cases on its own. When it doesn't — ambiguous case, need the full decision tree, or need to justify the choice — read the matching reference file. --- ## Before You Pick a Component 1. Identify the **job-to-be-done** — phrase it as a verb plus object: "confirm a destructive action", "show transient feedback", "group related controls" 2. Find the matching row in Quick Reference, or the matching job in the index below 3. If ambiguous, read the matching reference file and walk its decision tree 4. If a `vois_record_component_choice` tool is available, call it with your selection: ``` Tool: vois_record_component_choice Arguments: job: <the job-to-be-done, one sentence, e.g. "confirm destructive action"> componentName: <exact component name from the manifest, e.g. "AlertDialog"> alternativesConsidered: <optional array of component names you ruled out> reasoning: <optional one sentence on why you chose ...

Details

Author
ommakes
Repository
ommakes/Skills
Created
6 months ago
Last Updated
today
Language
HTML
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

vois-patterns

Structural decision trees for container types, form states, table layouts, and page-level patterns. Use before vois-tokens. Routes to righter skill for all microcopy (labels, errors, buttons, helpers). Use when building pages, forms, features, workflows.

20 Updated today
ommakes
Web & Frontend Solid

vois-router

Orchestrates the Vois design system skill chain. Use this skill as the single entry point whenever you're doing any UI work against the Vois design system — building a screen, picking a component, writing copy, or defending a design decision. The router reads your input, identifies the right starting point and skill sequence, and packages context forward so you don't have to re-explain the problem at each step. Works with vois-patterns, vois-components, vois-tokens, righter, and design-rationale. Each of those skills can still be used standalone — this router is additive, not a replacement. Trigger when someone says "build this screen", "what component should I use", "help me write this copy", "route me through the design system", or pastes any feature brief, ticket, or design question without specifying which skill to use.

20 Updated today
ommakes
Web & Frontend Featured

component-decision-tree

Build YAML decision trees (.ai/decision-trees/) that route an intent to the right component via narrowing questions. Triggers: which component should I use, choose between X and Y, modal vs dialog, selection guide. Guidance for one chosen component: use usage-guidelines.

196 Updated 2 days ago
murphytrueman