# UI System Engineer Design, build, and review browser interfaces with purposeful visuals, interaction feel, and rendered evidence. Package version: 0.1.0-beta.6. ## Overview Five focused skills connect visual direction, UI architecture, implementation, source review, and rendered inspection. Start from what people should accomplish, understand, and experience. Shape composition, typography, imagery, and interaction response for that purpose, from static reading and immersive exploration to creative tools and precise operations. Carry the important decisions through implementation and inspection while retaining the host framework and product character. ## What you can do - Shape visual relationships and interaction feel around real content and the intended experience. - Build screens or shared components with clear contracts and state ownership. - Review source and inspect the running interface for supported, actionable findings. ## Get started - [Visual design](/skills/faye-ui-system-engineer/ui-visual-design/) — Develop visual direction, interaction character, and adaptation. - [UI system architecture](/skills/faye-ui-system-engineer/ui-system-architecture/) — Plan reusable layers, component contracts, and state ownership. - [UI system implementation](/skills/faye-ui-system-engineer/ui-system-implementation/) — Build or refine the requested browser interface. - [UI source review](/skills/faye-ui-system-engineer/ui-system-review/) — Review UI source for supported, actionable findings. - [Rendered UI inspection](/skills/faye-ui-system-engineer/ui-inspection/) — Inspect rendered screens and observable interactions. ## Choose the right stage Describe the result you want in ordinary language, or choose a skill explicitly. A combined design-and-build request continues through implementation and verification. 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 `""` 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 ```text node scripts/audit-ui-system.mjs --root "" --scope packages/web --format json ``` ## Skills and supporting files - [Rendered UI inspection](/skills/faye-ui-system-engineer/ui-inspection/) — Inspect visible browser screens for layout, readability, usability, and observable interaction problems. - [UI system architecture](/skills/faye-ui-system-engineer/ui-system-architecture/) — Plan reusable UI layers, component contracts, and state ownership around the project's actual consumers. - [UI system implementation](/skills/faye-ui-system-engineer/ui-system-implementation/) — Build or refine browser screens and reusable components with responsive, accessible behavior. - [UI source review](/skills/faye-ui-system-engineer/ui-system-review/) — Review browser UI code for concrete problems in component contracts, state ownership, accessibility, and consistency. - [Visual design](/skills/faye-ui-system-engineer/ui-visual-design/) — Develop visual direction and interaction character for a browser UI, grounded in its purpose, content, and constraints. - [Independent UI reviewer](/agents/faye-ui-system-engineer/ui-reviewer/) — Defines an optional read-only reviewer for bounded UI source or visual evidence. - [UI source audit command](/scripts/faye-ui-system-engineer/audit-ui-system-58010d6e/) — Runs the read-only scanner and returns a text or JSON report of UI review leads. - [Audit engine](/scripts/faye-ui-system-engineer/audit-engine-a1106909/) — Coordinates source discovery, structural analysis, rule evaluation, and aggregate findings. - [Audit command handling](/scripts/faye-ui-system-engineer/cli-runner-9f3e36ff/) — Parses scanner options, selects report output, and applies the command's exit-status contract. - [Readable audit reports](/scripts/faye-ui-system-engineer/format-report-18f6759a/) — Formats scanner results as compact, deterministic text. - [Audit report model](/scripts/faye-ui-system-engineer/report-model-bd39724b/) — Normalizes diagnostics and provides stable ordering and severity counts. - [Scanner rule definitions](/scripts/faye-ui-system-engineer/rule-catalog-9b944214/) — Defines the scanner's rule identifiers, severity, supported evidence, and limitations. - [Scanner rule evaluation](/scripts/faye-ui-system-engineer/rule-evaluators-afce2b27/) — Applies the public rule catalog to structural markup and style models. - [Markup and component analysis](/scripts/faye-ui-system-engineer/source-analysis-49f2c471/) — Recognizes the source structures needed by scanner rules while retaining source offsets. - [Source line lookup](/scripts/faye-ui-system-engineer/source-locations-60e0fba8/) — Maps source offsets to line numbers using a reusable newline index. - [Scanner source boundaries](/scripts/faye-ui-system-engineer/source-policy-d7ed133f/) — Resolves contained audit targets and enforces source discovery and file-reading limits. - [Framework and styling signals](/scripts/faye-ui-system-engineer/stack-signals-64c48ee3/) — Reads package evidence to identify likely UI frameworks and styling approaches. - [Style structure analysis](/scripts/faye-ui-system-engineer/style-analysis-c3948286/) — Parses the CSS-family and component style structures used by scanner rules. - [UI source audit workflow](/references/faye-ui-system-engineer/audit-workflow-51aecd23/) — Explains how to bound a UI source review and turn evidence into supported findings. - [Visual design specification](/references/faye-ui-system-engineer/design-specification-a6a1b26c/) — Defines consequential design decisions and the evidence needed to make them implementable. - [UI evidence storage](/references/faye-ui-system-engineer/evidence-storage-beaf87bb/) — Specifies project-local destinations and handling for UI evidence files. - [Rendered inspection workflow](/references/faye-ui-system-engineer/inspection-workflow-7f660212/) — Guides visual and interaction inspection of a bounded browser surface. - [UI migration workflow](/references/faye-ui-system-engineer/migration-workflow-76720008/) — Plans controlled changes to a UI system and the consumers affected by them. - [UI ownership and scope](/references/faye-ui-system-engineer/ownership-and-scope-ef1c62ac/) — Separates design, architecture, implementation, source review, and rendered inspection responsibilities. - [Public UI contracts](/references/faye-ui-system-engineer/public-api-contracts-3322e7b0/) — Defines component responsibilities, state ownership, semantic outputs, and compatibility boundaries. - [Optional reviewer setup](/references/faye-ui-system-engineer/reviewer-4f2addea/) — Documents activation and evidence handoff for the bundled UI reviewer. - [Scanner command contract](/references/faye-ui-system-engineer/scanner-contract-0b2125af/) — Documents supported source formats, options, containment, limits, and exit behavior. - [Scanner findings and limits](/references/faye-ui-system-engineer/scanner-rules-1b6649db/) — Explains each heuristic rule and the evidence needed to confirm its finding. - [Web state architecture](/references/faye-ui-system-engineer/state-architecture-a9e05436/) — Locates UI and data ownership by effect, authority, lifetime, and the supported workflow. - [UI system layers](/references/faye-ui-system-engineer/system-architecture-0bf0458b/) — Describes foundations, primitives, behaviors, patterns, and feature adapters with clear dependency direction. - [General UI principles](/references/faye-ui-system-engineer/ui-principles-1c852635/) — Connects intended use and experience with meaningful structure, proportionate treatment, and truthful behavior. - [UI usability checks](/references/faye-ui-system-engineer/ui-usability-6f39883f/) — Connects necessary explanations, meaningful labels, action context, and feedback to supported user tasks. - [UI verification](/references/faye-ui-system-engineer/verification-c9e15644/) — Selects source, state, interaction, layout, and visual checks for the changed contract. - [Shared visual foundations](/references/faye-ui-system-engineer/visual-foundations-0dc67db5/) — Explains semantic visual roles, themes, variants, density, and where to apply corrections. - [Visual language](/references/faye-ui-system-engineer/visual-language-ea07b372/) — Guides composition, typography, color, imagery, material response, and time in relation to the intended experience. - [Browser platform contracts](/references/faye-ui-system-engineer/web-platform-1ae718c6/) — Collects browser contracts for semantics, responsive layout, controls, focus, motion, fonts, and media. - [Browser product profiles](/references/faye-ui-system-engineer/web-profiles-5de9e1c5/) — Distinguishes content websites, web applications, and browser editors by their primary user tasks. ## Package manifest [View package manifest](/manifests/faye-ui-system-engineer/)