skills.rest
OntoLedgy
OntoLedgyOFFICIAL
Explore all skills by this author →
GitHub

ui-engineer

Enforce standardized React/TypeScript frontend patterns with WCAG 2.2 AA and Core Web Vitals quality gates.

Updated Aug 27, 2026
Search Tags:#typescript#accessibility#frontend#react#component-architecture#data-visualisation#ol-ui-library
One-click install
npx skills add https://github.com/OntoLedgy/ol_ai_context_library --skill ui-engineer-ontoledgy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-engineer
Source: https://github.com/OntoLedgy/ol_ai_context_library/tree/main/skills/ui-engineer
Command: npx skills add https://github.com/OntoLedgy/ol_ai_context_library --skill ui-engineer-ontoledgy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the risk of inconsistent, non-performant, and inaccessible React/TypeScript frontend code by providing standardized implementation patterns, mandatory quality gates, and alignment with the ol_ui_library component catalogue, reducing rework and ensuring all UI deliverables meet WCAG 2.2 AA accessibility standards and Core Web Vitals performance targets.

Core Features & Use Cases

  • Standardized Frontend Conventions: Extends the javascript-data-engineer skill with React/TypeScript-specific rules including SOLID component architecture, state co-location guidelines, Atomic Design construction order, and strict naming conventions to ensure consistency across all UI work.
  • Mandatory Quality Gates: Enforces pre-ship validation for type checking, linting (including accessibility and React hooks rules), unit and end-to-end testing, Storybook compilation, and Lighthouse performance audits to catch issues before code is merged.
  • Pre-Built UX Journey Patterns: Provides implementation templates for high-frequency OntoLedgy workflows including document upload, multi-step pipeline wizards, real-time monitoring dashboards, and results review interfaces, plus data visualisation patterns for Recharts and ECharts with real-time data support.
  • ol_ui_library Alignment: Enforces reuse of existing library components to avoid duplication, with clear contribution guidelines for new general-purpose components that meet accessibility and design token standards.
  • Use Case: A team building a pipeline monitoring dashboard can use this skill to implement accessible, performant React components that reuse existing ol_ui_library atoms, pass all quality gates, and include real-time log streaming and interactive charts without introducing architectural debt.

Quick Start

Use the ui-engineer skill to implement a React document upload component that reuses the ol_ui_library FileDropZone organism, includes React Testing Library unit tests, and passes all accessibility and performance quality gates.

Frequently Asked Questions about ui-engineer

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

FAQPage Schema
How do I build React components that pass WCAG 2.2 AA accessibility standards?▼

To build React components meeting WCAG 2.2 AA accessibility standards, apply standardized TypeScript implementation patterns including SOLID architecture, Atomic Design construction, and mandatory quality gate validation for accessibility linting and testing prior to feature completion.

What's the best way to structure a React TypeScript frontend to avoid architectural debt?▼

The best way to structure a React TypeScript frontend avoiding architectural debt is enforcing SOLID component architecture, state co-location guidelines, Atomic Design construction order, and strict naming conventions extended from base javascript-data-engineer rules.

How do I integrate real-time data visualisation into a React monitoring dashboard?▼

Integrate real-time data visualisation into a React monitoring dashboard by applying pre-built UX journey patterns for Recharts and ECharts that support real-time data streaming and interactive charts while reusing existing library components.

What quality gates should I run before merging React UI code?▼

Before merging React UI code, run mandatory quality gates including TypeScript type checking, linting for accessibility and React hooks rules, unit and end-to-end testing, Storybook compilation, and Lighthouse performance audits for Core Web Vitals.

When should I contribute a new component to the ol_ui_library instead of building locally?▼

Contribute a new component to the ol_ui_library when it is a general-purpose element meeting accessibility and design token standards, ensuring reuse across projects; build locally only for highly specific, non-reusable UI implementations.

Related Skills

Explore More Software Engineering Skills→
andrew-starosciakandrew-starosciak
2

coding-standards

Enforce universal coding standards across TypeScript, JavaScript, React, and Node.js projects.

Community
Basic
doanchienthangdevdoanchienthangdev
4

profiling-performance

Run Lighthouse audits and analyze Core Web Vitals for browser performance.

Community
Intermediate
dinoudondinoudon

component-library

Create reusable UI components with React and Storybook.

Community
Advanced
solrac97grsolrac97gr
2

new-component

Generate React components with TypeScript, Tailwind CSS, unit tests, and Storybook stories.

Community
Intermediate