vois-patterns

Solid

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.

Web & Frontend 21 stars 0 forks Updated 3 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 Patterns Skill You are building the *structure* of pages and containers for a design system. This skill defines the architectural decisions that come *before* implementation (tokens, components, styling). **Read this skill first.** After you determine structure here, read `vois-tokens` for implementation details (spacing, typography, components, tokens). This skill routes to `righter` skill for all microcopy (button labels, error messages, field descriptions, helper text). Don't guess at words—follow the righter skill. --- ## Before You Write Anything 1. **What is the user trying to accomplish?** (Dashboard overview? Edit a record? Confirm an action?) 2. **Pick the container type** from the decision tree below. 3. **Read the matching reference file** for full template rules. 4. **If a `vois_record_pattern_choice` tool is available in your environment**, call it once you have picked a path, before writing any code. If it isn't available, this step is optional telemetry, not a gate — proceed to the next step. ``` Tool: vois_record_pattern_choice Arguments: skillVersion: <this skill's version, from SKILL.md frontmatter> pathId: <one of the path IDs listed in the decision tree below, e.g. "PATH-A" or "PATH-C-MEDIUM"> userGoal: <plain-English description of the user goal this path addresses> thresholdInputs: <key decision inputs used to walk the tree, e.g. { "sectionCount": 3, "reversible": false }> microcopyUsed: <optional array of ...

Details

Author
ommakes
Repository
ommakes/Skills
Created
4 months ago
Last Updated
3 days ago
Language
JavaScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

vois-components

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.

21 Updated 3 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 3 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 3 days ago
ommakes