refactor-component

Refactor Qwik Design System components to use @qds.dev/base utilities and Qwik conventions.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/kunai-consulting/qwik-design-system --skill refactor-component-kunai-consulting
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: refactor-component
Source: https://github.com/kunai-consulting/qwik-design-system/tree/main/.ruler/skills/refactor-component
Command: npx skills add https://github.com/kunai-consulting/qwik-design-system --skill refactor-component-kunai-consulting

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of improving existing Qwik Design System (QDS) components by ensuring they adhere to best practices, utilize shared utilities, and maintain code quality.

Core Features & Use Cases

  • Standardization: Enforces the use of @qds.dev/base helpers for common functionalities like ID management and list navigation.
  • Best Practices: Guides developers to correctly implement Qwik's reactive patterns, state management with useBindings, and accessibility standards.
  • Use Case: When updating a QDS component to use a new state management pattern or to improve its accessibility, this Skill provides the exact rules and examples needed for a correct implementation.

Quick Start

Refactor the Button component in libs/components/src/button to use @qds.dev/base helpers and follow Qwik framework rules.

Frequently Asked Questions about refactor-component

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

FAQPage Schema
How do I refactor Qwik components to use useBindings for state management?

To refactor Qwik components for state management, migrate existing logic to use the `useBindings` hook and replace standard lifecycle methods with `useMountTask$` and `useResumed$` to adhere to QDS conventions and improve code maintainability.

What are the best practices for updating Qwik Design System components?

Best practices for updating Qwik Design System components include integrating `@qds.dev/base` utilities for ID management, applying Qwik framework reactive patterns, and ensuring proper event handling and signal updates within the `libs/components/src/` directory.

How do I use @qds.dev/base helpers to improve component accessibility?

You can improve component accessibility by integrating `@qds.dev/base` helpers for common functionalities like list navigation and ID management, ensuring your QDS components meet accessibility standards while streamlining shared utility usage.

When should I use useMountTask$ and useResumed$ in Qwik components?

Use `useMountTask$` and `useResumed$` in Qwik components when refactoring to correctly implement Qwik's reactive patterns and lifecycle management, ensuring proper state initialization and execution upon component resumption.

Does refactoring QDS components require existing code in the libs/components/src/ directory?

Refactoring QDS components targets existing code specifically located within the `libs/components/src/` directory, ensuring the updated components correctly utilize shared utilities and adhere to Qwik framework best practices.