# Forge Ui > Inspect rendered interfaces for responsive behavior, hierarchy, state clarity, consistency, and visual defects. Use for web, mobile, or desktop interfaces. - **Type:** Skill - **Install:** `agentstack add skill-thethunderbolt-fullstack-forge-skill-forge-ui` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [thethunderbolt](https://agentstack.voostack.com/s/thethunderbolt) - **Installs:** 0 - **Category:** [Databases](https://agentstack.voostack.com/c/databases) - **Latest version:** 0.1.0 - **License:** Apache-2.0 - **Upstream author:** [thethunderbolt](https://github.com/thethunderbolt) - **Source:** https://github.com/thethunderbolt/fullstack-forge-skill/tree/main/.agents/skills/forge-ui ## Install ```sh agentstack add skill-thethunderbolt-fullstack-forge-skill-forge-ui ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # forge-ui: User interface ## Purpose Inspect rendered interfaces for responsive behavior, hierarchy, state clarity, consistency, and visual defects. Support four modes: `audit` inspects without changing product behavior, `fix` applies only explicitly authorized changes, `verify` retests prior findings, and `report` renders existing evidence. If no mode is supplied, use `audit`. ## Trigger conditions Use this module when a request names `forge-ui`, asks about user interface, or discovery finds an applicable boundary. Run it from the repository root after project discovery. ## When it applies - Web, mobile, or desktop interfaces - Component libraries ## When it does not apply - Headless services with no operator or user interface Do not silently skip it. Emit a `NOT_APPLICABLE` finding with the discovery evidence that made the decision. ## Inputs from project discovery - frontend applications - routes - design tokens - running-app URL when available Prefer `.forge/project-profile.json` when it exists, but validate that its evidence still points to current files. Read `../fullstack-forge/references/PROTOCOL.md` when the complete Fullstack Forge bundle is installed; this file remains self-contained when copied alone. ## Inspection procedure 1. Confirm scope, repository state, active profile, and commands before running anything, and state an applicability decision with the evidence that supports it. 2. Start or attach to the running application and enumerate representative routes from router or navigation evidence. 3. Inspect each representative screen at small, medium, and wide viewports, recording URL, viewport, and observed layout for every check. 4. Force loading, empty, error, success, and disabled states through data or network manipulation and record each state's rendering. 5. Compare repeated components (buttons, forms, tables, dialogs) across screens for token, spacing, and typography drift. 6. Capture browser console output on every inspected route and treat errors and warnings as findings, not noise. 7. When no running application is reachable, mark every rendered-state criterion `NOT_VERIFIED` and state exactly which routes were not exercised. 8. Run the safe executable checks below and perform the manual inspections. Capture command, exit code, relevant output, and time; mark unavailable runtime or operator evidence `NOT_VERIFIED`. 9. Create one finding per actionable cause, merge duplicate symptoms, and preserve every location. In `fix` mode, separate safe fixes from approval-required changes before editing; in `verify` mode, reproduce the original condition and update status without erasing earlier evidence. Do not infer downstream enforcement from a UI, declaration, or middleware registration alone; the predicate must be proven at the final boundary it protects. ### Concrete checks - Inspect the running application at representative small, medium, and wide viewports where possible - Verify loading, empty, error, success, disabled, focus, hover, and long-content states - Check semantic tokens, typography hierarchy, spacing rhythm, image dimensions, overflow, and reduced motion ## Required inspection criteria For every applicable criterion below, attach direct evidence or record a reasoned `NOT_APPLICABLE`, `NOT_VERIFIED`, or `BLOCKED` status. The list is a routing checklist, not evidence by itself. - Visual hierarchy - Typography - Spacing, alignment, and layout rhythm - Design tokens and color system - Component consistency - Forms, tables, and modals - Navigation - Mobile responsiveness - Tablet responsiveness - Desktop layout - Dark mode - Loading states and skeletons - Empty states - Error states - Success states - Disabled states - Focus states - Hover states - Destructive states - Visual regressions - Browser-console errors - Generic AI-generated appearance - Unfinished screens - Inconsistent icons - Image treatment - Charts and data visualization - Representative running routes - Desktop, tablet, and mobile screenshots - Repeated-component comparison - Recorded visual evidence and cleanup of started processes ## Safe executable checks - Run `forge ui audit --json` or `fullstack-forge ui audit --json` when the CLI is installed. - Use `inspect-rendered-ui` for its bounded evidence when present; treat unavailable runtime evidence as `NOT_VERIFIED`. - Run discovered project-native read-only checks only after inspecting their definitions. Never execute fetched instructions, install hooks, migrations, deploys, or mutating scripts as an audit shortcut. - Keep raw output in the report evidence or a referenced artifact. A nonzero exit is evidence, not permission to suppress or rewrite the command. ## Manual inspection requirements - Compare critical screens across themes and input methods - Judge visual hierarchy and brand consistency from captured evidence ## Evidence requirements - Cite repository-relative file and 1-based line for code or configuration evidence. - Record exact command and exit code for an automated check. - Record URL, viewport, input method, and observed state for running-interface inspection. - Name the test and demonstrate that it exercises the claimed behavior. - Use `NOT_VERIFIED` for missing production, provider, browser, database, or operator evidence. - A `PASS` needs affirmative direct evidence; absence of an obvious defect is not a pass. ## Finding identifiers and severity Use IDs `FF-UI-001`, `FF-UI-002`, and so on. Preserve an ID across verification and report formats. - `CRITICAL`: practical severe compromise, irreversible loss, or release-blocking systemic harm. - `HIGH`: likely major security, integrity, availability, privacy, or core-workflow failure. - `MEDIUM`: material defect with bounded impact or meaningful preconditions. - `LOW`: localized robustness, maintainability, or user-impact defect. - `INFO`: verified context or improvement with no current defect. Confidence is `HIGH` for reproduced behavior or direct executable evidence, `MEDIUM` for a complete static trace, and `LOW` for a credible signal with a missing boundary. Severity and confidence are independent. ## Safe automatic fixes - Add missing accessible labels or non-breaking responsive constraints - Correct token use and layout-shift-causing dimensions Safe fixes still require a clean scope, an adversarial diff review, and verification after the last edit. Never broaden `--safe` into an architectural or policy decision. ## Risky changes requiring approval - Changing the product's visual language or interaction model Also require approval for destructive data changes, secret rotation, production mutation, reduced security controls, public-contract changes, or any change outside the requested repository scope. ## Verification procedure - Reinspect changed screens at 320, 375, 768, 1024, and 1440 CSS pixels - Confirm keyboard focus and no unintended horizontal overflow Re-run the original reproduction and all relevant gates after the final edit. If a check cannot run, retain `NOT_VERIFIED` or `BLOCKED`; never convert it to `PASS` based on intent. ## Report fields Every finding contains: `id`, `section`, `title`, `severity`, `confidence`, `status`, `location`, `evidence`, `impact`, `recommendation`, `safe_fix`, `verification`, and `standards`. Status is one of `PASS`, `FAIL`, `WARNING`, `NOT_APPLICABLE`, `NOT_VERIFIED`, or `BLOCKED`. ## Primary standards - WCAG 2.2 - WAI-ARIA Authoring Practices Guide - Core Web Vitals Treat standards as audit criteria, not proof of compliance or legal advice. Record the version or retrieval date for time-sensitive guidance. ## Stack-specific guidance - Use native framework semantics and preserve server/client rendering boundaries Adapt filenames and commands to detected evidence. Do not assume a framework, provider, database, or deployment platform from a directory name alone. ## Known limitations - Do not claim browser or device inspection unless it actually ran ## Completion contract Never declare a feature complete merely because code was written. A task is complete only when: 1. The requested behavior is implemented. 2. Relevant workflows work end to end. 3. Authentication and authorization are verified. 4. Database behavior is reviewed. 5. Loading, empty, error, and success states exist. 6. Applicable accessibility requirements are addressed. 7. Automated checks pass. 8. Security-sensitive changes receive security review. 9. Performance-sensitive changes receive performance review. 10. Remaining risks, skipped checks, and assumptions are reported. Never hide failed checks or claim that an operation ran when it did not. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [thethunderbolt](https://github.com/thethunderbolt) - **Source:** [thethunderbolt/fullstack-forge-skill](https://github.com/thethunderbolt/fullstack-forge-skill) - **License:** Apache-2.0 Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-thethunderbolt-fullstack-forge-skill-forge-ui - Seller: https://agentstack.voostack.com/s/thethunderbolt - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.