frontend-design

Name: frontend-design
Availability: InStock
Author: dividedby

Enforce design tokens, accessibility audits, and responsive constraints in React, Next.js, and Tailwind interfaces.

1|2|Updated May 27, 2026

Search Tags:#design #ui #accessibility #frontend #react #tailwind #tokens

Ready to run

npx skills add https://github.com/dividedby/skills --skill frontend-design-dividedby

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/dividedby/skills/tree/main/skills/engineering/frontend-design
Command: npx skills add https://github.com/dividedby/skills --skill frontend-design-dividedby

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the problem of generic, uninspired AI-generated interfaces by enforcing a rigorous, opinionated design loop that prioritizes accessibility, visual hierarchy, and brand-specific aesthetics.

Core Features & Use Cases

Design Direction Enforcement: Ensures every UI component follows a committed design language, preventing "bento-grid" or "cardocalypse" patterns.
Automated Design Audits: Performs tiered audits (Always, Smoke, Review) to catch accessibility issues, contrast failures, and responsive design flaws.
Token-Driven Development: Forces the use of a centralized token system (OKLCH colors, M3 type roles, spring-based motion) to ensure consistency across React, Next.js, and Tailwind projects.

Quick Start

Use the frontend-design skill to audit my current React component library and propose a new design direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I enforce accessibility standards in a React and Tailwind UI?▼

Enforce accessibility standards by running automated tiered audits that check WCAG 2.2 AA compliance, contrast failures, and responsive design flaws across React, Next.js, and Tailwind stacks. Audit results identify specific accessibility issues to fix in your components.

What's the best way to manage design tokens for light and dark mode parity?▼

Manage design tokens for light and dark mode parity by centralizing OKLCH colors, M3 type roles, and spring-based motion into a single token system. This tokenized approach ensures consistent visual hierarchy and strict light/dark mode matching across your application.

How do I audit my existing React component library for design consistency?▼

Audit your existing React component library by applying a 7-step design loop that performs tiered audits to catch accessibility issues, contrast failures, and responsive design flaws. The loop refines your components against a committed design language and centralized tokens.

Can I use this to re-theme an existing Next.js application without breaking layouts?▼

You can re-theme existing Next.js applications by enforcing strict responsive breakpoints and applying a centralized token system. The design loop integrates responsive layout constraints and token-driven development to maintain visual hierarchy during re-theming.

Why does my AI-generated frontend UI look generic and uninspired?▼

AI-generated frontend UI looks generic when it lacks a committed design language and falls into repetitive patterns like bento-grids or excessive cards. A rigorous design loop enforcing visual hierarchy, brand-specific aesthetics, and token-driven development prevents these generic outcomes.

When should I not use automated accessibility audits for frontend design?▼

Automated accessibility audits may not suffice when your frontend design requires complex custom interactions beyond standard WCAG 2.2 AA checks. The audits catch contrast failures and responsive flaws but should be supplemented with manual reviews for nuanced accessibility edge cases.