skills.rest
first-fluke
first-flukeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/first-fluke/fullstack-starter --skill frontend-engineer-first-fluke
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
mrdonleemrdonlee

tailwind-v4-shadcn

Configure Tailwind CSS v4 and shadcn/ui with CSS-variable theming in Vite React projects.

Community
Advanced
jonnabiojonnabio
6

accessibility-audit

Audits frontend interfaces for WCAP 2.1 AA compliance and accessibility best practices.

Community
Intermediate
amo-tech-aiamo-tech-ai

React Frontend Development

Develop React frontend components with TypeScript, Tailwind CSS, and shadcn/ui.

Community
Intermediate
AreteDriverAreteDriver
4

web-frontend-builder

Scaffold React, Next.js, or static HTML projects with TypeScript and Tailwind CSS.

Community
Intermediate