Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

Commencer

frontend-experience

Étoiles2

Forks0

Mis à jour30 juin 2026 à 11:24

Master orchestrator for UI/UX audits and Frontend debugging.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

Echo-Scion

Echo-Scion/portable-brainvibing

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

Explorateur de fichiers

2 fichiers

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]])

Plus depuis ce dépôt

même dépôt

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]])