skills.rest
mnogodumalon
mnogodumalonCOMMUNITY
Explore all skills by this author →
GitHub

frontend-impl

Implement React/TypeScript dashboards from design_brief.md with Living Apps API integration.

Updated Jan 20, 2026
Search Tags:#React#frontend#TypeScript#dashboard#Living Apps API#design_brief
One-click install
npx skills add https://github.com/mnogodumalon/696f823d82832d065e68cd7b --skill frontend-impl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-impl
Source: https://github.com/mnogodumalon/696f823d82832d065e68cd7b/tree/main/.claude/skills/frontend-impl
Command: npx skills add https://github.com/mnogodumalon/696f823d82832d065e68cd7b --skill frontend-impl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill translates a designer's dashboard brief into a production-ready React/TypeScript dashboard, eliminating ambiguity and rework by enforcing exact specifications.

Core Features & Use Cases

  • Production-grade frontend dashboard implemented exactly as described in design_brief.md
  • Supports mobile and desktop layouts with precise component structure per the brief
  • Integrates with Living Apps API and follows the strict UI, typography, and theming constraints

Quick Start

Review design_brief.md and implement Dashboard.tsx exactly as described.

Frequently Asked Questions about frontend-impl

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

FAQPage Schema
How do I implement a React dashboard from a design brief?▼

To build a React dashboard from a design brief, this skill reads design_brief.md and generates Dashboard.tsx using exact TypeScript types, specified fonts, and CSS variables. It outputs production-ready UI components adhering strictly to the provided constraints.

Can I use TypeScript for building dashboards with Living Apps API?▼

Yes, you can use TypeScript for building dashboards with Living Apps API. This skill constructs the dashboard with strict TypeScript types and integrates Living Apps API endpoints directly into the generated component structure.

What is the best way to ensure exact adherence to design brief constraints in React?▼

The best way to ensure exact adherence to design brief constraints in React is to enforce specifications programmatically. This skill parses design_brief.md to apply precise typography, CSS variables, and layout structures without manual interpretation.

Does this React dashboard implementation support mobile and desktop layouts?▼

Yes, this React dashboard implementation supports both mobile and desktop layouts. It applies to the full UI development stack, generating responsive component structures that match the layout definitions specified in design_brief.md.

Do I need a design_brief.md file to generate a production-ready React dashboard?▼

Yes, you need a design_brief.md file to generate a production-ready React dashboard. This skill uses the document as its blueprint, extracting exact UI, theming, and API integration constraints to eliminate ambiguity and rework.

Related Skills

Explore More Software Engineering Skills→
mnogodumalonmnogodumalon

frontend-design

Generate a Markdown design brief for frontend dashboards with CSS variable templates.

Community
Basic
jfrometajfrometa

webapp-testing

Execute Playwright-based end-to-end tests against live web routes.

Community
Advanced
aroidoaroido

agent-api-integrator

Generate type-safe API clients and React Query hooks from API specifications.

Official
Intermediate
janjaszczakjanjaszczak

vanilla-web

Build or refactor plain HTML/CSS/JS projects using modular ES modules.

Community
Intermediate