skills.rest
Arcanada-one
Arcanada-oneOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-ui

Verify frontend UI rendering across themes, viewports, and localization contexts.

11|1|Updated Apr 10, 2026
Search Tags:#accessibility#frontend#responsive design#visual testing#ui regression#i18n parity#css dark mode
One-click install
npx skills add https://github.com/Arcanada-one/datarim --skill frontend-ui-arcanada-one
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui
Source: https://github.com/Arcanada-one/datarim/tree/main/skills/frontend-ui
Command: npx skills add https://github.com/Arcanada-one/datarim --skill frontend-ui-arcanada-one

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents common frontend UI regressions—especially theme, layout, and rendering issues—that pass HTTP/HTML checks but still break the actual user experience.

Core Features & Use Cases

  • Dark/Light Mode Specificity & Visual Leaks: Ensures CSS rules reliably override light defaults with .dark and avoids selector patterns (like :not(.dark)) that cause light colors to bleed into dark mode.
  • Evidence-Based Visual Verification: Requires screenshots for dark, light, and multiple viewports (mobile, tablet, desktop) so completeness is judged visually, not just by successful responses.
  • UI Parity, Responsiveness, Accessibility, and SEO Checks: Covers i18n key parity (when applicable), mobile responsiveness, WCAG AA baseline, focus/labels, and social/SEO preview tags for every UI-affecting change.

Use case example: After updating a component’s styles and adding a theme toggle, use this checklist to confirm both themes render correctly across screen sizes, that the toggle is accessible and labeled, and that social preview metadata updates.

Quick Start

Apply the frontend-ui skill to your next HTML/CSS/template change and complete the required checklist items before finishing the UI task.

Frequently Asked Questions about frontend-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent CSS visual leaks when implementing dark mode overrides?▼

To prevent CSS visual leaks in dark mode, ensure your `.dark` overrides have sufficient specificity and avoid selector patterns like `:not(.dark)` that cause light colors to bleed into dark themes.

What is the best way to verify UI responsiveness across mobile and desktop viewports?▼

The best way to verify UI responsiveness is to capture screenshot evidence across mobile, tablet, and desktop viewports, judging rendering completeness visually rather than relying solely on successful HTTP or HTML checks.

How do I check accessibility and i18n parity before completing a web UI change?▼

Check accessibility and i18n parity by running baseline WCAG AA checks for focus and labels, and verifying that localization keys match across contexts before marking any HTML or CSS task complete.

Does updating social preview metadata require visual verification across themes?▼

Yes, updating social and SEO preview tags requires visual verification. You must confirm metadata correctness and capture screenshots for both dark and light themes to ensure complete UI rendering.

Why does my web interface layout break after passing standard HTML checks?▼

Your web layout breaks because standard HTML checks do not catch theme, layout, and rendering regressions; you need evidence-based visual QA across multiple resolutions to validate the actual user experience.

Related Skills

Explore More Design & Creative Skills→
wssAchilleswssAchilles
2

web-design-guidelines

Analyzes HTML/CSS/JS codebases for compliance with Web Interface Guidelines.

Community
Intermediate
emiljuchnikowskiemiljuchnikowski

browser-capture

Capture browser screenshots at desktop, tablet, and mobile viewports with Playwright.

Community
Intermediate
SolaneHubSolaneHub

ui-web

Build accessible Tailwind CSS web UIs with glassmorphism and WCAG 2.1 AA compliance.

Community
Intermediate
pwv-vcpwv-vc
6

playwright-tester

Automate browser-based visual testing and end-to-end validation with Playwright.

Official
Intermediate