skills.rest
joaoguirunas
joaoguirunasCOMMUNITY
Explore all skills by this author →
GitHub

sites-frontend-stack

Implements website frontends with Next.js App Router, Tailwind v4, shadcn/ui, and Motion.

3|3|Updated Apr 23, 2026
Search Tags:#frontend#next.js#design tokens#shadcn/ui#tailwind css#react components#motion
One-click install
npx skills add https://github.com/joaoguirunas/team-os --skill sites-frontend-stack-joaoguirunas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sites-frontend-stack
Source: https://github.com/joaoguirunas/team-os/tree/main/.claude/skills/sites-frontend-stack
Command: npx skills add https://github.com/joaoguirunas/team-os --skill sites-frontend-stack-joaoguirunas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Starting a new website project often means re-deciding the frontend stack, re-defining design tokens, and re-establishing component conventions every time. This Skill provides a standardized frontend stack and project structure so sites are built consistently with Next.js, Tailwind v4, shadcn/ui, and Motion. ## Core Features & Use Cases - Standard Stack Definition: Next.js App Router with TypeScript, Tailwind CSS v4 (@theme CSS-first tokens), shadcn/ui components, Motion for animations, Lucide icons, and next/font typography. - Design Tokens in One Place: Colors, typography scale, spacing, and radius declared once in globals.css via @theme, with guidance for migrating legacy Tailwind v3 configs. - Component & shadcn/ui Patterns: Typed component conventions with cva variants, shadcn/ui installation commands, composition examples, and the rule to never edit components/ui directly. - Use Case: When scaffolding a marketing site, use this Skill to set up the project structure, define brand tokens in @theme, install the needed shadcn/ui components, and build responsive sections with scroll-triggered Motion animations. ## Quick Start Set up a new website project using the standard frontend stack with Next.js, Tailwind v4 tokens, and shadcn/ui components.

Frequently Asked Questions about sites-frontend-stack

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

FAQPage Schema
How do I define design tokens in Tailwind CSS v4?▼

In Tailwind v4, declare tokens once in globals.css inside an @theme block, such as --color-primary or --radius-lg. Each token automatically becomes a utility class like bg-primary or rounded-lg, with no tailwind.config.ts needed.

How to set up shadcn/ui in a Next.js project?▼

Run npx shadcn@latest init, then add components individually with commands like npx shadcn@latest add button card dialog. For forms, add the form component and install react-hook-form, zod, and @hookform/resolvers.

What replaced Framer Motion for React animations?▼

The motion package is the successor to Framer Motion, imported in React as motion/react with a compatible API. It supports features like whileInView for scroll-triggered animations without manual useInView hooks.

Can I edit shadcn/ui component files directly?▼

No, files in components/ui should never be modified directly. Use the className prop for one-off overrides, cva() for systematic variants, or create a wrapper component for reusable customizations.

How do I migrate design tokens from Tailwind v3 to v4?▼

Move custom properties from :root and theme.extend mappings in tailwind.config.ts into the @theme block in globals.css. After migrating, the v3 config file can be removed since v4 is CSS-first.

Related Skills

Explore More Software Engineering Skills→
zivtechzivtech

copy-planner

Generate structured content briefs covering audience, goals, and success criteria.

Official
Intermediate
mtsatryanmtsatryan
1

seo-specialist

Analyze website SEO performance and outline an actionable optimization plan.

Community
Advanced
wpgauravwpgaurav
14

animate

Plan and implement purposeful motion for UI/UX designs with accessibility and performance constraints.

Community
Advanced
JP-CanoJP-Cano

astro

Create Astro components, configure static site generation, and manage content collections.

Official
Intermediate