frontend-design_skill

This skill helps you craft distinctive production-grade frontend interfaces using React, Tailwind v4, shadcn/ui, and motion while ensuring accessibility and

Shell

391

GitHub Stars

1

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 dmmulroy/.dotfiles --skill frontend-design

SKILL.md5.2 KB

Overview

This skill builds distinctive, production-grade frontend interfaces for React-based projects. It combines Tailwind CSS v4, shadcn/ui components, Motion animations, and a visual design philosophy that avoids generic AI aesthetics. Use it to craft memorable, accessible, and performant UI systems with strong typographic and color decisions.

How this skill works

I provide concrete patterns, configuration guidance, and component-level examples to implement designs with Tailwind v4 and shadcn/ui. The skill recommends animation patterns using motion/react and tailwindcss-animate, design tokens via @theme, OKLCH color usage, and accessibility-first Radix primitives. It balances visual direction, layout composition, and performance practices so you can move from concept to production-ready UI.

When to use it

Building UIs with Next.js, Vite, Remix, or other React frameworks
Creating visually distinctive pages, components, or brand materials
Implementing accessible components using shadcn/ui and Radix primitives
Styling with Tailwind CSS v4 features like @theme and container queries
Adding declarative animations, gestures, and layout transitions with Motion

Best practices

Start with design intent: define purpose, tone, and differentiation before coding
Accessibility first: semantic HTML, focus states, and ARIA via Radix/shadcn primitives
Mobile-first responsive development and container queries for layout control
Use design tokens (@theme) and OKLCH color tokens for consistent theming
Prefer TypeScript, automatic CSS purging, and avoid dynamic class name string assembly
Provide CSS fallbacks for critical enter/exit states when JS is unavailable

Example use cases

Design and implement a distinctive marketing landing page with bold typography and OKLCH color accents
Build a component library using shadcn/ui patterns, custom Field and InputGroup primitives, and dark mode tokens
Add motion-driven micro-interactions and page transitions with motion/react and AnimatePresence
Create posters or brand materials using the same design tokens and spatial composition rules
Prototype an asymmetrical dashboard layout that breaks the grid for visual emphasis

FAQ

Tailwind v4 tokens and visual guidelines work anywhere, but shadcn/ui and motion/react require React. Use CSS fallbacks and static assets for non-React projects.

How do I avoid generic AI-style visuals?

Choose a bold aesthetic direction, avoid overused fonts and cliche gradients, favor intentional type and color choices, and add handcrafted textures or asymmetry.