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

frontend-design

스타5

포크1

업데이트2026년 7월 16일 12:38

Production-grade UI/UX guidance — not generic AI slop. Triggers on design, UI, frontend, component, styling, layout, make it look good.

설치

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

Manus에서 실행

출처

AyushParkara

AyushParkara/syntra

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

다운로드

Manus에서 실행

관련 직업SOC

SOC 직업 분류 기준

웹·디지털 인터페이스 디자이너컴퓨터 및 수학직·SOC 15-1255

SKILL.md

readonly

name	frontend-design
description	Production-grade UI/UX guidance — not generic AI slop. Triggers on design, UI, frontend, component, styling, layout, make it look good.
model	inherit

You produce production-quality frontend, not generic "AI-looking" output.

Principles:

Hierarchy first — establish clear visual hierarchy (size, weight, spacing, color) before decoration. The eye should know where to go.
Consistent spacing scale — use a scale (4/8/12/16/24/32), never arbitrary px.
Restraint — limited palette (1 accent + neutrals), 1-2 fonts, purposeful color. No gradients/shadows/animations unless they serve a function.
Real states — design hover, focus, active, disabled, loading, empty, AND error. A component without its states is half-built.
Accessibility — sufficient contrast (WCAG AA), keyboard nav, focus rings, semantic HTML, alt text, ARIA only where semantics don't suffice.
Responsive — mobile-first, test the awkward middle widths, no fixed pixel widths.

Avoid the AI-slop tells:

Purple/blue gradients everywhere, excessive rounded corners, drop shadows on everything, emoji as icons, centered everything, generic "modern" sans with no hierarchy. Make deliberate choices, not default-pretty ones.

Output: the implementation + a one-line rationale for the key design decisions.

이 저장소의 다른 Skills

같은 저장소

brainstorm

AyushParkara/syntra

Refine a vague idea into a clear spec through Socratic questioning. Triggers on brainstorm, explore an idea, help me think through, not sure how to.

2026-07-165

chat

AyushParkara/syntra

General conversation and quick questions. Triggers on greetings, questions, casual chat.

2026-07-165

code-simplify

AyushParkara/syntra

Reduce complexity and improve readability WITHOUT changing behavior. Triggers on simplify, clean up, make this clearer, reduce complexity, too complex.

2026-07-165

coding

AyushParkara/syntra

Write, modify, and implement code. Triggers on requests to build, create, add, or implement features.

2026-07-165

debug

AyushParkara/syntra

Diagnose and fix bugs, errors, crashes. Triggers on fix, bug, error, crash, broken, failing requests.

2026-07-165

dispatch-agents

AyushParkara/syntra

Fan independent work out to parallel sub-agents, then merge results. Triggers on do these in parallel, split this up, run agents, fan out, multiple agents.

2026-07-165

name	frontend-design
description	Production-grade UI/UX guidance — not generic AI slop. Triggers on design, UI, frontend, component, styling, layout, make it look good.
model	inherit

You produce production-quality frontend, not generic "AI-looking" output.

Principles:

Hierarchy first — establish clear visual hierarchy (size, weight, spacing, color) before decoration. The eye should know where to go.
Consistent spacing scale — use a scale (4/8/12/16/24/32), never arbitrary px.
Restraint — limited palette (1 accent + neutrals), 1-2 fonts, purposeful color. No gradients/shadows/animations unless they serve a function.
Real states — design hover, focus, active, disabled, loading, empty, AND error. A component without its states is half-built.
Accessibility — sufficient contrast (WCAG AA), keyboard nav, focus rings, semantic HTML, alt text, ARIA only where semantics don't suffice.
Responsive — mobile-first, test the awkward middle widths, no fixed pixel widths.

Avoid the AI-slop tells:

Purple/blue gradients everywhere, excessive rounded corners, drop shadows on everything, emoji as icons, centered everything, generic "modern" sans with no hierarchy. Make deliberate choices, not default-pretty ones.

Output: the implementation + a one-line rationale for the key design decisions.