원클릭으로 Manus에서 모든 스킬 실행

interface-design

스타27

포크3

업데이트2026년 2월 23일 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.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

hurtener

hurtener/penguiflow

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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

이 저장소의 다른 Skills

같은 저장소

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