skills.rest
duyet
duyetCOMMUNITY
Explore all skills by this author →
Website𝕏@_duyetGitHub

frontend-design

Generate production-ready React/Next.js frontend interfaces with design tokens and accessible components.

5|Updated Nov 18, 2025
Search Tags:#React#Next.js#production-code#design-systems#frontend-design#UI-components
One-click install
npx skills add https://github.com/duyet/duyetbot-agent --skill frontend-design-duyet
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/duyet/duyetbot-agent/tree/main/apps/duyetbot-action/.claude/skills/frontend-design
Command: npx skills add https://github.com/duyet/duyetbot-agent --skill frontend-design-duyet

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps designers and frontend engineers translate user requirements into distinctive, production-grade frontend interfaces, reducing design drift and implementation ambiguity.

Core Features & Use Cases

  • Creative direction and concrete UI specifications that avoid generic AI aesthetics.
  • Production-ready code generation for React/Next.js projects with component structure and styling tokens.
  • Design systems guidance including typography, color tokens, spacing, and accessible components.
  • Use Case: Design a modern admin dashboard with a bold visual language and reusable components.

Quick Start

Ask for frontend components, pages, or dashboards and the skill will propose a bold visual direction and deliver production-ready code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-ready React components for a design system?▼

To generate production-ready React components, this skill specifies component architecture, design tokens, and accessible UI structures. It outputs typography, color, and spacing specifications directly within modern React/Next.js stacks to prevent design drift.

What is the best way to build a modern admin dashboard with Next.js?▼

Building a modern admin dashboard with Next.js is achieved by applying a bold visual direction and reusable UI components. The skill translates user requirements into distinctive, production-grade frontend interfaces with concrete specifications.

Can I use this to define design tokens for spacing and color in my React project?▼

Yes, you can define design tokens for spacing and color in your React project. The skill provides design systems guidance, specifying typography, color tokens, and spacing to ensure accessible and consistent component architecture.

How do I avoid generic AI aesthetics when generating frontend UI?▼

To avoid generic AI aesthetics when generating frontend UI, the skill applies creative direction and concrete UI specifications. It translates requirements into distinctive, production-grade interfaces rather than defaulting to standard templates.

Does this skill work with Next.js stacks for frontend development?▼

Yes, this skill works with Next.js stacks for frontend development. It generates production-ready code and component structures specifically tailored for modern React/Next.js environments, including design tokens and accessible components.

Related Skills

Explore More Design & Creative Skills→
allieraysallierays
38

Styleguide Generator

Generates a /styleguide route with React components and CSS variables from user-defined preferences.

Community
Advanced
wangrenzhu-olawangrenzhu-ola
2

frontend-design

Detect design signals and generate frontend interfaces with visual verification.

Community
Advanced
handsomelong922handsomelong922

frontend-patterns

Provide reusable React and Next.js patterns for component composition, state management, and data fetching.

Community
Advanced
tenzirtenzir
2

styling-tenzir-ui

Provide Tenzir design system tokens and CSS component specifications for UI styling.

Official
Basic