← All skill packs

UI Design & Frontend Skills

Skill pack
8 skills0 selected
metabenchSkills in this pack

Autonomous UI inspection using a dual channel: (1) visual screenshots via Playwright MCP tools, (2) numeric layout metrics via Puppeteer scripts. Includes server --check standardization so agents can start/stop reliably.

English

Do experiment-driven research (hypotheses → minimal repros → evidence) and continuously improve research skills + tooling. Use when behavior is uncertain, contested, or performance-sensitive.

English

Use when instruction drift is likely: multi-step tasks, mid-task detours (tooling upgrades), or when agents must consult MCP memory / Skills / sessions and re-anchor repeatedly. Triggers: 'stay on track', 'follow instructions', 'resume main task', 'detour', 'intermediate task done'.

English

Debug jsgui3 client-side activation issues. Use when SSR renders but clicks don’t work, this.dom.el is null, or you see Missing context.mapControls / activation failures.

English

Use repo lab experiments (src/ui/lab) to answer jsgui3 “how should we do this?” questions, then distill the validated result into durable docs + Skills.

English

Understand and debug how jsgui3 SSR markup becomes activated client-side, including persisted fields (data-jsgui-fields) and ctrlfields (data-jsgui-ctrl-fields), and where to patch/plugin.

English

How to prove a jsgui3 SSR + client-activation app actually works, and the traps that make it look like it works when it does not. Use this skill whenever you change, review, or debug anything under src/ui/server//controls/ or any jsgui3 Control — before claiming a change works, when a control renders empty or stale, when adopting a stock jsgui3 control, or when a green test suite disagrees with what the page does. Also use it before writing "verified" in a commit message or ledger row about UI work.

English

Use when designing or polishing jsgui3 UIs in the WLILO style (White Leather + Industrial Luxury Obsidian): tokens, panels, tables, icon actions, and interaction-safe styling. Triggers: jsgui3 ui design, wlilo ui, dashboard styling, table styling, controls styling, obsidian panel, white leather background.

English

Includes Autonomous UI Inspection, Experimental Research Metacognition, Instruction Adherence, and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills8CategorygeneralStars0

What’s included

Autonomous UI Inspection

Autonomous UI inspection using a dual channel: (1) visual screenshots via Playwright MCP tools, (2) numeric layout metrics via Puppeteer scripts. Includes server --check standardization so agents can start/stop reliably.

Experimental Research Metacognition

Do experiment-driven research (hypotheses → minimal repros → evidence) and continuously improve research skills + tooling. Use when behavior is uncertain, contested, or performance-sensitive.

Instruction Adherence

Use when instruction drift is likely: multi-step tasks, mid-task detours (tooling upgrades), or when agents must consult MCP memory / Skills / sessions and re-anchor repeatedly. Triggers: 'stay on track', 'follow instructions', 'resume main task', 'detour', 'intermediate task done'.

Jsgui3 Activation Debug

Debug jsgui3 client-side activation issues. Use when SSR renders but clicks don’t work, this.dom.el is null, or you see Missing context.mapControls / activation failures.

Jsgui3 Lab Experimentation

Use repo lab experiments (src/ui/lab) to answer jsgui3 “how should we do this?” questions, then distill the validated result into durable docs + Skills.

Jsgui3 Ssr Activation Data Bridge

Understand and debug how jsgui3 SSR markup becomes activated client-side, including persisted fields (data-jsgui-fields) and ctrlfields (data-jsgui-ctrl-fields), and where to patch/plugin.

Jsgui3 Verify

How to prove a jsgui3 SSR + client-activation app actually works, and the traps that make it look like it works when it does not. Use this skill whenever you change, review, or debug anything under src/ui/server//controls/ or any jsgui3 Control — before claiming a change works, when a control renders empty or stale, when adopting a stock jsgui3 control, or when a green test suite disagrees with what the page does. Also use it before writing "verified" in a commit message or ledger row about UI work.

Jsgui3 Wlilo UI

Use when designing or polishing jsgui3 UIs in the WLILO style (White Leather + Industrial Luxury Obsidian): tokens, panels, tables, icon actions, and interaction-safe styling. Triggers: jsgui3 ui design, wlilo ui, dashboard styling, table styling, controls styling, obsidian panel, white leather background.

Quick start

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

Try it with your agent

After installation, start with a request like:

Example request
Use the Autonomous UI Inspection skill to help with my task.
Ask me for the context you need before getting started.

Requirements & license

  • A coding agent that can access your project files and install skills.
  • Your agent checks each skill’s instructions, dependencies, and permissions during setup.
  • License details are not provided in these listings. Check the author’s terms before using the skills.