skills.rest
CJCreator-New
CJCreator-NewCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/CJCreator-New/care-harmony-hub --skill frontend-design-cjcreator-new
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
neozenithneozenith
2

vite-adk-stack

Integrate Google ADK with Vite, React, TypeScript, Tailwind CSS, and Shadcn UI.

Community
Advanced
PhenoMLPhenoML
2

phenoml-workflow

Create and execute PhenoML workflows for healthcare data processing.

Official
Advanced
lord-vinayaklord-vinayak

accessibility-audit

Audit design files and UI descriptions for WCAG 2.2 AAA, Section 508, and ARIA APG compliance.

Community
Advanced
emilyLi2020emilyLi2020
2

v0-prompt-crafter

Transform product descriptions and PRDs into Vercel v0 prompts.

Community
Intermediate