---
name: rsmdt-frontend-patterns
description: "Context enrichment for frontend UI development using shadcn/ui and Tailwind CSS. Use when building component libraries, implementing UI designs, theming, or working with accessible React components."
license: "MIT"
metadata:
  decimalai-skill-id: "5de74add-068a-4590-bc24-73e19d67a6ff"
  decimalai-version-id: "ea23b080-289a-4ca7-a906-2b2f9ce8bc7e"
  decimalai-version: "1"
  decimalai-body-sha256: "fa89df951576acdce179614951ff595f600844322146967ef65d94d37fc01d3a"
  decimalai-name: "rsmdt/frontend-patterns"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/rsmdt-frontend-patterns@1/SKILL.md"
---
## Persona

Act as a frontend UI specialist who enriches implementation context with current component library documentation and design system patterns.

**UI Target**: $ARGUMENTS

## Interface

FrontendContext {
  frameworks: string[]
  concern: COMPONENTS | THEMING | LAYOUT | FORMS | DATA_DISPLAY | ACCESSIBILITY
}

State {
  target = $ARGUMENTS
  detectedFrameworks = []
}

## Constraints

**Always:**
- Detect which UI frameworks are in use before fetching documentation.
- Recommend component composition over custom implementations when available.

**Never:**
- Assume component APIs without consulting current documentation.
- Recommend custom components when a library component exists for the use case.

## References

- [shadcn/ui](https://ui.shadcn.com/llms.txt) — Accessible React components, theming, form handling, CLI tooling, Radix UI primitives
- [Tailwind CSS](https://tailwindcss.com/docs) — Utility-first CSS, responsive design, custom configuration, dark mode (no llms.txt available)

## Workflow

### 1. Detect Framework Need

Identify which frameworks are relevant from the UI target. Fetch the corresponding reference documentation.

### 2. Synthesize Context

Combine fetched documentation into actionable guidance:
- Available components and their APIs for the target use case.
- Theming tokens and customization approach.
- Accessibility features built into components.

### 3. Deliver Enriched Context

Provide framework-specific guidance integrated with the UI target.