skills.rest
MO196931
MO196931COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Transform UI requirements into TypeScript React components with Tailwind CSS design tokens.

1|Updated Jan 3, 2026
Search Tags:#accessibility#react#design-system#ui-components#design-tokens#frontend-design#tailwind-css
One-click install
npx skills add https://github.com/MO196931/documentosZai --skill frontend-design-mo196931
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/MO196931/documentosZai/tree/main/skills/frontend-design
Command: npx skills add https://github.com/MO196931/documentosZai --skill frontend-design-mo196931

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the inconsistency and tedium of frontend development by providing a systematic design token methodology that guarantees visual consistency, accessibility compliance, and maintainable code, while preserving creative freedom for unique aesthetic execution.

Core Features & Use Cases

  • Systematic Design Tokens: Generate comprehensive token systems for colors, typography, spacing, radius, shadows, and motion that ensure consistency across the entire application.
  • Production-Ready Components: Build type-safe, accessible React components with complete state coverage using Tailwind CSS and shadcn/ui patterns.
  • Creative Design Directions: Choose from five distinct templates (Minimal Premium SaaS, Bold Editorial, Soft & Organic, Dark Neon, Playful & Colorful) to create memorable, non-generic interfaces.
  • Use Case: A startup founder needs a polished landing page and dashboard for their new SaaS product. This Skill provides the complete design system, component library, and theme management to build a professional, accessible interface rapidly.

Quick Start

Use the frontend-design skill to build a complete team dashboard with design tokens, accessible components, and dark mode support.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-ready React components with design tokens?▼

Build production-ready React components with design tokens by generating a comprehensive system for colors, typography, and spacing using Tailwind CSS and shadcn/ui patterns. This ensures type-safe, accessible code with complete state coverage.

What is the best way to create a consistent UI design system for a SaaS dashboard?▼

A consistent UI design system for a SaaS dashboard is created by applying systematic design tokens across colors, typography, radius, shadows, and motion. This guarantees visual consistency, accessibility compliance, and maintainable code architecture.

How do I manage dark mode and theme variations using Tailwind CSS?▼

Manage dark mode and theme variations using Tailwind CSS by implementing a systematic design token methodology. This approach handles theme management while preserving creative freedom for unique aesthetic execution across your application.

Can I use this design token approach with Vue or Svelte instead of React?▼

Yes, this design token approach works with Vue or Svelte instead of React. The methodology generates production-ready frontend code with type-safe TypeScript implementations and Tailwind CSS across multiple frameworks.

How do I ensure my frontend UI components meet accessibility compliance?▼

Ensure frontend UI components meet accessibility compliance by building production-ready code with type-safe TypeScript and Tailwind CSS. The systematic design token methodology guarantees accessibility standards are satisfied across all component states.

What design templates are available for creating non-generic landing pages?▼

Available design templates for creating non-generic landing pages include Minimal Premium SaaS, Bold Editorial, Soft & Organic, Dark Neon, and Playful & Colorful. These creative directions help build memorable interfaces with complete design systems.

Related Skills

Explore More Design & Creative Skills→
pounctpounct

frontend-design

Generate React, Vue, Svelte, or HTML/CSS frontend code with design tokens and Tailwind CSS.

Community
Advanced
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
Cao-RCao-R

frontend-design

Transform UI style requirements into React and TypeScript code using design tokens.

Community
Advanced