skills.rest
indykish
indykishCOMMUNITY
Explore all skills by this author →
Website𝕏@indykishGitHub

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
One-click install
npx skills add https://github.com/indykish/dotfiles --skill frontend-design-indykish
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
CodeForPhillyCodeForPhilly

frontend-shadcn

Standardize React frontend development with Vite, React 19, TypeScript, Tailwind CSS, and React Router v7.

Official
Intermediate
buchananwillbuchananwill
2

mandate-ui-design

Evaluate UI designs for semantic tokens, composability, and theming.

Community
Intermediate
sigmadigitalzasigmadigitalza
1

frontend-accessibility-review

Audit web frontends for WCAG 2.2 AA conformance with static and live checks.

Official
Advanced
TurnaboutHeroTurnaboutHero
12

pixel

Translate high-fidelity UI designs into responsive React components with accessible markup.

Community
Intermediate