frontend-ui-engineering

Constructs React 19 interfaces with TypeScript, Vite, Tailwind CSS, and semantic HTML for SmartFinance conventions.

Updated Mar 1, 2026

Search Tags:#UI development #React 19 #Accessibility #Semantic HTML #Design tokens

Ready to run

npx skills add https://github.com/PM4-SmartFinance/SmartFinance --skill frontend-ui-engineering-pm4-smartfinance

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/PM4-SmartFinance/SmartFinance/tree/main/.claude/skills/frontend-ui-engineering
Command: npx skills add https://github.com/PM4-SmartFinance/SmartFinance --skill frontend-ui-engineering-pm4-smartfinance

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of building React 19 UIs that adhere to SmartFinance's conventions, ensuring accessibility, semantic HTML, and design-token compliance while minimizing development time and effort.

Core Features & Use Cases

React 19 UI Development: Facilitates the creation of UI components that are compatible with React 19.
Accessibility and Compliance: Ensures that UIs are accessible and adhere to semantic HTML and design-token standards.
Use Case: If you are developing a new component for the SmartFinance platform that requires accessibility and follows the established design guidelines, this Skill can help you achieve that quickly and efficiently.

Quick Start

Use the frontend-ui-engineering skill to create a new React component for the SmartFinance dashboard.

Frequently Asked Questions about frontend-ui-engineering

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

FAQPage Schema

How do I build React 19 components that meet SmartFinance design conventions?▼

Building React 19 components for SmartFinance requires utilizing TypeScript, Vite, Tailwind CSS, and semantic HTML. This ensures your UIs are accessible and strictly adhere to established design token conventions.

What is the best way to ensure semantic HTML and accessibility in React UI development?▼

The best way to ensure semantic HTML and accessibility in React UI development is by leveraging React 19 features alongside TypeScript. Following SmartFinance conventions streamlines building accessible, production-quality interfaces efficiently.

Can I use Tailwind CSS and Vite for SmartFinance dashboard component development?▼

Yes, you can use Tailwind CSS and Vite for SmartFinance dashboard development. This Skill facilitates creating production-quality React 19 components utilizing these specific tools while maintaining design-token compliance and accessibility.

Do I need TypeScript to create production-quality React 19 UIs for SmartFinance?▼

Yes, TypeScript is required to create production-quality React 19 UIs for SmartFinance. The development process emphasizes TypeScript to ensure type safety and adherence to SmartFinance's established design and development conventions.

How do design tokens work when building React 19 user interfaces?▼

Design tokens work as standardized variables that maintain visual consistency across React 19 user interfaces. By utilizing Tailwind CSS and SmartFinance conventions, your UI components automatically adhere to these established design-token standards.