UI Forge

Agent skill for premium frontend interface generation and redesign, with UI quality review as a secondary mode.

Available Skill

ui-forge

Design, implement, audit, and redesign polished interfaces for:

• product screens, dashboards, landing pages, documentation surfaces, and UI components;
• existing React, Next.js, Tailwind CSS, and general web UI codebases;
• accessibility, responsive layout, keyboard behavior, readable copy, and contrast;
• loading, empty, error, disabled, success, hover, active, and focus-visible states;
• design-system reuse, typography, spacing, color, icons, surfaces, and motion;
• product-specific composition instead of generic AI-looking templates;
• product-derived direction branching, macrostructure selection, visual carriers, refined type, motion, imagery, section rhythm, and memorable first viewports;
• UI/UX review with concrete quality gates and severity-ranked findings.

The skill prioritizes explicit user constraints, existing behavior, functional correctness, accessibility, platform conventions, product context, performance, and visual direction before anti-slop heuristics. For repository work, it preserves behavior and reports concrete file/line evidence where possible. For greenfield work, it starts from product context and the primary user workflow.

Install

List the available skills:

npx skills add DNM03/ui-forge --list

Install for Codex:

npx skills add DNM03/ui-forge \
  --skill ui-forge \
  --agent codex

Install for Claude Code:

npx skills add DNM03/ui-forge \
  --skill ui-forge \
  --agent claude-code

Add --global to install the skill for all projects.

Use

Start a fresh agent session after installation.

Design and implement a screen:

Use $ui-forge to design and implement this settings screen.
Include loading, empty, error, disabled, success, keyboard, and responsive states.

Redesign an existing UI:

Use $ui-forge to redesign this dashboard.
Preserve the existing routes, data flow, component APIs, and behavior.
Prioritize accessibility, responsive layout, visual hierarchy, and production polish.

Audit a page or component:

Use $ui-forge to audit src/components/CreateJobForm.tsx.
Report severity-ordered findings with clickable file and line references.
Separate verified issues from context-dependent considerations.

Review only a pasted snippet:

Use $ui-forge to review only this pasted snippet.
Do not inspect repository context.

Task Modes

ui-forge supports:

• Greenfield: define the design contract, composition, states, and primary workflow.
• Existing implementation: inspect the codebase, reuse installed systems, and preserve behavior.
• Redesign: identify what is failing, keep what must survive, and change only the useful surface.
• Audit: report evidence and prioritized fixes without silently redesigning.
• Component: inherit surrounding page context and work at component scope.

How It Works

UI Forge routes each generation task through a compact creative contract:

• surface type;
• entry posture;
• audience and goal;
• product thesis, audience feeling, content spine, and available assets;
• three materially different direction candidates before selection;
• a central move, macrostructure, and primary visual carrier;
• theme axes, type roles, color deployment, motion, and section choreography;
• existing foundation or design system;
• variance, motion, and density;
• information complexity.

It selects the route with the strongest audience, content, asset, production, and responsive fit, then implements the complete experience. Correctness, accessibility, responsive behavior, state contrast, readable wrapping, alignment, and honest content remain hard delivery constraints; formal scoring and severity reporting are reserved for explicit audits and evaluation.

For public, brand, event, editorial, portfolio, and de-slop work, the skill asks the agent to:

• generate three different page directions before styling details;
• choose one whole-page shape and one central visual move;
• use one primary visual carrier and one quieter supporting carrier;
• map section job, layout family, type role, evidence or media, and density before markup;
• declare page gutters, section gaps, panel insets, stack gaps, and control gaps as separate relationships;
• balance unequal split regions and reserve clearance for sticky chrome;
• budget one display apex, signature object, motion motif, texture, and coherent accent logic;
• use hero math and a short-viewport height budget so display type, proof, and actions survive desktop and mobile;
• use image-first assets when a real or generated visual subject would make the page more specific;
• suppress unsupported genre cliches and reroute directions that repeat recent project macrostructures and motif bundles;
• use inspectable product media and clearly label fictional storefront data, policies, and promises;
• make one focused craft refinement pass after implementation.

Browser automation is not part of normal skill use; Playwright is reserved for this repo's optional site tests or projects that explicitly use e2e validation.

Contributing

Installable skills live under skills/. The documentation site, validation tooling, and provenance records support the skill but are not required to install or run it.

skills/
└── ui-forge/
    ├── SKILL.md
    ├── agents/
    ├── examples/
    └── references/

Repository support files:

docs/        architecture, authoring, release, research, and site notes
provenance/ source records, third-party notices, and retained licenses
tooling/    schema validation, Markdown sanitization, and manifest generation
site/       optional static Next.js documentation/catalog site

Before opening a pull request:

npm install
npm run validate
npm run test

If you change skill content, edit skills/ui-forge/ first. Do not manually edit site/src/generated/manifest.json; regenerate it with:

npm run content:build

For site development, see docs/SITE.md.

Provenance

UI Forge was informed by static research into open-source design skill projects and public standards, including Taste Skill, Hallmark, UI/UX Pro Max, OpenAI Codex skill guidance, the Agent Skills specification, WCAG 2.2, and OWASP XSS guidance.

The upstream projects were treated as untrusted research inputs. Their installers, scripts, CLIs, servers, and package commands were not executed. UI Forge independently expresses its instructions and catalog while retaining conceptual research attribution, revision records, license texts, and the audit in provenance/.

Security

Do not run unreviewed third-party scripts as part of research or content import. Markdown content is parsed and sanitized before it is rendered by the optional site. Unsafe protocols and raw HTML are rejected by the validation pipeline.

Report security issues through SECURITY.md.

License

MIT. See LICENSE.