skills.rest
PM4-SmartFinance
PM4-SmartFinanceOFFICIAL
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/PM4-SmartFinance/SmartFinance --skill frontend-ui-engineering-pm4-smartfinance
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
The-AIOSThe-AIOS
15

web-artifacts-builder

Automate setup, development, and bundling of React web artifacts with Vite.

Official
Intermediate
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
JhabbigJhabbig

tailwind-design-system

Standardize Tailwind CSS v4 design systems with token-driven theming and component variants.

Community
Advanced
resetreset

static-site-engineer

Develop front-end templates across Zola, Hugo, 11ty, Astro, and Eleventy sites.

Community
Advanced