Faye Plugin Market
Plugin package

UI System Engineer

Design, build, and review browser interfaces with coherent visuals, reusable components, and rendered evidence.

Version 0.1.0-beta.4· public

Explore the skillsView package manifest

Overview

Five focused skills connect visual direction, UI architecture, implementation, source review, and rendered inspection. They support individual screens and shared systems while preserving the project's framework and product character.

What you can do

  • Specify visual hierarchy, typography, spacing, and responsive behavior for real content.
  • Build screens or shared components with clear contracts and state ownership.
  • Review source and inspect the running interface for supported, actionable findings.

Get started

Choose the right stage

Design, architecture, review, and inspection stay read-only unless implementation is requested.

Requirements

  • A screenshot or brief can support visual design; source access supports architecture and implementation.

  • A running browser is needed to verify interactions.

  • Keep application or editor controls separate from authored content such as a canvas or document.

  • The optional independent reviewer requires its documented activation; automatic discovery is not assumed.

Source scanner

Run the following command from the plugin root, replacing "<project-path>" with the project directory. The scope and JSON options request a bounded report. The dependency-free Node.js scanner writes no project files.

  • Findings are heuristic leads that need review.
  • Exit 0 means a report was produced, including reports with findings.
  • Exit 2 means input or operational failure prevented a report.

Scanner command

Scanner command · text
node scripts/audit-ui-system.mjs --root "<project-path>" --scope packages/web --format json

Skills and supporting files

Skills5

Visual design
Develop a clear visual direction for a browser screen, grounded in its audience, content, and existing brand.
UI system architecture
Plan reusable UI layers, component contracts, and state ownership around the project's actual consumers.
UI system implementation
Build or refine browser screens and reusable components with responsive, accessible behavior.
UI source review
Review browser UI code for concrete problems in component contracts, state ownership, accessibility, and consistency.
Rendered UI inspection
Inspect visible browser screens for layout, readability, usability, and observable interaction problems.
Supporting files

Bundled agent

Independent UI reviewerDefines an optional read-only reviewer for bounded UI source or visual evidence.

Scripts

Audit command handlingParses scanner options, selects report output, and applies the command's exit-status contract.Audit engineCoordinates source discovery, structural analysis, rule evaluation, and aggregate findings.Audit report modelNormalizes diagnostics and provides stable ordering and severity counts.Framework and styling signalsReads package evidence to identify likely UI frameworks and styling approaches.Markup and component analysisRecognizes the source structures needed by scanner rules while retaining source offsets.Readable audit reportsFormats scanner results as compact, deterministic text.Scanner rule definitionsDefines the scanner's rule identifiers, severity, supported evidence, and limitations.Scanner rule evaluationApplies the public rule catalog to structural markup and style models.Scanner source boundariesResolves contained audit targets and enforces source discovery and file-reading limits.Source line lookupMaps source offsets to line numbers using a reusable newline index.Style structure analysisParses the CSS-family and component style structures used by scanner rules.UI source audit commandRuns the read-only scanner and returns a text or JSON report of UI review leads.

References

Browser platform contractsCollects browser-specific guidance for semantics, controls, layout, input, motion, fonts, and media.Browser product profilesDistinguishes content websites, web applications, and browser editors by their primary user tasks.Optional reviewer setupDocuments activation and evidence handoff for the bundled UI reviewer.Public UI contractsDefines component responsibilities, state ownership, semantic outputs, and compatibility boundaries.Rendered inspection workflowGuides visual and interaction inspection of a bounded browser surface.Scanner command contractDocuments supported source formats, options, containment, limits, and exit behavior.Scanner findings and limitsExplains each heuristic rule and the evidence needed to confirm its finding.Shared visual foundationsExplains semantic visual roles, themes, variants, density, and where to apply corrections.UI evidence storageSpecifies project-local destinations and handling for UI evidence files.UI migration workflowPlans controlled changes to a UI system and the consumers affected by them.UI ownership and scopeSeparates design, architecture, implementation, source review, and rendered inspection responsibilities.UI source audit workflowExplains how to bound a UI source review and turn evidence into supported findings.UI system layersDescribes foundations, primitives, behaviors, patterns, and feature adapters with clear dependency direction.UI usability checksConnects layout and interaction choices to orientation, decisions, feedback, and recovery.UI verificationSets out source, state, interaction, layout, and visual checks for a changed UI surface.Visual design specificationDefines the decisions needed to make a visual direction implementable.Visual languageGuides product-specific choices in composition, typography, spacing, color, imagery, and motion.Web state architectureProvides a decision process for locating UI, URL, feature, server, and session state.