skills.rest
johinsDev
johinsDevCOMMUNITY
Explore all skills by this author →
GitHub

ui

Develop shared UI components with Base UI, shadcn, and Storybook 9.

Updated May 7, 2026
Search Tags:#storybook#design-system#shadcn#ui-components#base-ui#tailwind-v4#theme-tokens
One-click install
npx skills add https://github.com/johinsDev/loyalty-app --skill ui-johinsdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/johinsDev/loyalty-app/tree/main/.claude/skills/ui
Command: npx skills add https://github.com/johinsDev/loyalty-app --skill ui-johinsdev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Reduces friction when creating or changing shared UI components by centralizing conventions for the loyalty-app monorepo’s Base UI–backed shadcn library and its Storybook documentation workflow.

Core Features & Use Cases

  • Component development for @loyalty/ui: Add or modify shadcn components that are copy-paste owned in packages/ui/src/components/ui, including Base UI–specific patterns.
  • Storybook-first visual verification: Write or update one CSF 3 story per component in apps/storybook/stories/ to ensure changes render correctly and are easy to review.
  • Theme token and dark mode tuning: Adjust Tailwind v4 @theme inline tokens in packages/ui/styles/globals.css (light/dark) and verify behavior via Storybook and the apps’ theme toggle.

Quick Start

Use the ui skill to add a new Base-UI-backed shadcn component to packages/ui, wire it into the barrel export, and create a matching Storybook story in apps/storybook for visual confirmation.

Frequently Asked Questions about ui

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

FAQPage Schema
How do I add a new shadcn component to a Base UI monorepo?▼

To add shared UI components, use the shadcn copy-paste model by placing components in packages/ui/src/components/ui, wiring the barrel export, and creating a matching CSF 3 Storybook story for visual verification.

How do I configure Tailwind v4 theme tokens for dark mode in a Base UI project?▼

Adjust Tailwind v4 theme tokens by modifying the @theme inline definitions in packages/ui/styles/globals.css for light and dark modes, then verify the visual behavior using Storybook and the application theme toggle.

What is the correct Storybook story format for documenting shared UI components?▼

The correct format for documenting components is CSF 3, requiring exactly one story file per component placed in the apps/storybook/stories/ directory to ensure changes render correctly and are easy to review.

Does the Base UI shadcn model require specific import conventions?▼

Yes, the Base UI shadcn model requires strict adherence to repository conventions including relative import rewriting to ensure component integration works correctly across the loyalty-app monorepo.

Why are my Base UI Storybook components not rendering correctly during theme tuning?▼

Rendering issues often stem from incorrect theme token configuration in packages/ui/styles/globals.css or missing Storybook configuration updates, which must align with Tailwind v4 @theme inline rules for light and dark modes.

Related Skills

Explore More Software Engineering Skills→
ollieb89ollieb89

tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui in a Turborepo monorepo.

Community
Intermediate
JimmyTranDevJimmyTranDev
1

tool-storybook-mcp

Coordinate Storybook MCP workflows to query docs, generate stories, preview components, and run tests.

Community
Advanced
harryy2510harryy2510

ui

Set up Tailwind v4, shadcn/ui, and base-ui primitives with CSS variable theming.

Community
Advanced
MajesteitBartMajesteitBart
2

shadcn-ui-expert

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

Community
Intermediate