Enforces consistent frontend styling rules for building and reviewing UI components.
npx skills add https://github.com/Angael/veles --skill ui-style-angael
Please help me install this Agent Skill. Skill: ui-style Source: https://github.com/Angael/veles/tree/main/.agents/skills/ui-style Command: npx skills add https://github.com/Angael/veles --skill ui-style-angael
apps/web/src/components/ instead of inventing new controls or surfaces. - Motion and Interaction Rules: Defines allowed hover/press expressions, transition durations, easing curves, and prefers-reduced-motion handling so animations stay consistent and accessible. - Structured UI Reviews: Produces focused review feedback in a Before | After | Why markdown table verified against real rendered surfaces, viewport sizes, keyboard focus, and reduced motion. - Use Case: When adding a new settings panel to the TanStack Start web app, the Skill ensures you reuse existing primitives, CSS modules, and breakpoint variables rather than introducing raw media queries or new button styles. ## Quick Start Review my new profile page component and make its styling consistent with the existing design system.High-intent search queries and answers about installing and using this skill.
Reuse theme tokens, spacing, typography, and radii from the existing theme.css and CSS modules instead of introducing new values. Import primitives from the components directory and use shared breakpoint variables rather than raw media queries.
Express hover and press with background-color, border-color, color, underline, or opacity only. Never translate, scale, or animate shadows on interactive elements, and gate hover-only behavior with @media (hover: hover) and (pointer: fine).
Never use transition: all; name only changed properties for 100-250ms. Use ease-out for entrances, ease-in-out for movement, avoid scale(0) starts, and honor prefers-reduced-motion by removing positional motion while keeping color feedback.
Yes. It mandates at least 40x40px hit areas (ideally 44x44px), stable visible keyboard focus, preserved semantic labels and live-region behavior, and reduced-motion support that retains useful color or opacity feedback.
Report focused changes in a Before | After | Why markdown table. Verify the actual rendered surface at relevant viewport sizes, interaction states, keyboard focus, and reduced motion rather than reviewing code alone.
azmiariffarisCreate a three-layer design-token system with CSS variables.
Corvalis-LLCStandardizes ARIA roles, focus management, and keyboard navigation for UI components.
YunosukeYoshinoAutomate Playwright end-to-end tests and visual verification for web apps.
TimeKastStandardize Tailwind CSS v4 utility generation for Next.js CSS-first @theme token systems.