ui-styling_skill

This skill helps you design accessible, responsive UIs using shadcn/ui, Radix UI, and Tailwind, enabling rapid prototyping and consistent design systems.

Python

0

GitHub Stars

2

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill jjuidev/jss --skill ui-styling

LICENSE.txt11.1 KB
SKILL.md9.4 KB

Overview

This skill helps you style UIs using shadcn/ui components combined with Tailwind CSS for accessible, themeable, and responsive interfaces. It focuses on pragmatic component composition, dark mode, design tokens, and rapid prototyping with strong type safety. Use it to build production-ready React UIs or iterate on visual systems quickly.

How this skill works

The skill wires shadcn/ui (Radix primitives + prebuilt components) into your project, configures Tailwind, and provides patterns for composing components with utility classes. It includes scripts to add components and generate Tailwind configs, plus examples for forms, dialogs, tables, and responsive layouts. Accessibility, theme variables, and dark-mode integration are covered so components behave correctly across devices and assistive technologies.

When to use it

Building React-based apps (Next.js, Vite, Remix, Astro) with a component-driven approach
Implementing accessible overlays, forms, tables, and navigation using Radix-based primitives
Creating responsive, mobile-first layouts with Tailwind utility classes
Adding dark mode, custom color palettes, and theme toggles
Rapid prototyping and visual system exploration with canvas-driven compositions

Best practices

Compose UIs from small, well-typed primitives rather than monolithic components
Prefer Tailwind utilities for one-off styles; extract repeated patterns into components
Design mobile-first and layer responsive variants using Tailwind breakpoints
Apply ARIA patterns and Radix focus management for keyboard and screen reader support
Centralize design tokens (colors, spacing, typography) in Tailwind config and CSS variables

Example use cases

Admin dashboard with data tables, filters, and responsive cards using shadcn components
Sign-in and profile forms with react-hook-form validation and accessible form messages
Site-wide theme system with CSS variables and a next-themes dark-mode toggle
Marketing pages and posters created with canvas-informed visual layouts and Tailwind utilities
CLI-driven automation: add components and generate Tailwind config via provided Python scripts

FAQ

TypeScript is recommended because shadcn/ui is TypeScript-first and improves developer experience, but you can use the components in JS projects.

How does dark mode work?

Dark mode is implemented with CSS variables and Tailwind dark variants; use next-themes or a similar provider to toggle themes and persist user preference.