skills.rest
Munreader
MunreaderCOMMUNITY
Explore all skills by this author →
Website𝕏@munreaderGitHub

frontend-design

Convert design requirements into React, TypeScript, and Tailwind CSS frontend workflows.

Updated Feb 13, 2026
Search Tags:#typescript#accessibility#frontend#react#component library#design tokens#tailwind
One-click install
npx skills add https://github.com/Munreader/M-nreader --skill frontend-design-munreader
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Munreader/M-nreader/tree/main/skills/frontend-design
Command: npx skills add https://github.com/Munreader/M-nreader --skill frontend-design-munreader

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill converts vague frontend style requirements into structured, production-ready code, streamlining UI development.

Core Features & Use Cases

  • Design Token Generation: Creates comprehensive, semantic-based design tokens for colors, typography, spacing, and more.
  • Component Development: Builds accessible, type-safe React components with full state coverage and responsiveness.
  • Page Assembly: Facilitates composing complete application pages from built components, ensuring consistency and best practices.
  • Custom Theme Support: Implements dark/light/system theme toggling, persistence, and user-preference detection.
  • Use Case: Quickly prototype a dashboard using predefined components, tokens, and templates, then adapt it for production environments.

Quick Start

Describe your UI style, target audience, and frameworks; then generate token sets, build components, and assemble pages following the provided methodology.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I convert UI design requirements into a React component library?▼

Converting UI design requirements into a React component library involves generating semantic design tokens for colors and typography, then building accessible, type-safe components with full state coverage and responsiveness.

What are design tokens and how do they structure frontend codebases?▼

Design tokens are semantic-based variables for colors, typography, and spacing that structure frontend codebases. They ensure maintainable, scalable, and visually cohesive web apps by centralizing style decisions into a systematic workflow.

Can I build a responsive dashboard with Tailwind CSS and TypeScript?▼

You can build a responsive dashboard with Tailwind CSS and TypeScript by composing complete application pages from built components, ensuring strict responsiveness and accessibility using React and design token principles.

Does this frontend workflow support custom dark and light theme toggling?▼

This frontend workflow supports custom dark and light theme toggling. It implements theme persistence, system preference detection, and user-preference toggling to ensure visually cohesive interfaces across different modes.

What is the best way to ensure accessibility in a React component library?▼

The best way to ensure accessibility in a React component library is to build type-safe components with full state coverage and strict responsiveness. This approach integrates accessibility directly into the token and component generation workflow.

Related Skills

Explore More Design & Creative Skills→
ruskibeatsruskibeats

brandkit

Generate brand guidelines and logos from brand strategy and design preferences.

Community
Advanced
TIAN0517TIAN0517

frontend-design

Transform UI design requirements into TypeScript frontend code with CSS variable tokens.

Community
Advanced
HieubkavHieubkav

ui-styling

Create accessible UI styling with shadcn/ui and Tailwind CSS for React applications.

Community
Advanced
dt418dt418

Docs Pack

Build documentation platforms with versioned docs, search, navigation, code highlighting, and API reference generation.

Community
Intermediate