Enforces design-token and shared-component reuse rules for Vue 3 frontend UI changes.
npx skills add https://github.com/alexmohr/assimilate --skill ui-design-alexmohr
Please help me install this Agent Skill. Skill: ui-design Source: https://github.com/alexmohr/assimilate/tree/main/skills/ui-design Command: npx skills add https://github.com/alexmohr/assimilate --skill ui-design-alexmohr
frontend/src/style.css; literal values fail CI via design-tokens.test.ts. - Shared component catalogue: Documents every reusable class and component (BaseModal, BaseTabs, EmptyState, PaneRow, DetailHeader, badges, tables, charts, forms) so scoped styles never re-declare what shared-components.test.ts owns. - Convention guardrails: Covers wording (sentence case, one verb per action), icon rules (@lucide/vue only, fixed size set), state handling (loading/empty/error), and accessibility (focus-visible, reduced motion), all checked by ui-conventions.test.ts and a WCAG contrast test. - Use Case: When asked to add a new settings pane, the Skill directs the assistant to use .settings-tab, PaneRow, HelpHint, and existing tokens rather than writing new scoped CSS that would trip the duplicate-code and token CI checks. ## Quick Start Ask the assistant to add or modify any view, dialog, form, table, or style under frontend/src/ and it will apply the token and component reuse rules automatically.High-intent search queries and answers about installing and using this skill.
Check the catalogue of shared classes in frontend/src/style.css and components in frontend/src/components/ first. If a rule is used a second time, move it into @layer components and register it in the OWNED list of shared-components.test.ts.
Spacing uses --space-1 through --space-10 (2 to 48px), and type uses --fs-2xs through --fs-3xl. Literal rem values in padding, margin, gap, or font-size fail the design-tokens CI test.
The shared-components test fails when a scoped rule re-declares a property a shared class already sets, duplicates another scoped rule verbatim, or redefines a shared @keyframes. Move the rule to style.css or reuse the existing class.
No. Icons must come from @lucide/vue only, in sizes 12, 14, 16, 20, or 40 depending on context. Glyphs, entities, and other sizes are rejected by the ui-conventions CI test.
Use a scoped style only for layout genuinely unique to that component. Buttons, panels, badges, tables, form fields, empty states, and spinners already exist as shared classes or components and must be reused.
NealschDesigns API contracts defining endpoints, request and response models, errors, and versioning.
YusufkotavomRun lint, type-check, and tests across scoped changes for pre-commit or CI workflows.
openobserveResolves TypeScript and ESLint errors in OpenObserve Vue 3 frontend codebase.
TimeKastStandardize Tailwind CSS v4 utility generation for Next.js CSS-first @theme token systems.