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 21 stars 0 forks Updated 4 days ago MIT

Install

View on GitHub

Quality Score: 82/100

Stars 20%
45
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
4 months ago
Last Updated
4 days ago
Language
JavaScript
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.

21 Updated 4 days ago
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.

21 Updated 4 days ago
ommakes
Web & Frontend Solid

vois-tokens

Rules and patterns for building UI with shadcn/ui, Tailwind v4, and Motion against a Vois design token set. Use when building components, pages, or any UI that should conform to the workspace design system. Covers spacing, typography, color tokens, component architecture, animation, accessibility, and modern CSS patterns.

21 Updated 4 days ago
ommakes