LogoClawIndex
CasesSkillsAbout
LogoClawIndex

Frontend Next.js & Shadcn - Next.js and Shadcn UI Front-End Engineering Constraints

Provides front-end engineering constraints and Apple-inspired design standards for React, Next.js App Router, Tailwind CSS, and Shadcn UI.

Tags

Updated: 2026-09-21
Next.jsShadcn UITailwind CSSReactFrontendTypeScript

Capabilities

Set up Next.js App Router architectureConfigure Tailwind CSS and CSS variablesIntegrate Shadcn UI componentsValidate forms using react-hook-form and zod

Typical Inputs

Frontend source codeUI design specificationsLocalization message files

Typical Outputs

Next.js frontend application codeReact component filesTailwind CSS stylesheet files

What this skill does

  • Set up Next.js App Router architecture
  • Configure Tailwind CSS and CSS variables
  • Integrate Shadcn UI components
  • Validate forms using react-hook-form and zod
  • Configure next-intl internationalization
  • Manage state using Zustand
  • Apply Apple design system standards
  • Handle loading, empty, error UX states

Inputs

  • Frontend source code
  • UI design specifications
  • Localization message files

Outputs

  • Next.js frontend application code
  • React component files
  • Tailwind CSS stylesheet files
  • i18n configuration files

Requirements

  • Node.js runtime environment
  • Next.js App Router
  • TypeScript strict mode
  • Shadcn CLI
  • Tailwind CSS

Source

  • Spec: SKILL.md

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.