skills.rest
FerranGuardia
FerranGuardiaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-craft

Build UI components and design systems for Next.js with shadcn/ui and Tailwind CSS.

Updated Mar 2, 2026
Search Tags:#frontend#nextjs#tailwind#design-system#shadcn#visual-qa#ui-components
One-click install
npx skills add https://github.com/FerranGuardia/claude-autonomous-setup --skill frontend-craft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-craft
Source: https://github.com/FerranGuardia/claude-autonomous-setup/tree/main/skills/frontend/tailwind-shadcn
Command: npx skills add https://github.com/FerranGuardia/claude-autonomous-setup --skill frontend-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines frontend development for production-grade Next.js applications using a cohesive stack of shadcn/ui and Tailwind CSS. It reduces setup time, aligns design systems, and accelerates UI delivery.

Core Features & Use Cases

  • Design systems and tokens setup for consistent UI across pages and components.
  • Rapid UI component creation with shadcn/ui primitives and Tailwind utilities.
  • Visual QA workflows and deployment-ready styling for Next.js projects in teams.

Quick Start

Provide a new Next.js project, install and configure shadcn/ui with Tailwind, and scaffold initial design-system components.

Frequently Asked Questions about frontend-craft

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

FAQPage Schema
How do I set up a design system with shadcn/ui and Tailwind CSS in Next.js?▼

To set up a design system in Next.js, configure shadcn/ui with Tailwind CSS to establish design tokens and scaffold initial UI components. This ensures consistent styling across pages and accelerates UI delivery for production applications.

What is the best way to structure UI components for production Next.js apps?▼

The best way to structure UI components for production Next.js apps is using shadcn/ui primitives combined with Tailwind utilities. This approach provides server and client layout guidance, ensuring accessible and deployment-ready architecture.

Does this frontend workflow support visual QA testing for Next.js projects?▼

Yes, this frontend workflow supports visual QA testing for Next.js projects. It includes visual QA workflows and deployment-ready styling pipelines to help teams coordinate and verify UI consistency before release.

Can I use shadcn/ui primitives to build accessible UI components in Next.js?▼

Yes, you can use shadcn/ui primitives to build accessible UI components in Next.js. The workflow includes accessibility considerations and design token requirements to ensure compliant and consistent UI architecture.

How do I configure design tokens for a Tailwind CSS design system?▼

To configure design tokens for a Tailwind CSS design system, define your token variables and integrate them with shadcn/ui primitives. This establishes a cohesive styling pipeline across all pages and components in your Next.js application.

Related Skills

Explore More Software Engineering Skills→
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
ChapmanRichardChapmanRichard

asl-general-ui-component-reuse-rust-red

Enforce Rust-Red design tokens and component reuse from src/components/ui.

Community
Intermediate
JordiNodeJSJordiNodeJS

component-development

Create accessible React 19 UI components with Shadcn UI and Tailwind CSS 4.

Community
Intermediate
trungdo9trungdo9
3

ui-styling

Create React-based user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced