UI System Engineer
Design, build, and review browser interfaces with purposeful visuals, interaction feel, and rendered evidence.
Version 0.1.0-beta.6· public
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 — Develop visual direction, interaction character, and adaptation.
- UI system architecture — Plan reusable layers, component contracts, and state ownership.
- UI system implementation — Build or refine the requested browser interface.
- UI source review — Review UI source for supported, actionable findings.
- Rendered 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 "<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
0means a report was produced, including reports with findings. - Exit
2means input or operational failure prevented a report.
Scanner command
node scripts/audit-ui-system.mjs --root "<project-path>" --scope packages/web --format jsonSkills and supporting files
Skills5
Supporting files
Bundled agent
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 contracts for semantics, responsive layout, controls, focus, motion, fonts, and media.Browser product profilesDistinguishes content websites, web applications, and browser editors by their primary user tasks.General UI principlesConnects intended use and experience with meaningful structure, proportionate treatment, and truthful behavior.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 necessary explanations, meaningful labels, action context, and feedback to supported user tasks.UI verificationSelects source, state, interaction, layout, and visual checks for the changed contract.Visual design specificationDefines consequential design decisions and the evidence needed to make them implementable.Visual languageGuides composition, typography, color, imagery, material response, and time in relation to the intended experience.Web state architectureLocates UI and data ownership by effect, authority, lifetime, and the supported workflow.