web-artifacts-builder_skill

This skill guides building modern web apps with React, Tailwind, and shadcn/ui, emphasizing accessibility, type safety, and performance improvements.

Python

15

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 bejranonda/llm-autonomous-agent-plugin-for-claude --skill web-artifacts-builder

SKILL.md26.2 KB

Overview

This skill presents production-ready patterns for building modern web apps with React, Tailwind CSS, shadcn/ui and Vite. It focuses on component-driven architecture, TypeScript safety, accessibility, and performance so teams can ship consistent, maintainable UIs. Examples include button, card, and dialog component patterns plus a recommended project layout and Tailwind configuration.

How this skill works

I provide concrete component implementations, a recommended directory structure, and Tailwind configuration tailored to the stack. Code snippets show practical use of shadcn/ui primitives, utility helpers (cn), class-variance-authority for variants, and Radix-based dialogs. The guidance also includes CSS variables, dark-mode tokens, and motion recommendations for high-impact animations.

When to use it

Starting a new React + TypeScript project that needs fast iteration and consistent UI primitives
Standardizing component patterns across a team to improve reuse and accessibility
Migrating legacy styles to Tailwind utility classes and design tokens
Building production-ready dashboards, admin panels, or feature-rich single-page apps
Implementing accessible dialogs, cards, and buttons with consistent variants

Best practices

Organize code by components, features, and layout directories for clarity and scale
Use TypeScript types for components and VariantProps for predictable props and IDE hints
Keep design tokens as CSS variables and centralize them in globals.css for easy theming
Prefer shadcn/ui + Radix primitives for accessible defaults and composable building blocks
Use cva/class-variance-authority for variant-driven components and a small cn helper to merge classes
Favor one well-orchestrated page load animation over many incidental animations; use Framer Motion for complex choreography

Example use cases

Reusable button system with variants (default, destructive, outline, ghost, link) for consistent actions across the app
Composable card layout for content previews, dashboards, and list items with header/content/footer slots
Accessible dialog implementation using Radix and shadcn/ui patterns for modals, confirm flows, and forms
Tailwind config and CSS variables for consistent theming, dark mode, and layout containers
Project scaffold for teams: components/, lib/, hooks/, pages/, types/, global styles and Vite-based tooling

FAQ

Yes. The components and Tailwind configuration are framework-agnostic and integrate easily with Vite or Next.js; adjust import roots and file paths to match your project layout.

How do I customize colors and radius tokens?

Change the CSS variables in globals.css and extend the tailwind.config.js theme. Tokens are centralized so updates propagate across components without modifying component code.