skills.rest
anicdh
anicdhCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui

Apply Tailwind and Shadcn/ui patterns with accessibility rules to React components.

1|Updated Mar 30, 2026
Search Tags:#frontend#react#tailwind#design-system#shadcn-ui#ui-patterns
One-click install
npx skills add https://github.com/anicdh/agstack --skill frontend-ui-anicdh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui
Source: https://github.com/anicdh/agstack/tree/main/.claude/skills/frontend-ui
Command: npx skills add https://github.com/anicdh/agstack --skill frontend-ui-anicdh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes frontend UI development by embedding consistent Tailwind conventions, Shadcn/ui patterns, and accessibility rules into component creation, reducing drift and rework.

Core Features & Use Cases

  • Tailwind conventions and component maps ensure mobile-first, responsive layouts.
  • Shadcn/ui integration guidance for consistent UI primitives and wrappers.
  • Layout patterns and accessibility guidelines baked into ready-to-use components and templates.

Quick Start

Apply the Frontend UI guidelines to the next React component you modify.

Frequently Asked Questions about frontend-ui

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

FAQPage Schema
How do I standardize Tailwind conventions and Shadcn/ui patterns in React components?▼

Standardize React component UI by embedding consistent Tailwind conventions, Shadcn/ui patterns, and accessibility rules, reducing drift and rework across your project.

What's the best way to enforce responsive layout patterns and accessibility checks in React?▼

Enforce responsive layouts and accessibility by baking mobile-first guidelines and semantic tokens into ready-to-use React component templates and wrappers.

Can I use these UI patterns with my existing React and Tailwind project?▼

Yes, these UI patterns apply directly to React projects using Tailwind and Shadcn/ui, covering components, layouts, responsiveness, and accessibility checks.

How do I create a unified style map and component wrappers for Shadcn/ui?▼

Create a unified style map and component wrappers by applying standardized Shadcn/ui integration guidance to ensure consistent UI primitives across your application.

Why does my frontend UI development suffer from style drift and rework?▼

Frontend UI development suffers from drift without standardized Tailwind conventions and Shadcn/ui patterns, which this approach resolves by embedding consistent rules into component creation.

Do I need semantic tokens to standardize my React design system?▼

Yes, semantic tokens satisfy requirements for a unified style map, ensuring your React design system maintains consistent styling and accessibility across components.

Related Skills

Explore More Design & Creative Skills→
chrishuffman5chrishuffman5

shadcn-ui

Integrate shadcn/ui components into React applications with Tailwind CSS.

Community
Advanced
HouseGarofaloHouseGarofalo
3

component-library

Develop reusable UI component libraries with design tokens and Storybook documentation.

Official
Intermediate
tech-leads-clubtech-leads-club
5.0k

figma-implement-design

Translate Figma designs into production-ready UI code via Figma MCP.

Official
Advanced
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced