frontend-engineer

Name: frontend-engineer
Availability: InStock
Author: jidohyun

Build shadcn/ui frontend components with design tokens and accessibility standards.

17|3|Updated Feb 7, 2026

Search Tags:#accessibility #frontend #react #best-practices #shadcn-ui #server-components #design-tokens

Ready to run

npx skills add https://github.com/jidohyun/NOD --skill frontend-engineer-jidohyun

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Develop production-grade frontend code that strictly adheres to design tokens, accessibility standards, and best practices using shadcn/ui.

Core Features & Use Cases

Use shadcn/ui components first and extend via cva variants or composition.
Align UI with design tokens to ensure pixel-for-pixel fidelity across pages.
Prefer Server Components for layout and SEO-critical pages; use Client Components for interactivity and API integration.

Quick Start

Create a production-grade frontend feature by scaffolding a server components-based UI with shadcn/ui, ensuring design-token alignment and accessibility.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema

How do I build React components that strictly follow design tokens?▼

To build React components aligned with design tokens, use shadcn/ui as the base and extend via cva variants to ensure pixel-for-pixel UI fidelity. This approach enforces strict import and naming conventions for scalable component libraries.

When should I use Server Components versus Client Components in a React UI?▼

Use Server Components for layout and SEO-critical pages, and Client Components for interactivity and API integration. This pattern ensures production-grade frontend performance while maintaining strict accessibility standards.

Can I use shadcn-ui with my existing design token system?▼

Yes, you can integrate shadcn-ui with an existing design token system by extending components through composition or cva variants. This ensures your UI remains strictly aligned with your token-driven styling standards.

What is the best way to ensure accessibility in a shadcn-ui component library?▼

The best way to ensure accessibility in a shadcn-ui component library is to apply strict accessibility standards alongside design-token alignment. Using cva variants maintains consistent, accessible interfaces across scalable component systems.

How do I scaffold a production-grade frontend feature with token-driven styling?▼

Scaffold a production-grade frontend feature by basing the UI on Server Components with shadcn-ui. This ensures design-token alignment and accessibility from the start, satisfying strict import and naming conventions.