skills.rest
Refinex-Space
Refinex-SpaceCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

harness-frontend

Classify frontend task types and apply rule packs across a five-phase UI workflow.

Updated Aug 23, 2026
Search Tags:#workflow#ui#accessibility#frontend#verification#rule-pack
One-click install
npx skills add https://github.com/Refinex-Space/Refinex-Skills --skill harness-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: harness-frontend
Source: https://github.com/Refinex-Space/Refinex-Skills/tree/main/plugins/harness-powers/skills/harness-frontend
Command: npx skills add https://github.com/Refinex-Space/Refinex-Skills --skill harness-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend tasks often default to generic UI patterns; this Skill imposes a disciplined, phase-driven workflow to produce high-quality, user-facing interfaces.

Core Features & Use Cases

  • Five-phase frontend workflow (Discover, Elicit, Thesis, Build, Verify) that ensures surface type is correctly identified and aligned with a rule pack.
  • Phase-driven guidance loads the appropriate rule packs from references (landing, app, dashboard) to tailor output for front-end tasks.
  • Phase 5 design litmus + delivery gate to ensure accessibility, responsiveness, and brand alignment before handoff.

Quick Start

Start by describing the frontend task scope and let the five-phase workflow drive discovery, elicitation, thesis, building, and verification to a ready-to-ship UI artifact.

Frequently Asked Questions about harness-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build production-grade frontend interfaces that meet accessibility and responsiveness standards?▼

To build production-grade frontend interfaces, you can use a phase-driven workflow that classifies the UI task type and applies a targeted rule pack. This process enforces accessibility, responsiveness, and brand alignment before final delivery.

What is the best workflow for generating dashboards and landing pages without defaulting to generic UI patterns?▼

The best workflow for generating dashboards and landing pages involves a five-phase process: Discover, Elicit, Thesis, Build, and Verify. This ensures the surface type is correctly identified and aligned with specific UI rule packs.

Can I use a structured workflow to build single-file Claude artifacts for product UIs?▼

Yes, you can use a structured frontend workflow to build single-file Claude artifacts. It classifies the product UI task, applies the appropriate rule pack, and guides the process from initial discovery through to a verified, ready-to-ship output.

How does a rule-pack-based frontend workflow handle UI verification and design checks?▼

A rule-pack-based frontend workflow handles UI verification through a dedicated Phase 5 design litmus and delivery gate. This step enforces accessibility, responsiveness, and safe outputs before the UI artifact is handed off.

Do I need specific frameworks or dependencies to start a phase-driven frontend UI workflow?▼

No specific external frameworks or dependencies are required to start a phase-driven frontend UI workflow. You simply describe the frontend task scope, and the workflow loads the necessary internal references and rule packs to drive the build.

Why does my frontend UI generation default to generic patterns and how can I enforce discipline?▼

Frontend UI generation defaults to generic patterns without a structured rule pack. You can enforce discipline by applying a five-phase workflow that loads targeted references for landing pages, apps, or dashboards to produce high-quality outputs.

Related Skills

Explore More Software Engineering Skills→
HypoxanthineOvOHypoxanthineOvO
24

rules

Manage Hypo-Workflow rule severities, hooks, and rule packs via YAML.

Community
Advanced
reomgitreomgit

setup-deploy

Detect deployment platforms and write configuration settings to CLAUDE.md.

Community
Advanced
motionharvestmotionharvest
2

visual-identity

Define brand personality, typography, color tokens, and motion vocabulary for web projects.

Community
Advanced
caiazzopcaiazzop

mcporter

Interact with MCP servers and tools via CLI over HTTP or stdio.

Community
Intermediate