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

frontend-design

스타2

포크1

업데이트2026년 5월 20일 17:08

Create distinctive, production-grade frontend interfaces with high design quality. Use for web components, pages, dashboards, applications, posters, HTML/CSS layouts, or styling/beautifying web UI while avoiding generic AI aesthetics.

설치

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

Manus에서 실행

출처

dallenpyrah

dallenpyrah/skills

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

다운로드

Manus에서 실행

Frontend Design

Read the shared contracts before output: ../_shared/operator-output.md, ../_shared/attention-budget.md, ../_shared/evidence-record.md, ../_shared/state.md, ../_shared/cognitive-load.md, ../_shared/collaboration.md.

Purpose

Build a usable interface that fits the product, audience, and workflow.

Inputs

User request, existing UI/codebase, design references, target audience, technical constraints, or attached assets.

Reads

Existing components/styles, package/framework conventions, design assets, relevant screenshots, and browser verification results when available.

Writes

frontend code/assets
.context/frontend-design.md for design rationale and visual QA notes
.context/session-state.md for substantial work

Process

Inspect existing UI patterns before designing.
Choose one clear aesthetic direction tied to the domain.
Build the actual usable experience, not a marketing shell unless requested.
Use real/generative visual assets when the experience needs visual substance.
Keep controls complete and ergonomic for the target workflow.
Verify responsive layout, text fit, overlap, and critical interactions with the tightest available browser/screenshot loop.
Put design rationale, rejected directions, and QA notes in .context/frontend-design.md.

Design Rules

Avoid generic AI aesthetics, default font/color choices, and decorative noise.
Match density to domain: operational tools should be quiet and scannable; games/creative tools may be expressive.
Prefer familiar controls: icons for tools, toggles for booleans, sliders/inputs for numbers, tabs for views, menus for option sets.
Do not nest cards inside cards.
Do not use decorative orbs, blobs, or bokeh backgrounds.
Do not scale font size with viewport width.
Keep text inside its container on mobile and desktop.
Use icons from the app's icon library when available.
Use Three.js for primary 3D scenes and verify the canvas is nonblank and framed.

Operator Output

Return what was built, up to three evidence bullets including verification, remaining risk, and how to view/run it. Put detailed design notes in .context/frontend-design.md.

Stop Conditions

Stop if required product intent or assets are missing and cannot be reasonably inferred, or if visual verification cannot run for a UI change that needs it.

이 저장소의 다른 Skills

같은 저장소

emil-design-eng

dallenpyrah/skills

Apply Emil Kowalski-style UI polish: interaction details, component feel, animation restraint, and invisible product quality. Uses progressive disclosure instead of long design essays.

2026-05-222

emilkowal-animations

dallenpyrah/skills

Apply Emil Kowalski-style animation guidance for web interfaces: purposeful motion, correct easing, interruptibility, performance, reduced motion, and interaction feel.

2026-05-222

work

dallenpyrah/skills

Implement the requested change on the current branch using the best available contract: issue, architecture, user request, or repo evidence. Does not require /architect or /review to have run. Hands naturally to /test.

2026-05-222

address

dallenpyrah/skills

Triage and address PR review comments. Uses available issue/architecture/context when present, keeps evidence in .context/address.md, and does not require prior workflow phases.

2026-05-202

architect

dallenpyrah/skills

Derive the smallest correct architecture from user intent, repo facts, and available workflow evidence. Writes the full architecture to .context/architecture.md and returns only the decision, tradeoff, risk, and next action.

2026-05-202

code-review

dallenpyrah/skills

Review the current PR for correctness, tests, maintainability, security, standards, and prior-findings risk. Keeps reviewer detail in .context/code-review.md and posts concise actionable GitHub review comments.

2026-05-202

name	frontend-design
description	Create distinctive, production-grade frontend interfaces with high design quality. Use for web components, pages, dashboards, applications, posters, HTML/CSS layouts, or styling/beautifying web UI while avoiding generic AI aesthetics.
license	Complete terms in LICENSE.txt

Frontend Design

Purpose

Build a usable interface that fits the product, audience, and workflow.

Inputs

User request, existing UI/codebase, design references, target audience, technical constraints, or attached assets.

Reads

Existing components/styles, package/framework conventions, design assets, relevant screenshots, and browser verification results when available.

Writes

frontend code/assets
.context/frontend-design.md for design rationale and visual QA notes
.context/session-state.md for substantial work

Process

Inspect existing UI patterns before designing.
Choose one clear aesthetic direction tied to the domain.
Build the actual usable experience, not a marketing shell unless requested.
Use real/generative visual assets when the experience needs visual substance.
Keep controls complete and ergonomic for the target workflow.
Verify responsive layout, text fit, overlap, and critical interactions with the tightest available browser/screenshot loop.
Put design rationale, rejected directions, and QA notes in .context/frontend-design.md.

Design Rules

Avoid generic AI aesthetics, default font/color choices, and decorative noise.
Match density to domain: operational tools should be quiet and scannable; games/creative tools may be expressive.
Prefer familiar controls: icons for tools, toggles for booleans, sliders/inputs for numbers, tabs for views, menus for option sets.
Do not nest cards inside cards.
Do not use decorative orbs, blobs, or bokeh backgrounds.
Do not scale font size with viewport width.
Keep text inside its container on mobile and desktop.
Use icons from the app's icon library when available.
Use Three.js for primary 3D scenes and verify the canvas is nonblank and framed.

Operator Output

Return what was built, up to three evidence bullets including verification, remaining risk, and how to view/run it. Put detailed design notes in .context/frontend-design.md.

Stop Conditions

Stop if required product intent or assets are missing and cannot be reasonably inferred, or if visual verification cannot run for a UI change that needs it.