skills.rest
dachent
dachentCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

18|1|Updated Mar 19, 2026
Search Tags:#accessibility#frontend#design tokens#ui design#responsive#browser testing
One-click install
npx skills add https://github.com/dachent/skills --skill frontend-design-codex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-codex
Source: https://github.com/dachent/skills/tree/main/frontend-design-codex
Command: npx skills add https://github.com/dachent/skills --skill frontend-design-codex

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the problem of inconsistent, non-responsive, or poorly accessible frontend interfaces by forcing the agent to validate designs through actual browser rendering rather than relying on source code assumptions.

Core Features & Use Cases

  • Visual System Enforcement: Applies semantic design tokens for consistent spacing, typography, and color across all UI components.
  • Automated Visual QA: Uses browser-based linting and screenshot evidence to verify responsive behavior, contrast, and layout integrity.
  • Use Case: When building a new dashboard, the agent will automatically capture desktop and mobile screenshots, check for text overflow, and ensure all interactive elements meet accessibility standards before finalizing the code.

Quick Start

Use the frontend-design-codex skill to build a responsive dashboard interface that includes design tokens and screenshot evidence for mobile and desktop views.

Frequently Asked Questions about frontend-design-codex

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

FAQPage Schema
How do I validate responsive design and visual layout without manually checking every screen size?▼

Automated visual QA uses browser-based linting and screenshot evidence to verify responsive behavior and layout integrity across desktop and mobile views. This enforces consistent spacing, typography, and color by applying semantic design tokens to all UI components.

How does automated visual QA enforce accessibility standards in frontend UI components?▼

Automated visual QA enforces accessibility by performing browser-based linting on rendered UI states to verify contrast and interactive element compliance. It forces validation through actual browser rendering rather than relying on source code assumptions to audit accessibility.

How do I apply semantic design tokens for consistent typography and color across a web application?▼

To apply semantic design tokens, enforce visual system rules during frontend component construction to maintain consistent spacing, typography, and color. This requires capturing visual evidence through browser rendering to ensure token application before finalizing code.

Do I need browser-based runtime tools to perform automated screenshot analysis for UI design?▼

Yes, you need browser-based runtime tools to capture visual evidence and perform linting on rendered UI states. The validation process relies entirely on actual browser rendering to check responsive behavior and layout integrity, not source code assumptions.

Why does my frontend UI look broken in production even when the source code has no errors?▼

Frontend UI breaks when relying on source code assumptions instead of actual browser rendering to validate visual systems. Browser-based rendering and automated screenshot analysis reveal text overflow, contrast issues, and responsive layout failures that source code checks miss.

Related Skills

Explore More Design & Creative Skills→
tmarsbrtmarsbr

tailwind-design-system

Configure Tailwind design tokens, dark mode, and component variant patterns.

Community
Advanced
alexandrbasisalexandrbasis
12

fci

Diagnose and fix CI pipeline failures blocking pull request merges.

Community
Advanced
ginkidaginkida
20

css-expert

Build responsive UI layouts with CSS grid and flexbox.

Community
Intermediate
R2W1csR2W1cs
1

lint-and-validate

Lint and validate JavaScript and Python code for syntax and style issues.

Community
Intermediate