skills.rest
parhumm
parhummCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-component-fix

Diagnose frontend UI bugs and generate patch artifacts for React-like components.

25|1|Updated Jan 29, 2026
Search Tags:#frontend#react#css#storybook#ui-bug#patch-artifacts#dev-output-integrate
One-click install
npx skills add https://github.com/parhumm/jaan-to --skill frontend-component-fix
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-component-fix
Source: https://github.com/parhumm/jaan-to/tree/main/adapters/codex/skillpack/skills/frontend-component-fix
Command: npx skills add https://github.com/parhumm/jaan-to --skill frontend-component-fix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnose and patch frontend UI bugs by generating patch artifacts routed through dev-output-integrate, enabling safe fixes without direct edits to source code.

Core Features & Use Cases

  • Detect and diagnose frontend UI bugs from component code, stories, and design system guidelines.
  • Generate patch artifacts that flow through dev-output-integrate for safe application.
  • Use cases include patching mis-styles, broken layouts, or interactive issues across components.

Quick Start

Describe the UI bug and optionally specify the component path to start diagnosing and generating a patch artifact.

Frequently Asked Questions about frontend-component-fix

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

FAQPage Schema
How do I fix a React UI bug without modifying source code directly?▼

To fix a React UI bug without direct source edits, this Skill diagnoses the issue and generates patch artifacts routed through dev-output-integrate, outputting to $JAAN_OUTPUTS_DIR to ensure safe integration and component API stability.

Can I use Storybook stories to diagnose broken layouts and visual defects?▼

Yes, you can use Storybook stories to diagnose broken layouts and visual defects. This Skill analyzes component code alongside stories and design-system constraints to identify and patch frontend UI bugs safely.

What is the best way to patch CSS mis-styles while preserving component APIs?▼

The best way to patch CSS mis-styles while preserving component APIs is generating targeted patch artifacts through dev-output-integrate. This approach enforces API stability and prevents direct source code modification.

Does this UI bug patching approach work with design-system constraints?▼

Yes, this UI bug patching approach works with design-system constraints. It diagnoses visual defects, layout issues, and interaction glitches while respecting design-system guidelines and preserving existing component APIs.

Why should I route frontend patches through dev-output-integrate instead of editing directly?▼

You should route frontend patches through dev-output-integrate to enforce safe integration and API stability. Direct source code modification risks breaking component contracts, whereas generated patch artifacts provide controlled, traceable fixes.

Related Skills

Explore More Software Engineering Skills→
dylantarredylantarre
38

storybook

Generate Storybook CSF 3.0 stories and MDX documentation for UI components.

Community
Intermediate
IgorWarzochaIgorWarzocha

convex-components

Build isolated backends and compose component APIs within a Convex app.

Community
Intermediate
mcgilly17mcgilly17
2

Storybook Patterns

Document and test UI components with Storybook 7+ stories.

Community
Intermediate
runkidsrunkids
11

accessibility

Audit web accessibility against WCAG 2.1 and generate remediation plans.

Community
Basic