skills.rest
adteco
adtecoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

adteco-frontend-guidelines

Standardize React/ShadCN/Tailwind build patterns for Next.js 15 TypeScript apps.

Updated May 10, 2025
Search Tags:#frontend#react#nextjs#tailwind#shadcn#tanstack-query#radix
One-click install
npx skills add https://github.com/adteco/glapi --skill adteco-frontend-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adteco-frontend-guidelines
Source: https://github.com/adteco/glapi/tree/main/.claude/skills/glapi-frontend-guidelines
Command: npx skills add https://github.com/adteco/glapi --skill adteco-frontend-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill keeps Adteco frontend teams aligned by codifying consistent React 18/19, ShadCN, Radix UI, Tailwind, TanStack Query, Clerk, and Next.js 15 practices so new components and pages stay accessible, performant, and type-safe.

Core Features & Use Cases

  • Component and feature checklists: Step-by-step reminders for imports, tailwind styling, cn() usage, TanStack Query hooks, and Clerk authentication when building UI pieces.
  • Opinionated architecture guidance: Describes project structure, TypeScript contracts, dark mode handling, and ShadCN/Radix integration for scalable apps.
  • Reference links: Deep dives into component patterns, tailwind styling, Radix integration, data fetching, file organization, performance, and TypeScript standards so teams can learn the rationale.

Quick Start

Use this skill to ask for the required imports, utility hooks, and styling conventions before implementing a new React feature.

Frequently Asked Questions about adteco-frontend-guidelines

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

FAQPage Schema
How do I standardize React and ShadCN component patterns in a Next.js 15 app?▼

Standardize React and ShadCN component patterns by applying opinionated architecture guidance that covers TypeScript contracts, dark mode handling, and Radix UI integration for scalable Next.js 15 apps.

What is the best way to manage data fetching with TanStack Query in a TypeScript React project?▼

Manage data fetching with TanStack Query by using standardized hooks that enforce type-safe conventions, preventing inconsistent data fetching implementations across your TypeScript React project components.

How do I build accessible React UI components using Radix primitives and Tailwind?▼

Build accessible React UI components by combining Radix primitives with Tailwind cn() utilities and ShadCN component imports, ensuring theme-aware accessibility standards are met throughout your application.

Does this frontend guidance support Clerk authentication workflows in Next.js 15?▼

Yes, this frontend guidance supports Clerk authentication workflows in Next.js 15 by providing step-by-step reminders for integrating Clerk alongside TanStack Query and ShadCN component development.

Why do my ShadCN and Tailwind implementations become inconsistent across different React features?▼

ShadCN and Tailwind implementations become inconsistent without standardized build patterns, but you can prevent this by applying opinionated architecture guidance and component checklists for file organization and styling.

Related Skills

Explore More Software Engineering Skills→
tlswhdghks42tlswhdghks42

nextjs-frontend-guidelines

Provide Next.js 15 frontend guidelines covering React 19, TypeScript, App Router, shadcn/ui, and Tailwind CSS 4 for the YGS project.

Community
Advanced
purrgrammerpurrgrammer
38

react

Guide React 19 server components, hooks, and server actions with TypeScript.

Community
Advanced
nekorush14nekorush14
4

react-state-management

Manage React client state with Context API and server state with TanStack Query.

Community
Advanced
bejranondabejranonda
27

web-artifacts-builder

Build React applications with TypeScript, Tailwind CSS, and shadcn/ui.

Community
Intermediate