ワンクリックで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.