Run any Skill in Manus with one click

interface-design

Stars27

Forks3

UpdatedFebruary 23, 2026 at 20:00

Design and critique user interfaces (web/mobile) using a calm, cozy-premium “Design Soul” aesthetic (warm parchment neutrals, muted mint/teal accents, soft rounded surfaces, subtle depth, and generous whitespace). Use for UX/UI direction, screen layouts, information architecture, component + state specs, design tokens (CSS/Tailwind), interaction/motion guidance, accessibility review, and implementation handoff notes.

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

hurtener

hurtener/penguiflow

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

7 files

SKILL.md

readonly

name

interface-design

description

Interface Design (Design Soul)

Default workflow

Clarify the job: user, context, platform, constraints, content/data, success metric, existing patterns.
Define structure: one primary action per view, sections, navigation, empty/error states.
Compose the screen: spacing-first grouping, low-contrast separation, warm surfaces, quiet chrome.
Specify components + states: buttons/inputs/cards/tables; include hover/pressed/focus/disabled/loading/error.
Set tokens: start from scripts/generate_tokens.py and map to any existing tokens.
Run an a11y + usability pass: contrast, focus visibility, keyboard flow, target sizes, color-not-alone.
Handoff: provide CSS/Tailwind/React guidance and call out reusable components/tokens.

Output format (one screen)

Deliver in this order unless the user asks otherwise:

Summary: primary user goal + primary action.
Layout & hierarchy: regions/sections, nav, grouping, empty/error.
Components: list specs + states.
Tokens: concrete values or mapping (colors/type/space/radius/shadow).
Interaction & motion: what animates + durations/easing.
Accessibility: checks + any risks.

Project memory (optional)

If the user wants persistence across iterations, offer to create/update:

.interface-design/system.md with approved tokens, component patterns, and “do / don’t”.

References

Full design language: references/design-soul-guidelines.md
Critique rubric: references/critique-checklist.md
Starter tokens: references/tokens-starter.md and scripts/generate_tokens.py
Workflow + handoff details: references/interface-design-workflow.md

More from this repository

same repository

complexity-audit

hurtener/penguiflow

Measure cyclomatic complexity across a Python repo to find refactor opportunities and track code health over time. Runs three analyses — ruff C901 violations (functions above a CC threshold), radon repo-wide average and grade distribution (A–F), and a reference-weighted hotspot ranking that prioritizes complex code that's actually used. Use when the user asks about cyclomatic complexity, code complexity, where to refactor, repo hygiene metrics, complexity hotspots, technical-debt prioritization, complexity scores, or wants to add a complexity gate to CI/CD. Outputs human-readable tables plus an optional JSON report suitable for trend tracking and CI artifacts.

2026-06-1127

penguiflow-reactplanner-config

hurtener/penguiflow

Configure PenguiFlow ReactPlanner in production codebases (native LLM adapter, tool discovery + deferred activation, skills packs, allowlists/visibility policies, rich output, A2A router integration, guardrails, and background tasks) with safe defaults and troubleshooting.

2026-05-1927

penguiflow-runtime-skills-pack

hurtener/penguiflow

Author "skill packs" — playbooks the PenguiFlow ReactPlanner retrieves at runtime via `skill_search`/`skill_get`/`skill_list` (NOT the same as the SKILL.md agent-tool descriptors in the project's `skills/` directory; these are runtime artifacts stored in a SQLite skill store). Configure `SkillsConfig(enabled=True, skill_packs=[SkillPackConfig(...)], top_k=..., redact_pii=True)`, pick a pack format (`*.skill.md`/`.yaml`/`.json`/`.jsonl`), declare applicability via `required_tool_names`/`required_namespaces`/`required_tags`, scope by tenant/project, compose with a runtime `skills_provider`/`skills_provider_factory`, optionally enable non-persisting `skill_propose` drafting and `SkillsDirectoryConfig` surfacing. Use when a user says "author a skill pack", "playbooks for my planner", "skill_search", "runtime skills provider", or names `SkillsConfig`.

2026-05-1927

penguiflow-reflection-loop

hurtener/penguiflow

Explain, configure, and troubleshoot the ReactPlanner reflection loop: how post-answer critique, revision, and clarification work; how to wire `ReflectionConfig` and optional `reflection_llm`; how env/spec-driven scaffolds expose the knobs; and how to verify behavior through planner events, metadata, and cost counters. Use when a user asks about "reflection loop", "self-critique", "reflection_critique", "quality_threshold", "max_revisions", or wants to compare reflection-enabled vs reflection-disabled runs.

2026-05-1427

penguiflow-statestore

hurtener/penguiflow

Deep expertise for PenguiFlow persistence: implement or review a `StateStore` backend (required + optional duck-typed capabilities), enforce correct contracts (idempotency, ordering, cursors, cancellation), wire A2A router continuity via conversation bindings, sessions/tasks/updates/steering and background-task orchestration, integrate `ArtifactStore`, support distributed execution (`RemoteBinding`), and build UIs/clients around the Playground HTTP+SSE contract. Use when building/debugging StateStore or ArtifactStore implementations; designing database schemas; investigating missing/duplicated/out-of-order events; integrating A2A manager/specialist continuity, OAuth/HITL pause-resume; persisting trajectories/planner events; or implementing frontends that consume `/chat`, `/session/stream`, `/tasks`, `/events`, `/trajectory`, and `/artifacts`.

2026-05-1227

penguiflow-a2a-integration

hurtener/penguiflow

Expose a PenguiFlow agent as an A2A-spec service or call remote A2A agents from a planner — wire `A2AService` to a FastAPI app via `install_a2a_http`/`create_a2a_http_router`/`create_a2a_http_app`, serve the agent card at `/.well-known/agent-card.json`, handle JSON-RPC + REST + SSE + push-notification transports, optionally enable the gRPC binding, build manager↔specialist topologies with `A2AAgentToolset` and an `AgentRegistry`, persist conversation continuity via `RemoteBinding`/`StateStore`, and choose blocking/stream/task execution modes. Use when a user says "expose as A2A", "agent-to-agent", "call a remote agent", "agent card", "manager/specialist", "JSON-RPC", "SSE for agents", "push notifications for agents", or names `A2AService`, `RemoteBinding`, `A2AAgentToolset`.

2026-05-1227

name

interface-design

description

Interface Design (Design Soul)

Default workflow

Clarify the job: user, context, platform, constraints, content/data, success metric, existing patterns.
Define structure: one primary action per view, sections, navigation, empty/error states.
Compose the screen: spacing-first grouping, low-contrast separation, warm surfaces, quiet chrome.
Specify components + states: buttons/inputs/cards/tables; include hover/pressed/focus/disabled/loading/error.
Set tokens: start from scripts/generate_tokens.py and map to any existing tokens.
Run an a11y + usability pass: contrast, focus visibility, keyboard flow, target sizes, color-not-alone.
Handoff: provide CSS/Tailwind/React guidance and call out reusable components/tokens.

Output format (one screen)

Deliver in this order unless the user asks otherwise:

Summary: primary user goal + primary action.
Layout & hierarchy: regions/sections, nav, grouping, empty/error.
Components: list specs + states.
Tokens: concrete values or mapping (colors/type/space/radius/shadow).
Interaction & motion: what animates + durations/easing.
Accessibility: checks + any risks.

Project memory (optional)

If the user wants persistence across iterations, offer to create/update:

.interface-design/system.md with approved tokens, component patterns, and “do / don’t”.

References

Full design language: references/design-soul-guidelines.md
Critique rubric: references/critique-checklist.md
Starter tokens: references/tokens-starter.md and scripts/generate_tokens.py
Workflow + handoff details: references/interface-design-workflow.md