frontend-engineer

Implement Next.js frontend code with shadcn/ui and design-token fidelity.

218|33|Updated Jan 7, 2026

Search Tags:#accessibility #frontend #Next.js #TailwindCSS #shadcn-ui #server-components #design-tokens

Ready to run

npx skills add https://github.com/first-fluke/fullstack-starter --skill frontend-engineer-first-fluke

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/first-fluke/fullstack-starter/tree/main/.agents/skills/frontend-engineer
Command: npx skills add https://github.com/first-fluke/fullstack-starter --skill frontend-engineer-first-fluke

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Develop maintainable frontend code using shadcn/ui, best practices, and strict design alignment.

Core Features & Use Cases

Design fidelity: Map UI to design tokens and avoid hard-coded values.
Performance & Rendering: Prefer Server Components for performance; use Client Components only for interactivity and API integration.
Accessibility: Ensure semantic HTML and screen reader compatibility are mandatory.

Quick Start

Follow the guidelines to scaffold a Next.js project with shadcn/ui, TailwindCSS v4, and design tokens, then implement a sample component that matches the patterns described.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema

How do I ensure design token fidelity in Next.js 16 without hard-coded values?▼

To ensure design token fidelity in Next.js 16, map UI components directly to design tokens and strictly avoid hard-coded values. This approach maintains strict design alignment and scalable styling across your shadcn/ui project.

When should I use Server Components vs Client Components in Next.js for performance?▼

Prefer Server Components by default for optimal Next.js performance. Use Client Components exclusively when you need interactivity, state management, or direct API integration, minimizing client-side JavaScript delivery.

What's the best way to build accessible frontend components with shadcn-ui and TailwindCSS v4?▼

The best way to build accessible frontend components with shadcn-ui is to enforce semantic HTML structures and ensure screen reader compatibility. This mandates strict accessibility practices across all server and client components.

Do I need prior React experience to scaffold a Next.js project with shadcn/ui?▼

Yes, you need prior experience with React, Next.js 16, TailwindCSS v4, and shadcn/ui. Familiarity with these frameworks is required to follow strict import orders, component patterns, and testing practices.

How does semantic HTML improve screen reader compatibility in TailwindCSS projects?▼

Semantic HTML improves screen reader compatibility by providing meaningful structure and context to page elements. Enforcing semantic HTML in TailwindCSS projects ensures mandatory accessibility compliance for users with assistive technologies.