Adapts React UI components to three display themes and four screen-size zoom scales.
npx skills add https://github.com/levori119/skyboard --skill ui-adapt-levori119
Please help me install this Agent Skill. Skill: ui-adapt Source: https://github.com/levori119/skyboard/tree/main/.claude/skills/ui-adapt Command: npx skills add https://github.com/levori119/skyboard --skill ui-adapt-levori119
themeMode ('light' | 'dark' | 'ocean'), keeping status colors (green/red/orange) fixed while ensuring ocean is treated as a dark theme with measured contrast of at least 3:1. - Screen-scale handling: Explains the #root { zoom: var(--s) } mechanism for 15.6/16/18/24-inch screens, including the portal-to-body trap (add zoom: var(--s) and divide drag coordinates by --s) and the vw/vh trap (divide viewport units by var(--s, 1)). - Dense toolbar scaling: Applies useToolbarScale() + tbPx(n, tb) multipliers to toolbar buttons only, for pen/touch use on Cintiq 24 displays. - Use Case: After building a new panel like SignalBoard, run the checklist to verify it renders correctly in all three themes, scales on a 24-inch monitor, and handles portals and viewport units properly. ## Quick Start Ask the assistant to run the ui-adapt checklist on your new component, for example: adapt SignalBoard to all themes and screen sizes.High-intent search queries and answers about installing and using this skill.
Derive the component palette from a themeMode prop ('light', 'dark', or 'ocean') instead of hardcoding background and text colors. Keep status colors like green, red, and orange fixed across themes since they carry meaning and have sufficient contrast.
The CSS zoom property multiplies all lengths inside the zoomed element, including vw and vh units, so a 96vw modal becomes larger than the real viewport. Divide every viewport unit by the zoom variable, for example width: calc(96vw / var(--s, 1)).
Elements mounted via createPortal to document.body sit outside the #root container where the zoom variable applies, so they render unscaled. Add style={{ zoom: 'var(--s)' }} to the portal container and divide drag coordinates by the --s value.
Measure the actual background color against the text color and ensure a contrast ratio of at least 3:1 per WCAG 1.4.11. Treat the ocean theme as dark, since deriving dark colors for anything not explicitly 'dark' produces near-invisible 1.3:1 contrast.
Dense toolbars with small 20-28px buttons stay relatively small on large screens even with uniform zoom, which is a problem for pen or touch input on a Cintiq 24. Apply an extra multiplier to buttons only via a toolbar scale hook, leaving titles and other content unchanged.
cassioalexandreConvert Stitch design screens into modular React components with TypeScript props.
TopengDevAutomate end-to-end browser tests for software features using Playwright.
thrillmadeVerify color contrast against WCAG 2.2 AA standards.
Pabloprogramador23Extract design tokens from CSS, Tailwind themes, and screenshots into a design-system reference.