king-mode

Design bespoke frontend interfaces for React, Vue, and Svelte projects.

1|Updated Jan 13, 2026
One-click install
npx skills add https://github.com/jongensutrecht/demo-ai-stack --skill king-mode-jongensutrecht
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: king-mode
Source: https://github.com/jongensutrecht/demo-ai-stack/tree/main/lars%20skills/king-mode
Command: npx skills add https://github.com/jongensutrecht/demo-ai-stack --skill king-mode-jongensutrecht

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

King Mode helps you create distinctive frontend interfaces when generic templates, bland layouts, or unclear UI decisions are not acceptable. It is built for work that needs strong visual hierarchy, deliberate spacing, and a senior-level design perspective.

Core Features & Use Cases

  • Avant-garde UI design: Produces bespoke, non-generic interfaces with a refined visual identity.
  • Frontend architecture support: Helps structure components and implementation choices for React, Vue, or Svelte projects.
  • High-polish delivery: Suitable for landing pages, product screens, dashboards, and redesigns that need modern, production-minded execution.
  • ULTRATHINK mode: Expands into deep multi-dimensional analysis when the user explicitly requests it.

Quick Start

Ask King Mode to design or implement a bespoke frontend interface for your project, and include your stack, goals, and constraints.

Frequently Asked Questions about king-mode

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

FAQPage Schema
How do I build bespoke frontend interfaces with React that avoid generic templates?

To build bespoke frontend interfaces with React, you need senior-architect precision for non-generic layouts, deliberate spacing, and strong visual hierarchy. This ensures production-ready implementation with high-fidelity visual polish.

Does this approach to UI design work with Vue and Svelte projects?

Yes, this UI design approach works with Vue and Svelte projects. It structures components and implementation choices across React, Vue, and Svelte, applying accessibility-aware spacing and hierarchy to deliver modern execution.

What's the best way to structure components for an avant-garde UI design?

The best way to structure components for avant-garde UI design is applying senior-architect precision to layout and visual hierarchy. This produces bespoke, non-generic interfaces with a refined visual identity and disciplined component structure.

How do I ensure accessibility-aware spacing in high-polish frontend layouts?

To ensure accessibility-aware spacing in high-polish frontend layouts, apply deliberate spacing and strong visual hierarchy during component design. This disciplined approach maintains production-ready execution across landing pages and dashboards.

When do I need senior-architect precision for frontend architecture?

You need senior-architect precision for frontend architecture when generic templates, bland layouts, or unclear UI decisions are unacceptable. It is required for product screens and redesigns demanding modern, production-minded execution.

Can I trigger deep analysis for complex frontend architecture decisions?

Yes, you can trigger deep analysis for complex frontend architecture decisions by explicitly requesting ULTRATHINK mode. This expands the design process into deep multi-dimensional analysis for bespoke interface generation.