frontend-developer

Build a React prototype for browsing drug discovery reports and knowledge graph data.

4|1|Updated Jan 8, 2024

Search Tags:#data visualization #frontend #react #knowledge graph #vite #markdown rendering #dashboard prototype

Ready to run

npx skills add https://github.com/OpenSourcePharmaFoundation/ospf-ayurveda-kg --skill frontend-developer-opensourcepharmafoundation

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/OpenSourcePharmaFoundation/ospf-ayurveda-kg/tree/main/.claude/skills/frontend-developer
Command: npx skills add https://github.com/OpenSourcePharmaFoundation/ospf-ayurveda-kg --skill frontend-developer-opensourcepharmafoundation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Researchers need a clear way to view pre-generated drug discovery and knowledge-graph outputs, but raw files are hard to explore without a dedicated interface.

Core Features & Use Cases

Prototype frontend for exploration: Create a React-based UI to browse candidate rankings, compounds, and pathway coverage for Oral Mucositis (OM) repurposing research.
Structured report rendering: Display Claude-generated markdown reports with custom rendering for tables, scorecards, box-drawing layouts, and non-standard score/coverage indicators.
Data integration from static outputs: Load knowledge-graph CSV/JSON artifacts and report JSON/markdown from the repository’s processed data folders for interactive inspection.
Use Case: Turn a folder of pre-generated candidate-ranking and pathway-analysis outputs into a researcher-facing dashboard where users can click items and understand evidence paths from compound → target → OM-associated genes.

Quick Start

Use the frontend-developer skill to generate a Vite + React + TypeScript prototype that renders the existing processed datasets and Claude report outputs into a browsable dashboard.

Frequently Asked Questions about frontend-developer

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

FAQPage Schema

How do I build a React frontend to visualize knowledge graph data from static CSV and JSON files?▼

To build a React frontend for knowledge graph visualization from static CSV and JSON files, this Skill generates a Vite and TypeScript prototype that loads processed data into an interactive dashboard for browsing compounds, targets, and disease-associated gene pathways.

How do I render markdown reports with custom scorecards and box-drawing layouts in React?▼

Rendering markdown reports with custom scorecards and box-drawing layouts in React requires custom preprocessing for non-standard score and coverage indicators, followed by safe HTML rendering with sanitization to securely display the structured report content.

What is the best way to prototype a dashboard for drug discovery candidate rankings?▼

The best way to prototype a dashboard for drug discovery candidate rankings is generating a Vite-based React UI that transforms pre-generated report outputs into a researcher-facing interface with interactive candidate scorecards and pathway coverage exploration.

Can I use Vite and TypeScript to create a UI for browsing pre-generated Oral Mucositis reports?▼

Yes, you can use Vite and TypeScript to create a UI for browsing pre-generated Oral Mucositis reports, as this Skill specifically targets building interactive interfaces for exploring repurposing research outputs and knowledge graph artifacts.

Does this frontend prototype approach work without a backend API for data integration?▼

This frontend prototype approach works without a backend API by directly loading static knowledge graph CSV and JSON artifacts alongside report markdown files from the repository’s processed data folders for interactive inspection.

Why does my React dashboard need custom preprocessing for markdown rendering?▼

Your React dashboard needs custom preprocessing for markdown rendering because Claude-generated drug discovery reports contain non-standard score and coverage indicators, box-drawing layouts, and structured tables that standard markdown parsers cannot interpret correctly.