skills.rest
wahidyankf
wahidyankfCOMMUNITY
Explore all skills by this author →
𝕏@wahidyankfGitHub

swe-developing-frontend-ui

Guide TypeScript React UI development with repo-specific design tokens and WCAG compliance.

3|1|Updated Apr 18, 2026
Search Tags:#accessibility#shadcn-ui#design-tokens#frontend-ui#tailwind-css#ui-standards#react-components
One-click install
npx skills add https://github.com/wahidyankf/ose-primer --skill swe-developing-frontend-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swe-developing-frontend-ui
Source: https://github.com/wahidyankf/ose-primer/tree/main/.claude/skills/swe-developing-frontend-ui
Command: npx skills add https://github.com/wahidyankf/ose-primer --skill swe-developing-frontend-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates inconsistent, inaccessible, and off-brand frontend UI implementation in OSE-style monorepos by providing repo-specific guidance for TypeScript React component development, design token usage, and accessibility compliance.

Core Features & Use Cases

  • Comprehensive UI Guidance: Covers design token mapping, shadcn/ui + Radix composition patterns, accessibility requirements, 13 repo-specific anti-patterns, and per-app brand context for all Next.js frontend apps in the monorepo.
  • Standardized Component Development: Provides templates and strict rules for building reusable, accessible UI components that align with repo governance and brand requirements.
  • Use Case: A developer building a new data table component for the crud-fs-ts-nextjs educational platform can use this Skill to ensure the component uses the correct blue brand tokens, meets WCAG contrast requirements, and avoids common anti-patterns like nested Card components.

Quick Start

Use this skill to build a new accessible Button component for the crud-fs-ts-nextjs app following the repo's CVA variant and Radix Slot patterns.

Frequently Asked Questions about swe-developing-frontend-ui

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

FAQPage Schema
How do I build accessible React components with Tailwind CSS and shadcn/ui?▼

To build accessible React components with Tailwind CSS and shadcn/ui, use standardized composition patterns like Radix Slot and CVA variants. This ensures WCAG-compliant accessibility, correct design token mapping, and consistent UI standards across TypeScript Next.js applications.

What are common UI anti-patterns when developing frontend interfaces in a monorepo?▼

Common UI anti-patterns when developing frontend interfaces in a monorepo include inconsistent design token usage, off-brand styling, and inaccessible component compositions like nested Card components. Repo-specific governance rules help avoid these 13 documented anti-patterns.

How do I configure brand-aligned design tokens for a Next.js application?▼

Configure brand-aligned design tokens for a Next.js application by mapping specific brand colors, such as blue brand tokens, to your Tailwind CSS configuration. This ensures strict UI standards and consistent visual identity across all frontend apps within the monorepo.

Does this Skill work with TypeScript React frontend tasks in OSE-style monorepos?▼

Yes, this Skill works directly with TypeScript React frontend tasks in OSE-style monorepos. It applies to TSX component creation, Tailwind styling, design token configuration, and WCAG accessibility compliance specifically for Next.js applications.

How do I ensure my shadcn/ui components meet WCAG accessibility requirements?▼

Ensure shadcn/ui components meet WCAG accessibility requirements by following standardized Radix composition patterns and strict UI governance rules. This enforces WCAG-compliant contrast requirements and proper semantic structure for all React frontend components.

What is the best way to standardize UI component development across multiple Next.js apps?▼

The best way to standardize UI component development across multiple Next.js apps is to apply shared design token mapping, shadcn/ui patterns, and per-app brand context. This eliminates inconsistent UI implementation and ensures accessible, reusable TypeScript React components.

Related Skills

Explore More Software Engineering Skills→
Renzo-TognellaRenzo-Tognella

frontend-nextjs-react

Develop frontend applications with Next.js, React, TypeScript, Tailwind CSS, and shadcn/ui.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced
HikkywannaflyHikkywannafly
1

shadcn-ui

Guide developers in implementing and customizing shadcn/ui components in React and Next.js projects.

Community
Intermediate
automata-networkautomata-network

design-bible

Align React, Vue, and HTML UI development with token-driven design system rules.

Official
Advanced