frontend-design

Generate React, TypeScript, and Tailwind CSS frontend interfaces for healthcare systems.

Updated Jan 3, 2026

Search Tags:#accessibility #frontend #react #ui design #healthcare #clinical workflow

Ready to run

npx skills add https://github.com/CJCreator-New/care-harmony-hub --skill frontend-design-cjcreator-new

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/CJCreator-New/care-harmony-hub/tree/main/.trae/skills/frontend-design
Command: npx skills add https://github.com/CJCreator-New/care-harmony-hub --skill frontend-design-cjcreator-new

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating distinctive, production-grade frontend interfaces for healthcare systems that prioritize patient safety and clinical usability over generic aesthetics.

Core Features & Use Cases

Healthcare UI Design: Generates creative, polished code and UI design for components, pages, dashboards, and clinical workflows (medication entry, vital signs, lab results, appointments).
Safety & Usability Focus: Balances aesthetics with patient safety and clinical workflow requirements, adhering to accessibility standards (WCAG AAA for critical paths).
Use Case: A user might ask to build a React component for medication entry that is clear, safe, and usable by nurses with gloves, ensuring critical information is prominent and irreversible actions require confirmation.

Quick Start

Use the frontend-design skill to build a React component for entering vital signs, ensuring abnormal values are clearly flagged and the interface is usable on a tablet.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I build a React component for medication entry that prevents clinical errors?▼

Designing healthcare UIs requires balancing distinct aesthetics with patient safety and clinical usability. It involves creating production-grade interfaces that prioritize data clarity, role-specific layouts, and strict accessibility standards over generic visual appeal.

What is the best way to ensure clinical workflow interfaces meet WCAG AAA standards?▼

Build accessible clinical workflows by generating React and TypeScript components with Tailwind CSS that adhere to WCAG AAA standards for critical paths. This ensures data clarity and role-specific layouts for safe clinical usability.

Can I use Tailwind CSS and TypeScript to create dashboards for clinical workflows?▼

Yes, you can generate production-grade React interfaces using TypeScript and Tailwind CSS for clinical workflows. This includes components for medication entry, vital signs, lab results, and appointments, ensuring data clarity and role-specific layouts.

How do I design a vital signs interface that flags abnormal values and works on tablets?▼

Generate a React component for entering vital signs that clearly flags abnormal values and ensures tablet usability. This involves using TypeScript and Tailwind CSS to prioritize data clarity and adhere to WCAG AAA standards for critical clinical paths.

Does generating production-grade healthcare UIs require specific accessibility standards for critical paths?▼

Yes, generating production-grade healthcare UIs requires adhering to WCAG AAA standards specifically for critical clinical paths. This ensures distinct aesthetics do not compromise patient safety or clinical usability in role-specific layouts.