frontend-design

Plan and implement accessible React and TypeScript frontend interfaces with token-based theming.

2|Updated Dec 8, 2018

Search Tags:#design #accessibility #frontend #react #tailwind #design-system

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design and implement distinctive, production-grade web UI with accessibility and responsive behavior built in.

Core Features & Use Cases

Standardized frontend stack guidance (React 19+ + TypeScript, Vite, TailwindCSS) and design-system defaults to accelerate delivery.
Accessibility-first conventions (semantic HTML, keyboard navigation, WCAG 2.2 AA) and token-based theming for consistency.
Design-system defaults and CSS tokens (typography, color, dot-grid background, glass-card aesthetics) to ensure maintainable, scalable UIs.

Quick Start

Create a React + TypeScript frontend project using the default stack and design tokens to deliver an accessible, responsive UI.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I build an accessible React dashboard with semantic HTML and keyboard navigation?▼

Apply semantic HTML, keyboard navigation, and WCAG 2.2 AA conventions using React 19, TypeScript, and TailwindCSS to implement accessible dashboards. This ensures inclusive semantics and responsive behavior are built into the frontend interface from the start.

What is token-based theming for frontend design systems?▼

Token-based theming uses CSS tokens for typography, color, and aesthetics to ensure maintainable and scalable frontend design systems. It provides design-system defaults that guarantee consistent, token-driven styling across all React and TypeScript components.

Can I use Vite and TailwindCSS to create a production-grade component library?▼

Yes, Vite and TailwindCSS support building production-grade component libraries by providing design-system defaults and accessibility-first conventions. This ensures your components are responsive, maintainable, and built with inclusive semantics.

Does this frontend design approach work for landing pages and responsive layouts?▼

Yes, this frontend design approach works for landing pages and responsive layouts. It applies token-based theming and accessibility-first conventions to ensure responsive behavior and inclusive semantics across landing pages and component libraries.

What's the best way to ensure my web UI meets WCAG 2.2 AA accessibility standards?▼

The best way to meet WCAG 2.2 AA accessibility standards is to enforce semantic HTML and keyboard navigation conventions during frontend implementation. Using a standardized React and TypeScript stack with accessibility-first design ensures inclusive semantics are satisfied.