skills.rest
viktorbezdek
viktorbezdekCOMMUNITY
Explore all skills by this author →
𝕏@viktorbezdekGitHub

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

10|2|Updated Mar 12, 2026
Search Tags:#accessibility#frontend#figma#tailwind#shadcn#design-systems#radix-ui
One-click install
npx skills add https://github.com/viktorbezdek/skillstack --skill frontend-design-viktorbezdek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/viktorbezdek/skillstack/tree/main/frontend-design/skills/frontend-design
Command: npx skills add https://github.com/viktorbezdek/skillstack --skill frontend-design-viktorbezdek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, @axe-core/playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Provides a complete frontend design system workflow to eliminate inconsistent styling, accessibility regressions, and slow Figma-to-code handoffs by unifying design tokens, Tailwind styling, accessible primitives, and component theming into repeatable patterns.

Core Features & Use Cases

  • Component library guidance combining Tailwind CSS, Radix UI primitives, and shadcn/ui for production-ready UI components.
  • Design token architecture and Figma-to-code workflows with extraction, transformation, and validation scripts to keep tokens consistent across themes.
  • Accessibility and responsive patterns: WCAG 2.2 contrast guidance, keyboard navigation, ARIA patterns, and responsive/container query strategies.
  • Performance and testing recommendations including Tailwind optimization, virtualization, Playwright/axe testing, and visual regression strategies.

Quick Start

Create an accessible, responsive UI component using Tailwind + Radix + shadcn/ui and extract design tokens from Figma for theming.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I extract design tokens from Figma for Tailwind CSS theming?▼

To extract design tokens from Figma for Tailwind CSS theming, use the provided token transformation and validation scripts to synchronize variables across themes. This ensures consistent styling and eliminates manual Figma-to-code handoff errors.

What is the best way to build accessible UI components with Radix UI and shadcn/ui?▼

The best way to build accessible UI components with Radix UI and shadcn/ui is to combine them with Tailwind CSS. This approach provides production-ready primitives that meet WCAG 2.2 contrast and keyboard navigation requirements.

Can I use Playwright and axe to audit accessibility in a React component library?▼

Yes, you can use Playwright and axe to audit accessibility in a React component library. The workflow integrates @axe-core/playwright and @playwright/test to run automated WCAG 2.2 compliance checks and visual regression strategies.

Does this approach support responsive layout design with container queries in Next.js?▼

Yes, this approach supports responsive layout design with container queries in Next.js. It provides responsive container query strategies alongside Tailwind optimization to ensure adaptable, production-ready UI systems.

How do I prevent accessibility regressions when updating a Tailwind design system?▼

To prevent accessibility regressions when updating a Tailwind design system, implement automated Playwright/axe testing and visual regression strategies. This validates ARIA patterns, WCAG 2.2 contrast, and keyboard navigation continuously.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Build accessible Next.js interfaces with shadcn/ui components, forms, tables, and dark mode.

Community
Intermediate
joe-watkinsjoe-watkins
1

a11y-tester

Run axe-core accessibility tests on web pages via Playwright MCP.

Community
Advanced
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
jg-chalk-iojg-chalk-io

moai-design-systems

Automate design system creation and validation with tokens, components, and WCAG 2.2 checks.

Community
Advanced