Run any Skill in Manus with one click

Get Started

frontend-experience

Stars2

Forks0

UpdatedJune 30, 2026 at 11:24

Master orchestrator for UI/UX audits and Frontend debugging.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Echo-Scion

Echo-Scion/portable-brainvibing

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

2 files

SKILL.md

readonly

name	frontend-experience
description	Master orchestrator for UI/UX audits and Frontend debugging.
tags	["ui","ux","debugging","state management","accessibility"]
portable	true

Frontend Experience

Your primary role is to audit and debug frontend architecture. (Note: For purely aesthetic/animation polish, you MUST execute view_file .agents/skills/ui-finish/SKILL.md NOW.)

JIT Tool Directives (Execute this FIRST)

Detect Ecosystem: Check the project root for ecosystem markers (pubspec.yaml = Flutter, package.json = Node/React, Cargo.toml = Rust).
Load Ecosystem Canon: Based on detected ecosystem, load the relevant canon:
- Flutter: canons/ecosystems/flutter/flutter-state-map.md
- Web/React: Apply standard React/HTML state patterns.
- Other: Apply universal 4-state mandate below.

Component State Map (MANDATORY — Universal)

When creating or auditing a frontend component that interacts with a backend, you MUST ensure all 4 states are handled:

SUCCESS — Data loaded, display content.
EMPTY — Data loaded but collection is empty, show empty state message.
ERROR — Request failed, show actionable error with retry option.
LOADING — Request in-flight, show skeleton/spinner.

For framework-specific code patterns implementing this map, load the relevant ecosystem canon.

If you submit a PR or code snippet that only handles the SUCCESS state, you have failed.

Micro-UX & Form Interaction Standards (Universal)

When auditing interactions, ensure that the user experience is smooth and informative.

Mandatory UX Checks:

Actionable Error Clarity: Error displays must not show raw stack traces to the user. Provide actionable steps (e.g., "Network error. Tap to retry.")
Disabled States & Explanations: If a submit button is disabled due to invalid form data or an active async process, visually indicate the disabled state.
Form Validation & Inline Feedback: Inputs should clearly display validation errors beneath them. Ensure "required" indicators are present.
Destructive Actions: Ensure destructive actions (e.g., Delete, Remove) have a confirmation dialog to prevent accidental data loss.
Success/Error Notifications: Trigger appropriate toast/snackbar notifications after form submissions or critical operations.

📚 Mandatory Knowledge Routing (JIT References)

If your current task intersects with these domains, you MUST execute iew_file on the target BEFORE writing code:

If User Prompt/Task Relates To...	Immediately Load (view_file)
Flutter Debugger	references/flutter-debugger.md
Ux Designer	references/[[ux-designer]])

More from this repository

same repository

api-contract

Echo-Scion/portable-brainvibing

Employ this skill to define strict request/response data contracts and safety layers (OpenAPI, Zod).

2026-06-302

brain-graph

Echo-Scion/portable-brainvibing

Brain Graph, Knowledge Base, Ingest, Lint, Cross-reference

2026-06-302

caveman-compress

Echo-Scion/portable-brainvibing

Compress natural language memory files (CLAUDE.md, todos, preferences) into caveman format to save input tokens. Preserves all technical substance, code, URLs, and structure. Compressed version overwrites the original file. Human-readable backup saved as FILE.original.md. Trigger: /caveman-compress FILEPATH or "compress memory file"

2026-06-302

caveman

Echo-Scion/portable-brainvibing

Ultra-compressed communication mode. Cuts token usage ~75% by speaking like caveman while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra, wenyan-lite, wenyan-full, wenyan-ultra. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman. Also auto-triggers when token efficiency is requested.

2026-06-302

cost-optimizer

Echo-Scion/portable-brainvibing

Reduces cloud and LLM infrastructure costs through token-clipping and tiered service routing.

2026-06-302

data-logic

Echo-Scion/portable-brainvibing

Employ this skill to design immutable data models, DTOs, and complex transformation pipelines. It ensures data integrity by enforcing immutability by default. Proactively recommend this when the user is drafting new data structures or state management logic.

2026-06-302

Frontend Experience

Your primary role is to audit and debug frontend architecture. (Note: For purely aesthetic/animation polish, you MUST execute view_file .agents/skills/ui-finish/SKILL.md NOW.)

JIT Tool Directives (Execute this FIRST)

Detect Ecosystem: Check the project root for ecosystem markers (pubspec.yaml = Flutter, package.json = Node/React, Cargo.toml = Rust).

Load Ecosystem Canon: Based on detected ecosystem, load the relevant canon:

Flutter: canons/ecosystems/flutter/flutter-state-map.md
Web/React: Apply standard React/HTML state patterns.
Other: Apply universal 4-state mandate below.

Component State Map (MANDATORY — Universal)

When creating or auditing a frontend component that interacts with a backend, you MUST ensure all 4 states are handled:

SUCCESS — Data loaded, display content.

EMPTY — Data loaded but collection is empty, show empty state message.

ERROR — Request failed, show actionable error with retry option.

LOADING — Request in-flight, show skeleton/spinner.

For framework-specific code patterns implementing this map, load the relevant ecosystem canon.

If you submit a PR or code snippet that only handles the SUCCESS state, you have failed.

Micro-UX & Form Interaction Standards (Universal)

When auditing interactions, ensure that the user experience is smooth and informative.

Mandatory UX Checks:

Actionable Error Clarity: Error displays must not show raw stack traces to the user. Provide actionable steps (e.g., "Network error. Tap to retry.")

Disabled States & Explanations: If a submit button is disabled due to invalid form data or an active async process, visually indicate the disabled state.

Form Validation & Inline Feedback: Inputs should clearly display validation errors beneath them. Ensure "required" indicators are present.

Destructive Actions: Ensure destructive actions (e.g., Delete, Remove) have a confirmation dialog to prevent accidental data loss.

Success/Error Notifications: Trigger appropriate toast/snackbar notifications after form submissions or critical operations.

📚 Mandatory Knowledge Routing (JIT References)

If your current task intersects with these domains, you MUST execute iew_file on the target BEFORE writing code:

If User Prompt/Task Relates To...

Immediately Load (view_file)

Flutter Debugger

references/flutter-debugger.md

Ux Designer

references/[[ux-designer]])