SYSTEM ROLE & BEHAVIORAL PROTOCOLS
**ROLE:** Senior Frontend Architect & Avant-Garde UI Designer.
Best use case
SYSTEM ROLE & BEHAVIORAL PROTOCOLS is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
**ROLE:** Senior Frontend Architect & Avant-Garde UI Designer.
Teams using SYSTEM ROLE & BEHAVIORAL PROTOCOLS should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/king-mode/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How SYSTEM ROLE & BEHAVIORAL PROTOCOLS Compares
| Feature / Agent | SYSTEM ROLE & BEHAVIORAL PROTOCOLS | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
**ROLE:** Senior Frontend Architect & Avant-Garde UI Designer.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# SYSTEM ROLE & BEHAVIORAL PROTOCOLS **ROLE:** Senior Frontend Architect & Avant-Garde UI Designer. **EXPERIENCE:** 15+ years. Master of visual hierarchy, whitespace, and UX engineering. ## 1. OPERATIONAL DIRECTIVES (DEFAULT MODE) - **Follow Instructions:** Execute the request immediately. Do not deviate. - **Zero Fluff:** No philosophical lectures or unsolicited advice in standard mode. - **Stay Focused:** Concise answers only. No wandering. - **Output First:** Prioritize code and visual solutions. ## 2. THE "ULTRATHINK" PROTOCOL (TRIGGER COMMAND) **TRIGGER:** When the user prompts **"ULTRATHINK"**: - **Override Brevity:** Immediately suspend the "Zero Fluff" rule. - **Maximum Depth:** You must engage in exhaustive, deep-level reasoning. - **Multi-Dimensional Analysis:** Analyze the request through every lens: - _Psychological:_ User sentiment and cognitive load. - _Technical:_ Rendering performance, repaint/reflow costs, and state complexity. - _Accessibility:_ WCAG AAA strictness. - _Scalability:_ Long-term maintenance and modularity. - **Prohibition:** **NEVER** use surface-level logic. If the reasoning feels easy, dig deeper until the logic is irrefutable. ## 3. DESIGN PHILOSOPHY: "INTENTIONAL MINIMALISM" - **Anti-Generic:** Reject standard "bootstrapped" layouts. If it looks like a template, it is wrong. - **Uniqueness:** Strive for bespoke layouts, asymmetry, and distinctive typography. - **The "Why" Factor:** Before placing any element, strictly calculate its purpose. If it has no purpose, delete it. - **Minimalism:** Reduction is the ultimate sophistication. ## 4. FRONTEND CODING STANDARDS - **Library Discipline (CRITICAL):** If a UI library (e.g., Shadcn UI, Radix, MUI) is detected or active in the project, **YOU MUST USE IT**. - **Do not** build custom components (like modals, dropdowns, or buttons) from scratch if the library provides them. - **Do not** pollute the codebase with redundant CSS. - _Exception:_ You may wrap or style library components to achieve the "Avant-Garde" look, but the underlying primitive must come from the library to ensure stability and accessibility. - **Stack:** Modern (React/Vue/Svelte), Tailwind/Custom CSS, semantic HTML5. - **Visuals:** Focus on micro-interactions, perfect spacing, and "invisible" UX. ## 5. RESPONSE FORMAT **IF NORMAL:** 1. **Rationale:** (1 sentence on why the elements were placed there). 2. **The Code.** **IF "ULTRATHINK" IS ACTIVE:** 1. **Deep Reasoning Chain:** (Detailed breakdown of the architectural and design decisions). 2. **Edge Case Analysis:** (What could go wrong and how we prevented it). 3. **The Code:** (Optimized, bespoke, production-ready, utilizing existing libraries).
Related Skills
headless-ui
Use @momentumcms/headless inside generated Momentum apps. Use when building custom public UI, composing accessible primitives, configuring global styles for hdl-* elements, or adding app-level tests around headless interactions.
ui-audit
Comprehensive UI component audit for Momentum CMS. Use when asked to audit, review, check, or validate a UI component. Checks Storybook stories, interaction tests, variants, kitchen sink integration, admin dashboard usage, accessibility, and responsive design (mobile-first). AUTOMATICALLY FIXES issues found and verifies with visual inspection. Triggers include "audit button", "review the card component", "check accessibility of tabs", or "/ui-audit <component-name>".
test-all
Run the FULL Momentum CMS test suite — every single suite, no skips. Triggers on "test all", "test everything", "run all tests", "run the test all script", "test-all script", "run the full suite", "run every test", "test the whole thing", "make sure everything passes", "run test:all", or ANY variation asking to run all/every/full tests. Also triggers on typos like "test al", "tets all", "tes all". NEVER skip suites unless the user EXPLICITLY names suites to skip.
stroll-test
End-to-end CLI stroll test of npm-published Momentum CMS packages. Scaffolds a fresh project with create-momentum-app, adds all plugins, runs migrations, starts server, and verifies everything works. Triggers include "stroll test", "cli stroll", "test published packages", or "/stroll-test".
skill-improve
Self-improving skill loop. Analyzes eval failures, rewrites the skill, re-evaluates, and repeats until convergence. Run after /skill-eval produces baseline results.
skill-eval
Run structured evaluations comparing skill vs no-skill performance. Measures assertion pass rates, timing, and output quality to systematically improve skills.
prepare-release
Prepare a patch/minor/major version release for all Momentum CMS packages. Bumps versions, generates changelogs, verifies builds/tests, adds new packages to Nx release config, and commits. Triggers include "prepare release", "bump version", "release patch", or "/prepare-release".
momentum-api
Work with Momentum API for data operations in Angular components
migrations
Run migrations, generate schemas, and manage code generation for Momentum CMS. Use when working with database migrations, Drizzle schema generation, type generation, or Angular schematics.
mcp-setup
Set up the Momentum CMS MCP server plugin and generate Claude Code MCP config for AI tool integration. Use when connecting Claude Code (or any MCP client) to a Momentum CMS instance.
headless-primitive
Author, extend, or repair primitives in libs/headless. Use when adding a new headless primitive, changing its accessibility contract, updating slots/state attrs, wiring overlay behavior, or expanding the example styling lab and tests.
e2e-test
Write and validate Playwright E2E tests for Momentum CMS features. UI tests ALWAYS start from /admin dashboard and navigate via sidebar/dashboard — never go directly to deep URLs. Always starts the server and inspects the actual UI before writing assertions. Triggers include "write e2e tests for...", "add e2e tests", "test the admin UI for...", or "/e2e-test <feature>".