skills.rest
jidohyun
jidohyunCOMMUNITY
Explore all skills by this author →
𝕏@build_hyunGitHub

frontend-engineer

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

Related Skills

Explore More Software Engineering Skills→
VKirillVKirill
15

tailwind

Configure Tailwind CSS 4 with CSS-first tokens and modern variants.

Community
Advanced
HCMUTE-RTICHCMUTE-RTIC

ui-visual-validator

Validate UI modifications for design system compliance and accessibility via screenshot analysis.

Official
Advanced
nth5693nth5693
370

Next.js Best Practices Skill

Implement Next.js App Router architecture and component best practices.

Community
Intermediate
snake-dev-teamsnake-dev-team

ck:ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Official
Intermediate