skills.rest
jscraik
jscraikCOMMUNITY
Explore all skills by this author โ†’
Website๐•@jscraikGitHub

frontend-ui-design

Design and review React and Next.js UI systems with Tailwind CSS design tokens.

8|4|Updated Jan 15, 2026
Search Tags:#accessibility#react#design tokens#tailwind css#ui design#component design
One-click install
npx skills add https://github.com/jscraik/Agent-Skills --skill frontend-ui-design
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: frontend-ui-design
Source: https://github.com/jscraik/Agent-Skills/tree/main/frontend/ui/frontend-ui-design
Command: npx skills add https://github.com/jscraik/Agent-Skills --skill frontend-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation and review of user interface (UI) systems and components, ensuring they are production-ready, accessible, and adhere to design token standards.

Core Features & Use Cases

  • UI System Design: Create new or redesign existing UI systems based on project requirements.
  • Component Specification: Define individual UI components with states, accessibility behavior, and token-referenced measurements.
  • Accessibility Audits: Review UI designs for compliance with WCAG 2.2 AA standards, including focus behavior, keyboard navigation, and reduced motion.
  • Token-Based Design: Ensure all UI elements are grounded in design tokens for consistency and maintainability.
  • Use Case: A product team needs to design a new settings screen for a React application. This Skill can generate a detailed UI brief, specify all necessary states (default, loading, error), define components using Tailwind CSS tokens, and provide an accessibility checklist.

Quick Start

Use the frontend-ui-design skill to design a settings flow for a React app with accessible tabs and inline validation.

Frequently Asked Questions about frontend-ui-design

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

FAQPage Schema
How do I build production-ready React components using design tokens?โ–ผ

Build production-ready React components by specifying UI states, explicit focus behavior, and token-referenced measurements. This approach ensures maintainability and consistency across your web application using Tailwind CSS tokens.

What's the best way to audit a UI design for WCAG 2.2 AA compliance?โ–ผ

Audit UI design for WCAG 2.2 AA compliance by reviewing focus behavior, keyboard navigation, and reduced motion requirements. The process generates structured audit reports detailing accessibility gaps and necessary corrections.

Can I use this to design a complete UI system for a Next.js application?โ–ผ

Yes, you can design complete UI systems for Next.js applications. The process targets React and Next.js stacks with Tailwind CSS, defining individual components with default, loading, and error states.

How do I create a settings flow with accessible tabs and inline validation?โ–ผ

Create a settings flow with accessible tabs and inline validation by generating a detailed UI brief. This defines component states, applies Tailwind CSS tokens, and provides an accessibility checklist for the React application.

Does this UI design approach require predefined design tokens to work?โ–ผ

Yes, token-based design requires predefined tokens to ensure all UI elements are grounded for consistency. The system leverages these tokens to define measurements and maintain accessibility standards across components.

What is the process to redesign an existing web application UI component?โ–ผ

Redesign existing web application UI components by evaluating current states and applying design tokens. The system outputs a structured component specification detailing accessibility behavior and token-referenced measurements.

Related Skills

Explore More Design & Creative Skillsโ†’
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
dejanvasic85dejanvasic85
1

frontend-design

Generates Tailwind and CSS-based designs and layouts for a given text description, with multiple aesthetic options to choose from.

Community
Basic
mklozmkloz

tailwind-design-system

Implement Tailwind CSS v4 design systems with design tokens and theming.

Community
Intermediate
dreamingechoesdreamingechoes
2

accessibility-audit

Identify WCAG 2.2 AA compliance gaps through automated and manual audits.

Community
Advanced